@xsolla/xui-tab-bar 0.128.0 → 0.129.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/native/index.d.mts +3 -2
  2. package/native/index.d.ts +3 -2
  3. package/native/index.js +17 -5
  4. package/native/index.js.map +1 -1
  5. package/native/index.mjs +25 -7
  6. package/native/index.mjs.map +1 -1
  7. package/package.json +4 -4
  8. package/web/index.d.mts +3 -2
  9. package/web/index.d.ts +3 -2
  10. package/web/index.js +10 -4
  11. package/web/index.js.map +1 -1
  12. package/web/index.mjs +18 -6
  13. package/web/index.mjs.map +1 -1
package/native/index.d.mts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { ReactNode } from 'react';
2
+ import { ThemeOverrideProps } from '@xsolla/xui-core';
2
3
 
3
4
  type TabBarLabelPosition = "beside-icon" | "below-icon";
4
5
  interface TabBarProps {
@@ -133,7 +134,7 @@ interface TabBarItemProps {
133
134
  * />
134
135
  * ```
135
136
  */
136
- declare const TabBar: React.FC<TabBarProps>;
137
+ declare const TabBar: React.FC<TabBarProps & ThemeOverrideProps>;
137
138
 
138
139
  /**
139
140
  * TabBarItem - An accessible tab item component
@@ -144,6 +145,6 @@ declare const TabBar: React.FC<TabBarProps>;
144
145
  * - tabIndex management for roving tabindex pattern
145
146
  * - Keyboard navigation support
146
147
  */
147
- declare const TabBarItem: React.FC<TabBarItemProps>;
148
+ declare const TabBarItem: React.FC<TabBarItemProps & ThemeOverrideProps>;
148
149
 
149
150
  export { TabBar, TabBarItem, type TabBarItemProps, type TabBarLabelPosition, type TabBarProps };
package/native/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { ReactNode } from 'react';
2
+ import { ThemeOverrideProps } from '@xsolla/xui-core';
2
3
 
3
4
  type TabBarLabelPosition = "beside-icon" | "below-icon";
4
5
  interface TabBarProps {
@@ -133,7 +134,7 @@ interface TabBarItemProps {
133
134
  * />
134
135
  * ```
135
136
  */
136
- declare const TabBar: React.FC<TabBarProps>;
137
+ declare const TabBar: React.FC<TabBarProps & ThemeOverrideProps>;
137
138
 
138
139
  /**
139
140
  * TabBarItem - An accessible tab item component
@@ -144,6 +145,6 @@ declare const TabBar: React.FC<TabBarProps>;
144
145
  * - tabIndex management for roving tabindex pattern
145
146
  * - Keyboard navigation support
146
147
  */
147
- declare const TabBarItem: React.FC<TabBarItemProps>;
148
+ declare const TabBarItem: React.FC<TabBarItemProps & ThemeOverrideProps>;
148
149
 
149
150
  export { TabBar, TabBarItem, type TabBarItemProps, type TabBarLabelPosition, type TabBarProps };
package/native/index.js CHANGED
@@ -81,6 +81,10 @@ var Box = ({
81
81
  left,
82
82
  right,
83
83
  width,
84
+ minWidth,
85
+ minHeight,
86
+ maxWidth,
87
+ maxHeight,
84
88
  flex,
85
89
  overflow,
86
90
  zIndex,
@@ -112,6 +116,10 @@ var Box = ({
112
116
  zIndex,
113
117
  height,
114
118
  width,
119
+ minWidth,
120
+ minHeight,
121
+ maxWidth,
122
+ maxHeight,
115
123
  padding,
116
124
  paddingHorizontal,
117
125
  paddingVertical,
@@ -240,7 +248,7 @@ var Text = ({
240
248
  }
241
249
  const incomingStyle = import_react_native2.StyleSheet.flatten(styleProp);
242
250
  const baseStyle = {
243
- color,
251
+ color: color ?? incomingStyle?.color,
244
252
  fontSize: typeof fontSize === "number" ? fontSize : void 0,
245
253
  fontWeight,
246
254
  fontFamily: resolvedFontFamily,
@@ -311,9 +319,11 @@ var TabBarItem = ({
311
319
  id,
312
320
  index,
313
321
  onKeyDown,
314
- tabRef
322
+ tabRef,
323
+ themeMode,
324
+ themeProductContext
315
325
  }) => {
316
- const { theme } = (0, import_xui_core.useDesignSystem)();
326
+ const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
317
327
  const color = focused ? theme.colors.content.primary : theme.colors.content.secondary;
318
328
  const renderIcon = () => {
319
329
  if (!icon) return null;
@@ -419,9 +429,11 @@ var TabBar = ({
419
429
  "aria-label": ariaLabel,
420
430
  "aria-labelledby": ariaLabelledBy,
421
431
  id,
422
- activateOnFocus = true
432
+ activateOnFocus = true,
433
+ themeMode,
434
+ themeProductContext
423
435
  }) => {
424
- const { theme } = (0, import_xui_core2.useDesignSystem)();
436
+ const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
425
437
  const tabRefs = (0, import_react2.useRef)([]);
426
438
  const containerRef = (0, import_react2.useRef)(null);
427
439
  const tabCount = state.routes.length;
package/native/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/TabBar.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx","../../src/TabBarItem.tsx"],"sourcesContent":["export * from \"./TabBar\";\nexport * from \"./TabBarItem\";\nexport * from \"./types\";\n","import React, { useRef, useCallback, useState, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, isWeb } from \"@xsolla/xui-core\";\nimport { TabBarItem } from \"./TabBarItem\";\nimport type { TabBarProps } from \"./types\";\n\n/**\n * TabBar - An accessible tab bar navigation component\n *\n * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:\n * - Arrow Left/Right: Navigate between tabs\n * - Home: Jump to first tab\n * - End: Jump to last tab\n * - Enter/Space: Activate focused tab (when activateOnFocus is false)\n *\n * @example\n * ```tsx\n * <TabBar\n * state={navigationState}\n * descriptors={descriptors}\n * navigation={navigation}\n * aria-label=\"Main navigation\"\n * />\n * ```\n */\nexport const TabBar: React.FC<TabBarProps> = ({\n state,\n descriptors,\n navigation,\n labelPosition = \"below-icon\",\n backgroundColor,\n testID,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n id,\n activateOnFocus = true,\n}) => {\n const { theme } = useDesignSystem();\n const tabRefs = useRef<(any | null)[]>([]);\n const containerRef = useRef<any>(null);\n const tabCount = state.routes.length;\n\n // Indicator position for sliding selection animation\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 tab changes (web only)\n useEffect(() => {\n if (!isWeb) return;\n\n const activeIndex = state.index;\n const activeTabEl = tabRefs.current[activeIndex];\n const containerEl = containerRef.current;\n\n if (activeTabEl && containerEl) {\n const containerRect = containerEl.getBoundingClientRect();\n const tabRect = activeTabEl.getBoundingClientRect();\n\n setIndicatorStyle({\n left: tabRect.left - containerRect.left,\n width: tabRect.width,\n initialized: true,\n });\n }\n }, [state.index]);\n\n /**\n * Focus a tab by its index\n */\n const focusTab = useCallback((index: number) => {\n const tabElement = tabRefs.current[index];\n if (tabElement) {\n tabElement.focus();\n }\n }, []);\n\n /**\n * Navigate to a tab by index\n */\n const navigateToTab = useCallback(\n (index: number) => {\n const route = state.routes[index];\n if (route) {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n }\n },\n [state.routes, navigation]\n );\n\n /**\n * Handle keyboard navigation within the tab bar\n */\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent, currentIndex: number) => {\n let nextIndex: number | null = null;\n\n switch (e.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n e.preventDefault();\n nextIndex = currentIndex < tabCount - 1 ? currentIndex + 1 : 0;\n break;\n\n case \"ArrowLeft\":\n case \"ArrowUp\":\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : tabCount - 1;\n break;\n\n case \"Home\":\n e.preventDefault();\n nextIndex = 0;\n break;\n\n case \"End\":\n e.preventDefault();\n nextIndex = tabCount - 1;\n break;\n\n case \"Enter\":\n case \" \":\n e.preventDefault();\n navigateToTab(currentIndex);\n break;\n\n default:\n break;\n }\n\n if (nextIndex !== null) {\n focusTab(nextIndex);\n if (activateOnFocus) {\n navigateToTab(nextIndex);\n }\n }\n },\n [tabCount, focusTab, navigateToTab, activateOnFocus]\n );\n\n return (\n <Box\n as=\"nav\"\n role=\"tablist\"\n aria-label={ariaLabel || \"Tab navigation\"}\n aria-labelledby={ariaLabelledBy}\n aria-orientation=\"horizontal\"\n ref={(el: any) => {\n containerRef.current = el;\n }}\n flexDirection=\"row\"\n alignItems=\"center\"\n position=\"relative\"\n backgroundColor={backgroundColor || theme.colors.control.segmented.bg}\n borderWidth={1}\n borderColor={theme.colors.control.segmented.border}\n borderStyle=\"solid\"\n borderRadius={8}\n padding={4}\n height={56}\n width=\"100%\"\n overflow=\"hidden\"\n testID={testID || \"tab-bar-container\"}\n id={id}\n >\n {isWeb && indicatorStyle.initialized && (\n <Box\n position=\"absolute\"\n zIndex={0}\n height={48}\n backgroundColor={theme.colors.control.segmented.bgActive}\n borderRadius={4}\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 {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarShowLabel === false\n ? undefined\n : options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: \"tabLongPress\",\n target: route.key,\n });\n };\n\n const icon = options.tabBarIcon\n ? options.tabBarIcon({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n size: 24,\n })\n : undefined;\n\n const badge = options.tabBarBadge;\n\n // Generate accessible label fallback\n const resolvedLabel =\n typeof label === \"function\"\n ? label({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n position: labelPosition,\n })\n : label;\n\n // Use explicit accessibility label or fall back to text label\n const accessibilityLabel =\n options.tabBarAccessibilityLabel ||\n (typeof resolvedLabel === \"string\" ? resolvedLabel : route.name);\n\n // Generate unique tab ID\n const tabId = id ? `${id}-tab-${route.key}` : undefined;\n\n return (\n <TabBarItem\n key={route.key}\n id={tabId}\n label={resolvedLabel}\n icon={icon}\n badge={badge}\n focused={isFocused}\n onPress={onPress}\n onLongPress={onLongPress}\n labelPosition={labelPosition}\n accessibilityLabel={accessibilityLabel}\n testID={options.tabBarTestID}\n index={index}\n tabCount={tabCount}\n onKeyDown={handleKeyDown}\n tabRef={(el) => {\n tabRefs.current[index] = el;\n }}\n />\n );\n })}\n </Box>\n );\n};\n\nTabBar.displayName = \"TabBar\";\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 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 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,\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\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\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 <View style={style}>{childrenWithProps}</View>;\n};\n","import React, { type ReactNode } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, isWeb } from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport type { TabBarItemProps } from \"./types\";\n\n/**\n * TabBarItem - An accessible tab item component\n *\n * Implements WAI-ARIA tab role with proper semantics:\n * - role=\"tab\" for tab semantics\n * - aria-selected to indicate active state\n * - tabIndex management for roving tabindex pattern\n * - Keyboard navigation support\n */\nexport const TabBarItem: React.FC<TabBarItemProps> = ({\n label,\n icon,\n badge,\n focused,\n onPress,\n onLongPress,\n labelPosition,\n accessibilityLabel,\n testID,\n id,\n index,\n onKeyDown,\n tabRef,\n}) => {\n const { theme } = useDesignSystem();\n\n const color = focused\n ? theme.colors.content.primary\n : theme.colors.content.secondary;\n\n const renderIcon = () => {\n if (!icon) return null;\n\n return (\n <Box\n position=\"relative\"\n alignItems=\"center\"\n justifyContent=\"center\"\n aria-hidden={true}\n >\n <Icon size={24} color={color}>\n {icon}\n </Icon>\n {badge !== undefined && badge !== null && (\n <Box position=\"absolute\" top={-5} right={-10} zIndex={1}>\n <Badge\n size=\"sm\"\n aria-label={\n typeof badge === \"number\"\n ? `${badge} notifications`\n : String(badge)\n }\n >\n {badge}\n </Badge>\n </Box>\n )}\n </Box>\n );\n };\n\n const renderLabel = () => {\n if (typeof label === \"string\") {\n return (\n <Text\n color={color}\n fontSize={10}\n lineHeight={10}\n fontWeight={focused ? \"500\" : \"400\"}\n numberOfLines={1}\n aria-hidden={true}\n >\n {label}\n </Text>\n );\n }\n return label as ReactNode;\n };\n\n /**\n * Handle keyboard events for this tab\n */\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (onKeyDown) {\n onKeyDown(e, index);\n }\n };\n\n return (\n <Box\n as=\"button\"\n role=\"tab\"\n id={id}\n aria-selected={focused}\n aria-label={accessibilityLabel}\n tabIndex={focused ? 0 : -1}\n ref={tabRef}\n flex={1}\n flexBasis={0}\n minWidth={48}\n position=\"relative\"\n zIndex={1}\n alignItems=\"center\"\n justifyContent=\"center\"\n paddingTop={8}\n paddingBottom={12}\n paddingHorizontal={8}\n cursor=\"pointer\"\n flexDirection={labelPosition === \"beside-icon\" ? \"row\" : \"column\"}\n gap={labelPosition === \"beside-icon\" ? 8 : 4}\n backgroundColor={\n !isWeb && focused\n ? theme.colors.control.segmented.bgActive\n : \"transparent\"\n }\n borderRadius={4}\n onPress={onPress}\n onLongPress={onLongPress}\n onKeyDown={handleKeyDown}\n testID={testID}\n hoverStyle={{\n backgroundColor: focused\n ? undefined\n : theme.colors.control.segmented.bgHover,\n }}\n focusStyle={{\n outlineColor: theme.colors.border.brand,\n outlineWidth: 2,\n outlineOffset: -2,\n outlineStyle: \"solid\",\n }}\n >\n {renderIcon()}\n {renderLabel()}\n </Box>\n );\n};\n\nTabBarItem.displayName = \"TabBarItem\";\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_xui_core","import_jsx_runtime","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/TabBar.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx","../../src/TabBarItem.tsx"],"sourcesContent":["export * from \"./TabBar\";\nexport * from \"./TabBarItem\";\nexport * from \"./types\";\n","import React, { useRef, useCallback, useState, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n isWeb,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\nimport { TabBarItem } from \"./TabBarItem\";\nimport type { TabBarProps } from \"./types\";\n\n/**\n * TabBar - An accessible tab bar navigation component\n *\n * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:\n * - Arrow Left/Right: Navigate between tabs\n * - Home: Jump to first tab\n * - End: Jump to last tab\n * - Enter/Space: Activate focused tab (when activateOnFocus is false)\n *\n * @example\n * ```tsx\n * <TabBar\n * state={navigationState}\n * descriptors={descriptors}\n * navigation={navigation}\n * aria-label=\"Main navigation\"\n * />\n * ```\n */\nexport const TabBar: React.FC<TabBarProps & ThemeOverrideProps> = ({\n state,\n descriptors,\n navigation,\n labelPosition = \"below-icon\",\n backgroundColor,\n testID,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n id,\n activateOnFocus = true,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const tabRefs = useRef<(any | null)[]>([]);\n const containerRef = useRef<any>(null);\n const tabCount = state.routes.length;\n\n // Indicator position for sliding selection animation\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 tab changes (web only)\n useEffect(() => {\n if (!isWeb) return;\n\n const activeIndex = state.index;\n const activeTabEl = tabRefs.current[activeIndex];\n const containerEl = containerRef.current;\n\n if (activeTabEl && containerEl) {\n const containerRect = containerEl.getBoundingClientRect();\n const tabRect = activeTabEl.getBoundingClientRect();\n\n setIndicatorStyle({\n left: tabRect.left - containerRect.left,\n width: tabRect.width,\n initialized: true,\n });\n }\n }, [state.index]);\n\n /**\n * Focus a tab by its index\n */\n const focusTab = useCallback((index: number) => {\n const tabElement = tabRefs.current[index];\n if (tabElement) {\n tabElement.focus();\n }\n }, []);\n\n /**\n * Navigate to a tab by index\n */\n const navigateToTab = useCallback(\n (index: number) => {\n const route = state.routes[index];\n if (route) {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n }\n },\n [state.routes, navigation]\n );\n\n /**\n * Handle keyboard navigation within the tab bar\n */\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent, currentIndex: number) => {\n let nextIndex: number | null = null;\n\n switch (e.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n e.preventDefault();\n nextIndex = currentIndex < tabCount - 1 ? currentIndex + 1 : 0;\n break;\n\n case \"ArrowLeft\":\n case \"ArrowUp\":\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : tabCount - 1;\n break;\n\n case \"Home\":\n e.preventDefault();\n nextIndex = 0;\n break;\n\n case \"End\":\n e.preventDefault();\n nextIndex = tabCount - 1;\n break;\n\n case \"Enter\":\n case \" \":\n e.preventDefault();\n navigateToTab(currentIndex);\n break;\n\n default:\n break;\n }\n\n if (nextIndex !== null) {\n focusTab(nextIndex);\n if (activateOnFocus) {\n navigateToTab(nextIndex);\n }\n }\n },\n [tabCount, focusTab, navigateToTab, activateOnFocus]\n );\n\n return (\n <Box\n as=\"nav\"\n role=\"tablist\"\n aria-label={ariaLabel || \"Tab navigation\"}\n aria-labelledby={ariaLabelledBy}\n aria-orientation=\"horizontal\"\n ref={(el: any) => {\n containerRef.current = el;\n }}\n flexDirection=\"row\"\n alignItems=\"center\"\n position=\"relative\"\n backgroundColor={backgroundColor || theme.colors.control.segmented.bg}\n borderWidth={1}\n borderColor={theme.colors.control.segmented.border}\n borderStyle=\"solid\"\n borderRadius={8}\n padding={4}\n height={56}\n width=\"100%\"\n overflow=\"hidden\"\n testID={testID || \"tab-bar-container\"}\n id={id}\n >\n {isWeb && indicatorStyle.initialized && (\n <Box\n position=\"absolute\"\n zIndex={0}\n height={48}\n backgroundColor={theme.colors.control.segmented.bgActive}\n borderRadius={4}\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 {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarShowLabel === false\n ? undefined\n : options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: \"tabLongPress\",\n target: route.key,\n });\n };\n\n const icon = options.tabBarIcon\n ? options.tabBarIcon({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n size: 24,\n })\n : undefined;\n\n const badge = options.tabBarBadge;\n\n // Generate accessible label fallback\n const resolvedLabel =\n typeof label === \"function\"\n ? label({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n position: labelPosition,\n })\n : label;\n\n // Use explicit accessibility label or fall back to text label\n const accessibilityLabel =\n options.tabBarAccessibilityLabel ||\n (typeof resolvedLabel === \"string\" ? resolvedLabel : route.name);\n\n // Generate unique tab ID\n const tabId = id ? `${id}-tab-${route.key}` : undefined;\n\n return (\n <TabBarItem\n key={route.key}\n id={tabId}\n label={resolvedLabel}\n icon={icon}\n badge={badge}\n focused={isFocused}\n onPress={onPress}\n onLongPress={onLongPress}\n labelPosition={labelPosition}\n accessibilityLabel={accessibilityLabel}\n testID={options.tabBarTestID}\n index={index}\n tabCount={tabCount}\n onKeyDown={handleKeyDown}\n tabRef={(el) => {\n tabRefs.current[index] = el;\n }}\n />\n );\n })}\n </Box>\n );\n};\n\nTabBar.displayName = \"TabBar\";\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\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\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 <View style={style}>{childrenWithProps}</View>;\n};\n","import React, { type ReactNode } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n isWeb,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport type { TabBarItemProps } from \"./types\";\n\n/**\n * TabBarItem - An accessible tab item component\n *\n * Implements WAI-ARIA tab role with proper semantics:\n * - role=\"tab\" for tab semantics\n * - aria-selected to indicate active state\n * - tabIndex management for roving tabindex pattern\n * - Keyboard navigation support\n */\nexport const TabBarItem: React.FC<TabBarItemProps & ThemeOverrideProps> = ({\n label,\n icon,\n badge,\n focused,\n onPress,\n onLongPress,\n labelPosition,\n accessibilityLabel,\n testID,\n id,\n index,\n onKeyDown,\n tabRef,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n const color = focused\n ? theme.colors.content.primary\n : theme.colors.content.secondary;\n\n const renderIcon = () => {\n if (!icon) return null;\n\n return (\n <Box\n position=\"relative\"\n alignItems=\"center\"\n justifyContent=\"center\"\n aria-hidden={true}\n >\n <Icon size={24} color={color}>\n {icon}\n </Icon>\n {badge !== undefined && badge !== null && (\n <Box position=\"absolute\" top={-5} right={-10} zIndex={1}>\n <Badge\n size=\"sm\"\n aria-label={\n typeof badge === \"number\"\n ? `${badge} notifications`\n : String(badge)\n }\n >\n {badge}\n </Badge>\n </Box>\n )}\n </Box>\n );\n };\n\n const renderLabel = () => {\n if (typeof label === \"string\") {\n return (\n <Text\n color={color}\n fontSize={10}\n lineHeight={10}\n fontWeight={focused ? \"500\" : \"400\"}\n numberOfLines={1}\n aria-hidden={true}\n >\n {label}\n </Text>\n );\n }\n return label as ReactNode;\n };\n\n /**\n * Handle keyboard events for this tab\n */\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (onKeyDown) {\n onKeyDown(e, index);\n }\n };\n\n return (\n <Box\n as=\"button\"\n role=\"tab\"\n id={id}\n aria-selected={focused}\n aria-label={accessibilityLabel}\n tabIndex={focused ? 0 : -1}\n ref={tabRef}\n flex={1}\n flexBasis={0}\n minWidth={48}\n position=\"relative\"\n zIndex={1}\n alignItems=\"center\"\n justifyContent=\"center\"\n paddingTop={8}\n paddingBottom={12}\n paddingHorizontal={8}\n cursor=\"pointer\"\n flexDirection={labelPosition === \"beside-icon\" ? \"row\" : \"column\"}\n gap={labelPosition === \"beside-icon\" ? 8 : 4}\n backgroundColor={\n !isWeb && focused\n ? theme.colors.control.segmented.bgActive\n : \"transparent\"\n }\n borderRadius={4}\n onPress={onPress}\n onLongPress={onLongPress}\n onKeyDown={handleKeyDown}\n testID={testID}\n hoverStyle={{\n backgroundColor: focused\n ? undefined\n : theme.colors.control.segmented.bgHover,\n }}\n focusStyle={{\n outlineColor: theme.colors.border.brand,\n outlineWidth: 2,\n outlineOffset: -2,\n outlineStyle: \"solid\",\n }}\n >\n {renderIcon()}\n {renderLabel()}\n </Box>\n );\n};\n\nTabBarItem.displayName = \"TabBarItem\";\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_xui_core","import_jsx_runtime","import_jsx_runtime"]}
package/native/index.mjs CHANGED
@@ -48,6 +48,10 @@ var Box = ({
48
48
  left,
49
49
  right,
50
50
  width,
51
+ minWidth,
52
+ minHeight,
53
+ maxWidth,
54
+ maxHeight,
51
55
  flex,
52
56
  overflow,
53
57
  zIndex,
@@ -79,6 +83,10 @@ var Box = ({
79
83
  zIndex,
80
84
  height,
81
85
  width,
86
+ minWidth,
87
+ minHeight,
88
+ maxWidth,
89
+ maxHeight,
82
90
  padding,
83
91
  paddingHorizontal,
84
92
  paddingVertical,
@@ -210,7 +218,7 @@ var Text = ({
210
218
  }
211
219
  const incomingStyle = StyleSheet.flatten(styleProp);
212
220
  const baseStyle = {
213
- color,
221
+ color: color ?? incomingStyle?.color,
214
222
  fontSize: typeof fontSize === "number" ? fontSize : void 0,
215
223
  fontWeight,
216
224
  fontFamily: resolvedFontFamily,
@@ -262,10 +270,16 @@ var Icon = ({ children, color, size }) => {
262
270
  };
263
271
 
264
272
  // src/TabBar.tsx
265
- import { useDesignSystem as useDesignSystem2, isWeb as isWeb2 } from "@xsolla/xui-core";
273
+ import {
274
+ useResolvedTheme as useResolvedTheme2,
275
+ isWeb as isWeb2
276
+ } from "@xsolla/xui-core";
266
277
 
267
278
  // src/TabBarItem.tsx
268
- import { useDesignSystem, isWeb } from "@xsolla/xui-core";
279
+ import {
280
+ useResolvedTheme,
281
+ isWeb
282
+ } from "@xsolla/xui-core";
269
283
  import { Badge } from "@xsolla/xui-badge";
270
284
  import { jsx as jsx4, jsxs } from "react/jsx-runtime";
271
285
  var TabBarItem = ({
@@ -281,9 +295,11 @@ var TabBarItem = ({
281
295
  id,
282
296
  index,
283
297
  onKeyDown,
284
- tabRef
298
+ tabRef,
299
+ themeMode,
300
+ themeProductContext
285
301
  }) => {
286
- const { theme } = useDesignSystem();
302
+ const { theme } = useResolvedTheme({ themeMode, themeProductContext });
287
303
  const color = focused ? theme.colors.content.primary : theme.colors.content.secondary;
288
304
  const renderIcon = () => {
289
305
  if (!icon) return null;
@@ -389,9 +405,11 @@ var TabBar = ({
389
405
  "aria-label": ariaLabel,
390
406
  "aria-labelledby": ariaLabelledBy,
391
407
  id,
392
- activateOnFocus = true
408
+ activateOnFocus = true,
409
+ themeMode,
410
+ themeProductContext
393
411
  }) => {
394
- const { theme } = useDesignSystem2();
412
+ const { theme } = useResolvedTheme2({ themeMode, themeProductContext });
395
413
  const tabRefs = useRef([]);
396
414
  const containerRef = useRef(null);
397
415
  const tabCount = state.routes.length;
package/native/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/TabBar.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx","../../src/TabBarItem.tsx"],"sourcesContent":["import React, { useRef, useCallback, useState, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, isWeb } from \"@xsolla/xui-core\";\nimport { TabBarItem } from \"./TabBarItem\";\nimport type { TabBarProps } from \"./types\";\n\n/**\n * TabBar - An accessible tab bar navigation component\n *\n * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:\n * - Arrow Left/Right: Navigate between tabs\n * - Home: Jump to first tab\n * - End: Jump to last tab\n * - Enter/Space: Activate focused tab (when activateOnFocus is false)\n *\n * @example\n * ```tsx\n * <TabBar\n * state={navigationState}\n * descriptors={descriptors}\n * navigation={navigation}\n * aria-label=\"Main navigation\"\n * />\n * ```\n */\nexport const TabBar: React.FC<TabBarProps> = ({\n state,\n descriptors,\n navigation,\n labelPosition = \"below-icon\",\n backgroundColor,\n testID,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n id,\n activateOnFocus = true,\n}) => {\n const { theme } = useDesignSystem();\n const tabRefs = useRef<(any | null)[]>([]);\n const containerRef = useRef<any>(null);\n const tabCount = state.routes.length;\n\n // Indicator position for sliding selection animation\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 tab changes (web only)\n useEffect(() => {\n if (!isWeb) return;\n\n const activeIndex = state.index;\n const activeTabEl = tabRefs.current[activeIndex];\n const containerEl = containerRef.current;\n\n if (activeTabEl && containerEl) {\n const containerRect = containerEl.getBoundingClientRect();\n const tabRect = activeTabEl.getBoundingClientRect();\n\n setIndicatorStyle({\n left: tabRect.left - containerRect.left,\n width: tabRect.width,\n initialized: true,\n });\n }\n }, [state.index]);\n\n /**\n * Focus a tab by its index\n */\n const focusTab = useCallback((index: number) => {\n const tabElement = tabRefs.current[index];\n if (tabElement) {\n tabElement.focus();\n }\n }, []);\n\n /**\n * Navigate to a tab by index\n */\n const navigateToTab = useCallback(\n (index: number) => {\n const route = state.routes[index];\n if (route) {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n }\n },\n [state.routes, navigation]\n );\n\n /**\n * Handle keyboard navigation within the tab bar\n */\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent, currentIndex: number) => {\n let nextIndex: number | null = null;\n\n switch (e.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n e.preventDefault();\n nextIndex = currentIndex < tabCount - 1 ? currentIndex + 1 : 0;\n break;\n\n case \"ArrowLeft\":\n case \"ArrowUp\":\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : tabCount - 1;\n break;\n\n case \"Home\":\n e.preventDefault();\n nextIndex = 0;\n break;\n\n case \"End\":\n e.preventDefault();\n nextIndex = tabCount - 1;\n break;\n\n case \"Enter\":\n case \" \":\n e.preventDefault();\n navigateToTab(currentIndex);\n break;\n\n default:\n break;\n }\n\n if (nextIndex !== null) {\n focusTab(nextIndex);\n if (activateOnFocus) {\n navigateToTab(nextIndex);\n }\n }\n },\n [tabCount, focusTab, navigateToTab, activateOnFocus]\n );\n\n return (\n <Box\n as=\"nav\"\n role=\"tablist\"\n aria-label={ariaLabel || \"Tab navigation\"}\n aria-labelledby={ariaLabelledBy}\n aria-orientation=\"horizontal\"\n ref={(el: any) => {\n containerRef.current = el;\n }}\n flexDirection=\"row\"\n alignItems=\"center\"\n position=\"relative\"\n backgroundColor={backgroundColor || theme.colors.control.segmented.bg}\n borderWidth={1}\n borderColor={theme.colors.control.segmented.border}\n borderStyle=\"solid\"\n borderRadius={8}\n padding={4}\n height={56}\n width=\"100%\"\n overflow=\"hidden\"\n testID={testID || \"tab-bar-container\"}\n id={id}\n >\n {isWeb && indicatorStyle.initialized && (\n <Box\n position=\"absolute\"\n zIndex={0}\n height={48}\n backgroundColor={theme.colors.control.segmented.bgActive}\n borderRadius={4}\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 {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarShowLabel === false\n ? undefined\n : options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: \"tabLongPress\",\n target: route.key,\n });\n };\n\n const icon = options.tabBarIcon\n ? options.tabBarIcon({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n size: 24,\n })\n : undefined;\n\n const badge = options.tabBarBadge;\n\n // Generate accessible label fallback\n const resolvedLabel =\n typeof label === \"function\"\n ? label({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n position: labelPosition,\n })\n : label;\n\n // Use explicit accessibility label or fall back to text label\n const accessibilityLabel =\n options.tabBarAccessibilityLabel ||\n (typeof resolvedLabel === \"string\" ? resolvedLabel : route.name);\n\n // Generate unique tab ID\n const tabId = id ? `${id}-tab-${route.key}` : undefined;\n\n return (\n <TabBarItem\n key={route.key}\n id={tabId}\n label={resolvedLabel}\n icon={icon}\n badge={badge}\n focused={isFocused}\n onPress={onPress}\n onLongPress={onLongPress}\n labelPosition={labelPosition}\n accessibilityLabel={accessibilityLabel}\n testID={options.tabBarTestID}\n index={index}\n tabCount={tabCount}\n onKeyDown={handleKeyDown}\n tabRef={(el) => {\n tabRefs.current[index] = el;\n }}\n />\n );\n })}\n </Box>\n );\n};\n\nTabBar.displayName = \"TabBar\";\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 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 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,\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\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\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 <View style={style}>{childrenWithProps}</View>;\n};\n","import React, { type ReactNode } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, isWeb } from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport type { TabBarItemProps } from \"./types\";\n\n/**\n * TabBarItem - An accessible tab item component\n *\n * Implements WAI-ARIA tab role with proper semantics:\n * - role=\"tab\" for tab semantics\n * - aria-selected to indicate active state\n * - tabIndex management for roving tabindex pattern\n * - Keyboard navigation support\n */\nexport const TabBarItem: React.FC<TabBarItemProps> = ({\n label,\n icon,\n badge,\n focused,\n onPress,\n onLongPress,\n labelPosition,\n accessibilityLabel,\n testID,\n id,\n index,\n onKeyDown,\n tabRef,\n}) => {\n const { theme } = useDesignSystem();\n\n const color = focused\n ? theme.colors.content.primary\n : theme.colors.content.secondary;\n\n const renderIcon = () => {\n if (!icon) return null;\n\n return (\n <Box\n position=\"relative\"\n alignItems=\"center\"\n justifyContent=\"center\"\n aria-hidden={true}\n >\n <Icon size={24} color={color}>\n {icon}\n </Icon>\n {badge !== undefined && badge !== null && (\n <Box position=\"absolute\" top={-5} right={-10} zIndex={1}>\n <Badge\n size=\"sm\"\n aria-label={\n typeof badge === \"number\"\n ? `${badge} notifications`\n : String(badge)\n }\n >\n {badge}\n </Badge>\n </Box>\n )}\n </Box>\n );\n };\n\n const renderLabel = () => {\n if (typeof label === \"string\") {\n return (\n <Text\n color={color}\n fontSize={10}\n lineHeight={10}\n fontWeight={focused ? \"500\" : \"400\"}\n numberOfLines={1}\n aria-hidden={true}\n >\n {label}\n </Text>\n );\n }\n return label as ReactNode;\n };\n\n /**\n * Handle keyboard events for this tab\n */\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (onKeyDown) {\n onKeyDown(e, index);\n }\n };\n\n return (\n <Box\n as=\"button\"\n role=\"tab\"\n id={id}\n aria-selected={focused}\n aria-label={accessibilityLabel}\n tabIndex={focused ? 0 : -1}\n ref={tabRef}\n flex={1}\n flexBasis={0}\n minWidth={48}\n position=\"relative\"\n zIndex={1}\n alignItems=\"center\"\n justifyContent=\"center\"\n paddingTop={8}\n paddingBottom={12}\n paddingHorizontal={8}\n cursor=\"pointer\"\n flexDirection={labelPosition === \"beside-icon\" ? \"row\" : \"column\"}\n gap={labelPosition === \"beside-icon\" ? 8 : 4}\n backgroundColor={\n !isWeb && focused\n ? theme.colors.control.segmented.bgActive\n : \"transparent\"\n }\n borderRadius={4}\n onPress={onPress}\n onLongPress={onLongPress}\n onKeyDown={handleKeyDown}\n testID={testID}\n hoverStyle={{\n backgroundColor: focused\n ? undefined\n : theme.colors.control.segmented.bgHover,\n }}\n focusStyle={{\n outlineColor: theme.colors.border.brand,\n outlineWidth: 2,\n outlineOffset: -2,\n outlineStyle: \"solid\",\n }}\n >\n {renderIcon()}\n {renderLabel()}\n </Box>\n );\n};\n\nTabBarItem.displayName = \"TabBarItem\";\n"],"mappings":"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","names":["jsx","View","jsx","useDesignSystem","isWeb","jsx","jsx","jsxs","useDesignSystem","isWeb"]}
1
+ {"version":3,"sources":["../../src/TabBar.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx","../../src/TabBarItem.tsx"],"sourcesContent":["import React, { useRef, useCallback, useState, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n isWeb,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\nimport { TabBarItem } from \"./TabBarItem\";\nimport type { TabBarProps } from \"./types\";\n\n/**\n * TabBar - An accessible tab bar navigation component\n *\n * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:\n * - Arrow Left/Right: Navigate between tabs\n * - Home: Jump to first tab\n * - End: Jump to last tab\n * - Enter/Space: Activate focused tab (when activateOnFocus is false)\n *\n * @example\n * ```tsx\n * <TabBar\n * state={navigationState}\n * descriptors={descriptors}\n * navigation={navigation}\n * aria-label=\"Main navigation\"\n * />\n * ```\n */\nexport const TabBar: React.FC<TabBarProps & ThemeOverrideProps> = ({\n state,\n descriptors,\n navigation,\n labelPosition = \"below-icon\",\n backgroundColor,\n testID,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n id,\n activateOnFocus = true,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const tabRefs = useRef<(any | null)[]>([]);\n const containerRef = useRef<any>(null);\n const tabCount = state.routes.length;\n\n // Indicator position for sliding selection animation\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 tab changes (web only)\n useEffect(() => {\n if (!isWeb) return;\n\n const activeIndex = state.index;\n const activeTabEl = tabRefs.current[activeIndex];\n const containerEl = containerRef.current;\n\n if (activeTabEl && containerEl) {\n const containerRect = containerEl.getBoundingClientRect();\n const tabRect = activeTabEl.getBoundingClientRect();\n\n setIndicatorStyle({\n left: tabRect.left - containerRect.left,\n width: tabRect.width,\n initialized: true,\n });\n }\n }, [state.index]);\n\n /**\n * Focus a tab by its index\n */\n const focusTab = useCallback((index: number) => {\n const tabElement = tabRefs.current[index];\n if (tabElement) {\n tabElement.focus();\n }\n }, []);\n\n /**\n * Navigate to a tab by index\n */\n const navigateToTab = useCallback(\n (index: number) => {\n const route = state.routes[index];\n if (route) {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n }\n },\n [state.routes, navigation]\n );\n\n /**\n * Handle keyboard navigation within the tab bar\n */\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent, currentIndex: number) => {\n let nextIndex: number | null = null;\n\n switch (e.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n e.preventDefault();\n nextIndex = currentIndex < tabCount - 1 ? currentIndex + 1 : 0;\n break;\n\n case \"ArrowLeft\":\n case \"ArrowUp\":\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : tabCount - 1;\n break;\n\n case \"Home\":\n e.preventDefault();\n nextIndex = 0;\n break;\n\n case \"End\":\n e.preventDefault();\n nextIndex = tabCount - 1;\n break;\n\n case \"Enter\":\n case \" \":\n e.preventDefault();\n navigateToTab(currentIndex);\n break;\n\n default:\n break;\n }\n\n if (nextIndex !== null) {\n focusTab(nextIndex);\n if (activateOnFocus) {\n navigateToTab(nextIndex);\n }\n }\n },\n [tabCount, focusTab, navigateToTab, activateOnFocus]\n );\n\n return (\n <Box\n as=\"nav\"\n role=\"tablist\"\n aria-label={ariaLabel || \"Tab navigation\"}\n aria-labelledby={ariaLabelledBy}\n aria-orientation=\"horizontal\"\n ref={(el: any) => {\n containerRef.current = el;\n }}\n flexDirection=\"row\"\n alignItems=\"center\"\n position=\"relative\"\n backgroundColor={backgroundColor || theme.colors.control.segmented.bg}\n borderWidth={1}\n borderColor={theme.colors.control.segmented.border}\n borderStyle=\"solid\"\n borderRadius={8}\n padding={4}\n height={56}\n width=\"100%\"\n overflow=\"hidden\"\n testID={testID || \"tab-bar-container\"}\n id={id}\n >\n {isWeb && indicatorStyle.initialized && (\n <Box\n position=\"absolute\"\n zIndex={0}\n height={48}\n backgroundColor={theme.colors.control.segmented.bgActive}\n borderRadius={4}\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 {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarShowLabel === false\n ? undefined\n : options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: \"tabLongPress\",\n target: route.key,\n });\n };\n\n const icon = options.tabBarIcon\n ? options.tabBarIcon({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n size: 24,\n })\n : undefined;\n\n const badge = options.tabBarBadge;\n\n // Generate accessible label fallback\n const resolvedLabel =\n typeof label === \"function\"\n ? label({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n position: labelPosition,\n })\n : label;\n\n // Use explicit accessibility label or fall back to text label\n const accessibilityLabel =\n options.tabBarAccessibilityLabel ||\n (typeof resolvedLabel === \"string\" ? resolvedLabel : route.name);\n\n // Generate unique tab ID\n const tabId = id ? `${id}-tab-${route.key}` : undefined;\n\n return (\n <TabBarItem\n key={route.key}\n id={tabId}\n label={resolvedLabel}\n icon={icon}\n badge={badge}\n focused={isFocused}\n onPress={onPress}\n onLongPress={onLongPress}\n labelPosition={labelPosition}\n accessibilityLabel={accessibilityLabel}\n testID={options.tabBarTestID}\n index={index}\n tabCount={tabCount}\n onKeyDown={handleKeyDown}\n tabRef={(el) => {\n tabRefs.current[index] = el;\n }}\n />\n );\n })}\n </Box>\n );\n};\n\nTabBar.displayName = \"TabBar\";\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\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\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 <View style={style}>{childrenWithProps}</View>;\n};\n","import React, { type ReactNode } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n isWeb,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport type { TabBarItemProps } from \"./types\";\n\n/**\n * TabBarItem - An accessible tab item component\n *\n * Implements WAI-ARIA tab role with proper semantics:\n * - role=\"tab\" for tab semantics\n * - aria-selected to indicate active state\n * - tabIndex management for roving tabindex pattern\n * - Keyboard navigation support\n */\nexport const TabBarItem: React.FC<TabBarItemProps & ThemeOverrideProps> = ({\n label,\n icon,\n badge,\n focused,\n onPress,\n onLongPress,\n labelPosition,\n accessibilityLabel,\n testID,\n id,\n index,\n onKeyDown,\n tabRef,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n const color = focused\n ? theme.colors.content.primary\n : theme.colors.content.secondary;\n\n const renderIcon = () => {\n if (!icon) return null;\n\n return (\n <Box\n position=\"relative\"\n alignItems=\"center\"\n justifyContent=\"center\"\n aria-hidden={true}\n >\n <Icon size={24} color={color}>\n {icon}\n </Icon>\n {badge !== undefined && badge !== null && (\n <Box position=\"absolute\" top={-5} right={-10} zIndex={1}>\n <Badge\n size=\"sm\"\n aria-label={\n typeof badge === \"number\"\n ? `${badge} notifications`\n : String(badge)\n }\n >\n {badge}\n </Badge>\n </Box>\n )}\n </Box>\n );\n };\n\n const renderLabel = () => {\n if (typeof label === \"string\") {\n return (\n <Text\n color={color}\n fontSize={10}\n lineHeight={10}\n fontWeight={focused ? \"500\" : \"400\"}\n numberOfLines={1}\n aria-hidden={true}\n >\n {label}\n </Text>\n );\n }\n return label as ReactNode;\n };\n\n /**\n * Handle keyboard events for this tab\n */\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (onKeyDown) {\n onKeyDown(e, index);\n }\n };\n\n return (\n <Box\n as=\"button\"\n role=\"tab\"\n id={id}\n aria-selected={focused}\n aria-label={accessibilityLabel}\n tabIndex={focused ? 0 : -1}\n ref={tabRef}\n flex={1}\n flexBasis={0}\n minWidth={48}\n position=\"relative\"\n zIndex={1}\n alignItems=\"center\"\n justifyContent=\"center\"\n paddingTop={8}\n paddingBottom={12}\n paddingHorizontal={8}\n cursor=\"pointer\"\n flexDirection={labelPosition === \"beside-icon\" ? \"row\" : \"column\"}\n gap={labelPosition === \"beside-icon\" ? 8 : 4}\n backgroundColor={\n !isWeb && focused\n ? theme.colors.control.segmented.bgActive\n : \"transparent\"\n }\n borderRadius={4}\n onPress={onPress}\n onLongPress={onLongPress}\n onKeyDown={handleKeyDown}\n testID={testID}\n hoverStyle={{\n backgroundColor: focused\n ? undefined\n : theme.colors.control.segmented.bgHover,\n }}\n focusStyle={{\n outlineColor: theme.colors.border.brand,\n outlineWidth: 2,\n outlineOffset: -2,\n outlineStyle: \"solid\",\n }}\n >\n {renderIcon()}\n {renderLabel()}\n </Box>\n );\n};\n\nTabBarItem.displayName = \"TabBarItem\";\n"],"mappings":"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","names":["jsx","View","jsx","useResolvedTheme","isWeb","jsx","jsx","jsxs","useResolvedTheme","isWeb"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-tab-bar",
3
- "version": "0.128.0",
3
+ "version": "0.129.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
13
13
  "test:coverage": "vitest run --coverage"
14
14
  },
15
15
  "dependencies": {
16
- "@xsolla/xui-badge": "0.128.0",
17
- "@xsolla/xui-core": "0.128.0",
18
- "@xsolla/xui-primitives-core": "0.128.0"
16
+ "@xsolla/xui-badge": "0.129.0",
17
+ "@xsolla/xui-core": "0.129.0",
18
+ "@xsolla/xui-primitives-core": "0.129.0"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "react": ">=16.8.0"
package/web/index.d.mts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { ReactNode } from 'react';
2
+ import { ThemeOverrideProps } from '@xsolla/xui-core';
2
3
 
3
4
  type TabBarLabelPosition = "beside-icon" | "below-icon";
4
5
  interface TabBarProps {
@@ -133,7 +134,7 @@ interface TabBarItemProps {
133
134
  * />
134
135
  * ```
135
136
  */
136
- declare const TabBar: React.FC<TabBarProps>;
137
+ declare const TabBar: React.FC<TabBarProps & ThemeOverrideProps>;
137
138
 
138
139
  /**
139
140
  * TabBarItem - An accessible tab item component
@@ -144,6 +145,6 @@ declare const TabBar: React.FC<TabBarProps>;
144
145
  * - tabIndex management for roving tabindex pattern
145
146
  * - Keyboard navigation support
146
147
  */
147
- declare const TabBarItem: React.FC<TabBarItemProps>;
148
+ declare const TabBarItem: React.FC<TabBarItemProps & ThemeOverrideProps>;
148
149
 
149
150
  export { TabBar, TabBarItem, type TabBarItemProps, type TabBarLabelPosition, type TabBarProps };
package/web/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { ReactNode } from 'react';
2
+ import { ThemeOverrideProps } from '@xsolla/xui-core';
2
3
 
3
4
  type TabBarLabelPosition = "beside-icon" | "below-icon";
4
5
  interface TabBarProps {
@@ -133,7 +134,7 @@ interface TabBarItemProps {
133
134
  * />
134
135
  * ```
135
136
  */
136
- declare const TabBar: React.FC<TabBarProps>;
137
+ declare const TabBar: React.FC<TabBarProps & ThemeOverrideProps>;
137
138
 
138
139
  /**
139
140
  * TabBarItem - An accessible tab item component
@@ -144,6 +145,6 @@ declare const TabBar: React.FC<TabBarProps>;
144
145
  * - tabIndex management for roving tabindex pattern
145
146
  * - Keyboard navigation support
146
147
  */
147
- declare const TabBarItem: React.FC<TabBarItemProps>;
148
+ declare const TabBarItem: React.FC<TabBarItemProps & ThemeOverrideProps>;
148
149
 
149
150
  export { TabBar, TabBarItem, type TabBarItemProps, type TabBarLabelPosition, type TabBarProps };
package/web/index.js CHANGED
@@ -76,6 +76,8 @@ var StyledBox = import_styled_components.default.div`
76
76
  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
77
77
  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
78
78
  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
79
+ max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
80
+ max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
79
81
 
80
82
  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
81
83
  ${(props) => props.paddingHorizontal && `
@@ -282,9 +284,11 @@ var TabBarItem = ({
282
284
  id,
283
285
  index,
284
286
  onKeyDown,
285
- tabRef
287
+ tabRef,
288
+ themeMode,
289
+ themeProductContext
286
290
  }) => {
287
- const { theme } = (0, import_xui_core.useDesignSystem)();
291
+ const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
288
292
  const color = focused ? theme.colors.content.primary : theme.colors.content.secondary;
289
293
  const renderIcon = () => {
290
294
  if (!icon) return null;
@@ -390,9 +394,11 @@ var TabBar = ({
390
394
  "aria-label": ariaLabel,
391
395
  "aria-labelledby": ariaLabelledBy,
392
396
  id,
393
- activateOnFocus = true
397
+ activateOnFocus = true,
398
+ themeMode,
399
+ themeProductContext
394
400
  }) => {
395
- const { theme } = (0, import_xui_core2.useDesignSystem)();
401
+ const { theme } = (0, import_xui_core2.useResolvedTheme)({ themeMode, themeProductContext });
396
402
  const tabRefs = (0, import_react2.useRef)([]);
397
403
  const containerRef = (0, import_react2.useRef)(null);
398
404
  const tabCount = state.routes.length;
package/web/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/TabBar.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Icon.tsx","../../src/TabBarItem.tsx"],"sourcesContent":["export * from \"./TabBar\";\nexport * from \"./TabBarItem\";\nexport * from \"./types\";\n","import React, { useRef, useCallback, useState, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, isWeb } from \"@xsolla/xui-core\";\nimport { TabBarItem } from \"./TabBarItem\";\nimport type { TabBarProps } from \"./types\";\n\n/**\n * TabBar - An accessible tab bar navigation component\n *\n * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:\n * - Arrow Left/Right: Navigate between tabs\n * - Home: Jump to first tab\n * - End: Jump to last tab\n * - Enter/Space: Activate focused tab (when activateOnFocus is false)\n *\n * @example\n * ```tsx\n * <TabBar\n * state={navigationState}\n * descriptors={descriptors}\n * navigation={navigation}\n * aria-label=\"Main navigation\"\n * />\n * ```\n */\nexport const TabBar: React.FC<TabBarProps> = ({\n state,\n descriptors,\n navigation,\n labelPosition = \"below-icon\",\n backgroundColor,\n testID,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n id,\n activateOnFocus = true,\n}) => {\n const { theme } = useDesignSystem();\n const tabRefs = useRef<(any | null)[]>([]);\n const containerRef = useRef<any>(null);\n const tabCount = state.routes.length;\n\n // Indicator position for sliding selection animation\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 tab changes (web only)\n useEffect(() => {\n if (!isWeb) return;\n\n const activeIndex = state.index;\n const activeTabEl = tabRefs.current[activeIndex];\n const containerEl = containerRef.current;\n\n if (activeTabEl && containerEl) {\n const containerRect = containerEl.getBoundingClientRect();\n const tabRect = activeTabEl.getBoundingClientRect();\n\n setIndicatorStyle({\n left: tabRect.left - containerRect.left,\n width: tabRect.width,\n initialized: true,\n });\n }\n }, [state.index]);\n\n /**\n * Focus a tab by its index\n */\n const focusTab = useCallback((index: number) => {\n const tabElement = tabRefs.current[index];\n if (tabElement) {\n tabElement.focus();\n }\n }, []);\n\n /**\n * Navigate to a tab by index\n */\n const navigateToTab = useCallback(\n (index: number) => {\n const route = state.routes[index];\n if (route) {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n }\n },\n [state.routes, navigation]\n );\n\n /**\n * Handle keyboard navigation within the tab bar\n */\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent, currentIndex: number) => {\n let nextIndex: number | null = null;\n\n switch (e.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n e.preventDefault();\n nextIndex = currentIndex < tabCount - 1 ? currentIndex + 1 : 0;\n break;\n\n case \"ArrowLeft\":\n case \"ArrowUp\":\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : tabCount - 1;\n break;\n\n case \"Home\":\n e.preventDefault();\n nextIndex = 0;\n break;\n\n case \"End\":\n e.preventDefault();\n nextIndex = tabCount - 1;\n break;\n\n case \"Enter\":\n case \" \":\n e.preventDefault();\n navigateToTab(currentIndex);\n break;\n\n default:\n break;\n }\n\n if (nextIndex !== null) {\n focusTab(nextIndex);\n if (activateOnFocus) {\n navigateToTab(nextIndex);\n }\n }\n },\n [tabCount, focusTab, navigateToTab, activateOnFocus]\n );\n\n return (\n <Box\n as=\"nav\"\n role=\"tablist\"\n aria-label={ariaLabel || \"Tab navigation\"}\n aria-labelledby={ariaLabelledBy}\n aria-orientation=\"horizontal\"\n ref={(el: any) => {\n containerRef.current = el;\n }}\n flexDirection=\"row\"\n alignItems=\"center\"\n position=\"relative\"\n backgroundColor={backgroundColor || theme.colors.control.segmented.bg}\n borderWidth={1}\n borderColor={theme.colors.control.segmented.border}\n borderStyle=\"solid\"\n borderRadius={8}\n padding={4}\n height={56}\n width=\"100%\"\n overflow=\"hidden\"\n testID={testID || \"tab-bar-container\"}\n id={id}\n >\n {isWeb && indicatorStyle.initialized && (\n <Box\n position=\"absolute\"\n zIndex={0}\n height={48}\n backgroundColor={theme.colors.control.segmented.bgActive}\n borderRadius={4}\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 {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarShowLabel === false\n ? undefined\n : options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: \"tabLongPress\",\n target: route.key,\n });\n };\n\n const icon = options.tabBarIcon\n ? options.tabBarIcon({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n size: 24,\n })\n : undefined;\n\n const badge = options.tabBarBadge;\n\n // Generate accessible label fallback\n const resolvedLabel =\n typeof label === \"function\"\n ? label({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n position: labelPosition,\n })\n : label;\n\n // Use explicit accessibility label or fall back to text label\n const accessibilityLabel =\n options.tabBarAccessibilityLabel ||\n (typeof resolvedLabel === \"string\" ? resolvedLabel : route.name);\n\n // Generate unique tab ID\n const tabId = id ? `${id}-tab-${route.key}` : undefined;\n\n return (\n <TabBarItem\n key={route.key}\n id={tabId}\n label={resolvedLabel}\n icon={icon}\n badge={badge}\n focused={isFocused}\n onPress={onPress}\n onLongPress={onLongPress}\n labelPosition={labelPosition}\n accessibilityLabel={accessibilityLabel}\n testID={options.tabBarTestID}\n index={index}\n tabCount={tabCount}\n onKeyDown={handleKeyDown}\n tabRef={(el) => {\n tabRefs.current[index] = el;\n }}\n />\n );\n })}\n </Box>\n );\n};\n\nTabBar.displayName = \"TabBar\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\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 \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React, { type ReactNode } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, isWeb } from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport type { TabBarItemProps } from \"./types\";\n\n/**\n * TabBarItem - An accessible tab item component\n *\n * Implements WAI-ARIA tab role with proper semantics:\n * - role=\"tab\" for tab semantics\n * - aria-selected to indicate active state\n * - tabIndex management for roving tabindex pattern\n * - Keyboard navigation support\n */\nexport const TabBarItem: React.FC<TabBarItemProps> = ({\n label,\n icon,\n badge,\n focused,\n onPress,\n onLongPress,\n labelPosition,\n accessibilityLabel,\n testID,\n id,\n index,\n onKeyDown,\n tabRef,\n}) => {\n const { theme } = useDesignSystem();\n\n const color = focused\n ? theme.colors.content.primary\n : theme.colors.content.secondary;\n\n const renderIcon = () => {\n if (!icon) return null;\n\n return (\n <Box\n position=\"relative\"\n alignItems=\"center\"\n justifyContent=\"center\"\n aria-hidden={true}\n >\n <Icon size={24} color={color}>\n {icon}\n </Icon>\n {badge !== undefined && badge !== null && (\n <Box position=\"absolute\" top={-5} right={-10} zIndex={1}>\n <Badge\n size=\"sm\"\n aria-label={\n typeof badge === \"number\"\n ? `${badge} notifications`\n : String(badge)\n }\n >\n {badge}\n </Badge>\n </Box>\n )}\n </Box>\n );\n };\n\n const renderLabel = () => {\n if (typeof label === \"string\") {\n return (\n <Text\n color={color}\n fontSize={10}\n lineHeight={10}\n fontWeight={focused ? \"500\" : \"400\"}\n numberOfLines={1}\n aria-hidden={true}\n >\n {label}\n </Text>\n );\n }\n return label as ReactNode;\n };\n\n /**\n * Handle keyboard events for this tab\n */\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (onKeyDown) {\n onKeyDown(e, index);\n }\n };\n\n return (\n <Box\n as=\"button\"\n role=\"tab\"\n id={id}\n aria-selected={focused}\n aria-label={accessibilityLabel}\n tabIndex={focused ? 0 : -1}\n ref={tabRef}\n flex={1}\n flexBasis={0}\n minWidth={48}\n position=\"relative\"\n zIndex={1}\n alignItems=\"center\"\n justifyContent=\"center\"\n paddingTop={8}\n paddingBottom={12}\n paddingHorizontal={8}\n cursor=\"pointer\"\n flexDirection={labelPosition === \"beside-icon\" ? \"row\" : \"column\"}\n gap={labelPosition === \"beside-icon\" ? 8 : 4}\n backgroundColor={\n !isWeb && focused\n ? theme.colors.control.segmented.bgActive\n : \"transparent\"\n }\n borderRadius={4}\n onPress={onPress}\n onLongPress={onLongPress}\n onKeyDown={handleKeyDown}\n testID={testID}\n hoverStyle={{\n backgroundColor: focused\n ? undefined\n : theme.colors.control.segmented.bgHover,\n }}\n focusStyle={{\n outlineColor: theme.colors.border.brand,\n outlineWidth: 2,\n outlineOffset: -2,\n outlineStyle: \"solid\",\n }}\n >\n {renderIcon()}\n {renderLabel()}\n </Box>\n );\n};\n\nTabBarItem.displayName = \"TabBarItem\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAgE;;;ACAhE,mBAAkB;AAClB,+BAAmB;AAuMX;AApMR,IAAM,YAAY,yBAAAC,QAAO;AAAA;AAAA;AAAA,sBAGH,CAAC,UAAU,MAAM,mBAAmB,aAAa;AAAA,kBACrD,CAAC,UAAU,MAAM,eAAe,aAAa;AAAA,kBAC7C,CAAC,UACf,OAAO,MAAM,gBAAgB,WACzB,GAAG,MAAM,WAAW,OACpB,MAAM,eAAe,CAAC;AAAA;AAAA,IAE1B,CAAC,UACD,MAAM,sBAAsB,UAC5B;AAAA,2BACuB,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,2BACtG,MAAM,qBAAqB,MAAM,eAAe,aAAa;AAAA;AAAA,GAErF;AAAA,IACC,CAAC,UACD,MAAM,mBAAmB,UACzB;AAAA,wBACoB,OAAO,MAAM,mBAAmB,WAAW,GAAG,MAAM,cAAc,OAAO,MAAM,cAAc;AAAA,wBAC7F,MAAM,kBAAkB,MAAM,eAAe,aAAa;AAAA;AAAA,GAE/E;AAAA,IACC,CAAC,UACD,MAAM,oBAAoB,UAC1B;AAAA,yBACqB,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,yBAChG,MAAM,mBAAmB,MAAM,eAAe,aAAa;AAAA;AAAA,GAEjF;AAAA,IACC,CAAC,UACD,MAAM,qBAAqB,UAC3B;AAAA,0BACsB,OAAO,MAAM,qBAAqB,WAAW,GAAG,MAAM,gBAAgB,OAAO,MAAM,gBAAgB;AAAA,0BACnG,MAAM,oBAAoB,MAAM,eAAe,aAAa;AAAA;AAAA,GAEnF;AAAA;AAAA,kBAEe,CAAC,UACf,MAAM,gBACL,MAAM,eACP,MAAM,qBACN,MAAM,kBACN,MAAM,mBACN,MAAM,mBACF,UACA,OAAO;AAAA,mBACI,CAAC,UAChB,OAAO,MAAM,iBAAiB,WAC1B,GAAG,MAAM,YAAY,OACrB,MAAM,gBAAgB,CAAC;AAAA,YACnB,CAAC,UACT,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM,UAAU,MAAM;AAAA,WACnB,CAAC,UACR,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM,SAAS,MAAM;AAAA,eACd,CAAC,UACZ,OAAO,MAAM,aAAa,WACtB,GAAG,MAAM,QAAQ,OACjB,MAAM,YAAY,MAAM;AAAA,gBAChB,CAAC,UACb,OAAO,MAAM,cAAc,WACvB,GAAG,MAAM,SAAS,OAClB,MAAM,aAAa,MAAM;AAAA;AAAA,aAEpB,CAAC,UACV,OAAO,MAAM,YAAY,WACrB,GAAG,MAAM,OAAO,OAChB,MAAM,WAAW,CAAC;AAAA,IACtB,CAAC,UACD,MAAM,qBACN;AAAA,oBACgB,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,qBACrG,OAAO,MAAM,sBAAsB,WAAW,GAAG,MAAM,iBAAiB,OAAO,MAAM,iBAAiB;AAAA,GACxH;AAAA,IACC,CAAC,UACD,MAAM,mBACN;AAAA,mBACe,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,sBAC7F,OAAO,MAAM,oBAAoB,WAAW,GAAG,MAAM,eAAe,OAAO,MAAM,eAAe;AAAA,GACnH;AAAA,IACC,CAAC,UACD,MAAM,eAAe,UACrB,gBAAgB,OAAO,MAAM,eAAe,WAAW,GAAG,MAAM,UAAU,OAAO,MAAM,UAAU,GAAG;AAAA,IACpG,CAAC,UACD,MAAM,kBAAkB,UACxB,mBAAmB,OAAO,MAAM,kBAAkB,WAAW,GAAG,MAAM,aAAa,OAAO,MAAM,aAAa,GAAG;AAAA,IAChH,CAAC,UACD,MAAM,gBAAgB,UACtB,iBAAiB,OAAO,MAAM,gBAAgB,WAAW,GAAG,MAAM,WAAW,OAAO,MAAM,WAAW,GAAG;AAAA,IACxG,CAAC,UACD,MAAM,iBAAiB,UACvB,kBAAkB,OAAO,MAAM,iBAAiB,WAAW,GAAG,MAAM,YAAY,OAAO,MAAM,YAAY,GAAG;AAAA;AAAA,YAEpG,CAAC,UACT,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,MAAM,OAAO,MAAM,UAAU,CAAC;AAAA,IAC1E,CAAC,UACD,MAAM,cAAc,UACpB,eAAe,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,SAAS,OAAO,MAAM,SAAS,GAAG;AAAA,IAChG,CAAC,UACD,MAAM,iBAAiB,UACvB,kBAAkB,OAAO,MAAM,iBAAiB,WAAW,GAAG,MAAM,YAAY,OAAO,MAAM,YAAY,GAAG;AAAA,IAC5G,CAAC,UACD,MAAM,eAAe,UACrB,gBAAgB,OAAO,MAAM,eAAe,WAAW,GAAG,MAAM,UAAU,OAAO,MAAM,UAAU,GAAG;AAAA,IACpG,CAAC,UACD,MAAM,gBAAgB,UACtB,iBAAiB,OAAO,MAAM,gBAAgB,WAAW,GAAG,MAAM,WAAW,OAAO,MAAM,WAAW,GAAG;AAAA;AAAA,oBAExF,CAAC,UAAU,MAAM,iBAAiB,QAAQ;AAAA,eAC/C,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,iBACnC,CAAC,UAAU,MAAM,cAAc,SAAS;AAAA,qBACpC,CAAC,UAAU,MAAM,kBAAkB,YAAY;AAAA,YACxD,CAAC,UACT,MAAM,SACF,MAAM,SACN,MAAM,WAAW,MAAM,UACrB,YACA,SAAS;AAAA,cACL,CAAC,UAAU,MAAM,YAAY,QAAQ;AAAA,SAC1C,CAAC,UACN,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM,GAAG;AAAA,YACpD,CAAC,UACT,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,MAAM,OAAO,MAAM,MAAM;AAAA,UAC/D,CAAC,UACP,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,IAAI;AAAA,WACxD,CAAC,UACR,OAAO,MAAM,UAAU,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK;AAAA,UAC5D,CAAC,UAAU,MAAM,IAAI;AAAA,iBACd,CAAC,UAAU,MAAM,cAAc,CAAC;AAAA,SACxC,CAAC,UACN,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM,OAAO,CAAC;AAAA,gBACrD,CAAC,UAAU,MAAM,aAAa,MAAM;AAAA,cACtC,CAAC,UAAU,MAAM,YAAY,SAAS;AAAA,gBACpC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,gBACvC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,aAC1C,CAAC,UAAU,MAAM,MAAM;AAAA,aACvB,CAAC,UAAW,MAAM,WAAW,MAAM,CAAE;AAAA,oBAC9B,CAAC,UAAW,MAAM,WAAW,SAAS,MAAO;AAAA;AAAA;AAAA,MAG3D,CAAC,UACD,MAAM,YAAY,mBAClB,qBAAqB,MAAM,WAAW,eAAe,GAAG;AAAA,MACxD,CAAC,UACD,MAAM,YAAY,eAClB,iBAAiB,MAAM,WAAW,WAAW,GAAG;AAAA;AAAA;AAAA;AAAA,MAIhD,CAAC,UACD,MAAM,YAAY,mBAClB,qBAAqB,MAAM,WAAW,eAAe,GAAG;AAAA;AAAA;AAIvD,IAAM,MAAM,aAAAC,QAAM;AAAA,EAIvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,aAAa;AAAA,IACb,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAEH,QAAI,OAAO,SAAS,KAAK;AACvB,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,OAAO;AAAA,YACL,SAAS;AAAA,YACT,WAAW;AAAA,YACX,OACE,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM;AAAA,YACZ,QACE,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM;AAAA,YACZ,cACE,OAAO,MAAM,iBAAiB,WAC1B,GAAG,MAAM,YAAY,OACrB,MAAM;AAAA,YACZ,UAAU,MAAM;AAAA,YAChB,KAAK,OAAO,MAAM,QAAQ,WAAW,GAAG,MAAM,GAAG,OAAO,MAAM;AAAA,YAC9D,MACE,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM;AAAA,YAC7D,OACE,OAAO,MAAM,UAAU,WACnB,GAAG,MAAM,KAAK,OACd,MAAM;AAAA,YACZ,QACE,OAAO,MAAM,WAAW,WACpB,GAAG,MAAM,MAAM,OACf,MAAM;AAAA,UACd;AAAA;AAAA,MACF;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,OAAO,WAAW,QAAQ,WAAW;AAAA,QAC3C,UAAU,OAAO,WAAW,WAAW;AAAA,QACvC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,UAAU,aAAa,SAAY,WAAW;AAAA,QAC7C,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAI,cAAc;;;ACzQlB,IAAAC,4BAAmB;AA+Bf,IAAAC,sBAAA;AA5BJ,IAAM,aAAa,0BAAAC,QAAO;AAAA,WACf,CAAC,UAAU,MAAM,SAAS,SAAS;AAAA,eAC/B,CAAC,UACZ,OAAO,MAAM,aAAa,WACtB,GAAG,MAAM,QAAQ,OACjB,MAAM,YAAY,SAAS;AAAA,iBAClB,CAAC,UAAU,MAAM,cAAc,QAAQ;AAAA,iBACvC,CAAC,UACd,MAAM,cACN,sGAAsG;AAAA,iBACzF,CAAC,UACd,OAAO,MAAM,eAAe,WACxB,GAAG,MAAM,UAAU,OACnB,MAAM,cAAc,SAAS;AAAA,iBACpB,CAAC,UAAU,MAAM,cAAc,QAAQ;AAAA,gBACxC,CAAC,UAAU,MAAM,aAAa,SAAS;AAAA,qBAClC,CAAC,UAAU,MAAM,kBAAkB,MAAM;AAAA;AAGvD,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;;;ACvCA,IAAAC,4BAAmB;AAsBV,IAAAC,sBAAA;AAnBT,IAAM,aAAa,0BAAAC,QAAO;AAAA;AAAA;AAAA;AAAA,WAIf,CAAC,UACR,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,QAAQ,MAAM;AAAA,YACjE,CAAC,UACT,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM,QAAQ,MAAM;AAAA,WAClE,CAAC,UAAU,MAAM,SAAS,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU5C,IAAM,OAA4B,CAAC,EAAE,UAAU,GAAG,MAAM,MAAM;AACnE,SAAO,6CAAC,cAAY,GAAG,OAAQ,UAAS;AAC1C;;;AHrBA,IAAAC,mBAAuC;;;AIAvC,sBAAuC;AACvC,uBAAsB;AAqChB,IAAAC,sBAAA;AAzBC,IAAM,aAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,iCAAgB;AAElC,QAAM,QAAQ,UACV,MAAM,OAAO,QAAQ,UACrB,MAAM,OAAO,QAAQ;AAEzB,QAAM,aAAa,MAAM;AACvB,QAAI,CAAC,KAAM,QAAO;AAElB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,YAAW;AAAA,QACX,gBAAe;AAAA,QACf,eAAa;AAAA,QAEb;AAAA,uDAAC,QAAK,MAAM,IAAI,OACb,gBACH;AAAA,UACC,UAAU,UAAa,UAAU,QAChC,6CAAC,OAAI,UAAS,YAAW,KAAK,IAAI,OAAO,KAAK,QAAQ,GACpD;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,cACE,OAAO,UAAU,WACb,GAAG,KAAK,mBACR,OAAO,KAAK;AAAA,cAGjB;AAAA;AAAA,UACH,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AAEA,QAAM,cAAc,MAAM;AACxB,QAAI,OAAO,UAAU,UAAU;AAC7B,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,YAAY,UAAU,QAAQ;AAAA,UAC9B,eAAe;AAAA,UACf,eAAa;AAAA,UAEZ;AAAA;AAAA,MACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT;AAKA,QAAM,gBAAgB,CAAC,MAA2B;AAChD,QAAI,WAAW;AACb,gBAAU,GAAG,KAAK;AAAA,IACpB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,MAAK;AAAA,MACL;AAAA,MACA,iBAAe;AAAA,MACf,cAAY;AAAA,MACZ,UAAU,UAAU,IAAI;AAAA,MACxB,KAAK;AAAA,MACL,MAAM;AAAA,MACN,WAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAS;AAAA,MACT,QAAQ;AAAA,MACR,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,QAAO;AAAA,MACP,eAAe,kBAAkB,gBAAgB,QAAQ;AAAA,MACzD,KAAK,kBAAkB,gBAAgB,IAAI;AAAA,MAC3C,iBACE,CAAC,yBAAS,UACN,MAAM,OAAO,QAAQ,UAAU,WAC/B;AAAA,MAEN,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,YAAY;AAAA,QACV,iBAAiB,UACb,SACA,MAAM,OAAO,QAAQ,UAAU;AAAA,MACrC;AAAA,MACA,YAAY;AAAA,QACV,cAAc,MAAM,OAAO,OAAO;AAAA,QAClC,cAAc;AAAA,QACd,eAAe;AAAA,QACf,cAAc;AAAA,MAChB;AAAA,MAEC;AAAA,mBAAW;AAAA,QACX,YAAY;AAAA;AAAA;AAAA,EACf;AAEJ;AAEA,WAAW,cAAc;;;AJOrB,IAAAC,sBAAA;AA9HG,IAAM,SAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB;AAAA,EACA,kBAAkB;AACpB,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,kCAAgB;AAClC,QAAM,cAAU,sBAAuB,CAAC,CAAC;AACzC,QAAM,mBAAe,sBAAY,IAAI;AACrC,QAAM,WAAW,MAAM,OAAO;AAG9B,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,wBAIzC,EAAE,MAAM,GAAG,OAAO,GAAG,aAAa,MAAM,CAAC;AAG5C,+BAAU,MAAM;AACd,QAAI,CAAC,uBAAO;AAEZ,UAAM,cAAc,MAAM;AAC1B,UAAM,cAAc,QAAQ,QAAQ,WAAW;AAC/C,UAAM,cAAc,aAAa;AAEjC,QAAI,eAAe,aAAa;AAC9B,YAAM,gBAAgB,YAAY,sBAAsB;AACxD,YAAM,UAAU,YAAY,sBAAsB;AAElD,wBAAkB;AAAA,QAChB,MAAM,QAAQ,OAAO,cAAc;AAAA,QACnC,OAAO,QAAQ;AAAA,QACf,aAAa;AAAA,MACf,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,MAAM,KAAK,CAAC;AAKhB,QAAM,eAAW,2BAAY,CAAC,UAAkB;AAC9C,UAAM,aAAa,QAAQ,QAAQ,KAAK;AACxC,QAAI,YAAY;AACd,iBAAW,MAAM;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAKL,QAAM,oBAAgB;AAAA,IACpB,CAAC,UAAkB;AACjB,YAAM,QAAQ,MAAM,OAAO,KAAK;AAChC,UAAI,OAAO;AACT,cAAM,QAAQ,WAAW,KAAK;AAAA,UAC5B,MAAM;AAAA,UACN,QAAQ,MAAM;AAAA,UACd,mBAAmB;AAAA,QACrB,CAAC;AAED,YAAI,CAAC,MAAM,kBAAkB;AAC3B,qBAAW,SAAS,MAAM,MAAM,MAAM,MAAM;AAAA,QAC9C;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,MAAM,QAAQ,UAAU;AAAA,EAC3B;AAKA,QAAM,oBAAgB;AAAA,IACpB,CAAC,GAAwB,iBAAyB;AAChD,UAAI,YAA2B;AAE/B,cAAQ,EAAE,KAAK;AAAA,QACb,KAAK;AAAA,QACL,KAAK;AACH,YAAE,eAAe;AACjB,sBAAY,eAAe,WAAW,IAAI,eAAe,IAAI;AAC7D;AAAA,QAEF,KAAK;AAAA,QACL,KAAK;AACH,YAAE,eAAe;AACjB,sBAAY,eAAe,IAAI,eAAe,IAAI,WAAW;AAC7D;AAAA,QAEF,KAAK;AACH,YAAE,eAAe;AACjB,sBAAY;AACZ;AAAA,QAEF,KAAK;AACH,YAAE,eAAe;AACjB,sBAAY,WAAW;AACvB;AAAA,QAEF,KAAK;AAAA,QACL,KAAK;AACH,YAAE,eAAe;AACjB,wBAAc,YAAY;AAC1B;AAAA,QAEF;AACE;AAAA,MACJ;AAEA,UAAI,cAAc,MAAM;AACtB,iBAAS,SAAS;AAClB,YAAI,iBAAiB;AACnB,wBAAc,SAAS;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU,UAAU,eAAe,eAAe;AAAA,EACrD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,MAAK;AAAA,MACL,cAAY,aAAa;AAAA,MACzB,mBAAiB;AAAA,MACjB,oBAAiB;AAAA,MACjB,KAAK,CAAC,OAAY;AAChB,qBAAa,UAAU;AAAA,MACzB;AAAA,MACA,eAAc;AAAA,MACd,YAAW;AAAA,MACX,UAAS;AAAA,MACT,iBAAiB,mBAAmB,MAAM,OAAO,QAAQ,UAAU;AAAA,MACnE,aAAa;AAAA,MACb,aAAa,MAAM,OAAO,QAAQ,UAAU;AAAA,MAC5C,aAAY;AAAA,MACZ,cAAc;AAAA,MACd,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAM;AAAA,MACN,UAAS;AAAA,MACT,QAAQ,UAAU;AAAA,MAClB;AAAA,MAEC;AAAA,kCAAS,eAAe,eACvB;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,iBAAiB,MAAM,OAAO,QAAQ,UAAU;AAAA,YAChD,cAAc;AAAA,YACd,OAAO;AAAA,cACL,MAAM,eAAe;AAAA,cACrB,OAAO,eAAe;AAAA,cACtB,YAAY;AAAA,cACZ,eAAe;AAAA,YACjB;AAAA,YACA,eAAW;AAAA;AAAA,QACb;AAAA,QAED,MAAM,OAAO,IAAI,CAAC,OAAO,UAAU;AAClC,gBAAM,EAAE,QAAQ,IAAI,YAAY,MAAM,GAAG;AACzC,gBAAM,QACJ,QAAQ,oBAAoB,QACxB,SACA,QAAQ,gBAAgB,SACtB,QAAQ,cACR,QAAQ,UAAU,SAChB,QAAQ,QACR,MAAM;AAEhB,gBAAM,YAAY,MAAM,UAAU;AAElC,gBAAM,UAAU,MAAM;AACpB,kBAAM,QAAQ,WAAW,KAAK;AAAA,cAC5B,MAAM;AAAA,cACN,QAAQ,MAAM;AAAA,cACd,mBAAmB;AAAA,YACrB,CAAC;AAED,gBAAI,CAAC,aAAa,CAAC,MAAM,kBAAkB;AACzC,yBAAW,SAAS,MAAM,MAAM,MAAM,MAAM;AAAA,YAC9C;AAAA,UACF;AAEA,gBAAM,cAAc,MAAM;AACxB,uBAAW,KAAK;AAAA,cACd,MAAM;AAAA,cACN,QAAQ,MAAM;AAAA,YAChB,CAAC;AAAA,UACH;AAEA,gBAAM,OAAO,QAAQ,aACjB,QAAQ,WAAW;AAAA,YACjB,SAAS;AAAA,YACT,OAAO,YACH,MAAM,OAAO,QAAQ,UACrB,MAAM,OAAO,QAAQ;AAAA,YACzB,MAAM;AAAA,UACR,CAAC,IACD;AAEJ,gBAAM,QAAQ,QAAQ;AAGtB,gBAAM,gBACJ,OAAO,UAAU,aACb,MAAM;AAAA,YACJ,SAAS;AAAA,YACT,OAAO,YACH,MAAM,OAAO,QAAQ,UACrB,MAAM,OAAO,QAAQ;AAAA,YACzB,UAAU;AAAA,UACZ,CAAC,IACD;AAGN,gBAAM,qBACJ,QAAQ,6BACP,OAAO,kBAAkB,WAAW,gBAAgB,MAAM;AAG7D,gBAAM,QAAQ,KAAK,GAAG,EAAE,QAAQ,MAAM,GAAG,KAAK;AAE9C,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,IAAI;AAAA,cACJ,OAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,QAAQ,QAAQ;AAAA,cAChB;AAAA,cACA;AAAA,cACA,WAAW;AAAA,cACX,QAAQ,CAAC,OAAO;AACd,wBAAQ,QAAQ,KAAK,IAAI;AAAA,cAC3B;AAAA;AAAA,YAhBK,MAAM;AAAA,UAiBb;AAAA,QAEJ,CAAC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,OAAO,cAAc;","names":["import_react","styled","React","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_xui_core","import_jsx_runtime","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/TabBar.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Icon.tsx","../../src/TabBarItem.tsx"],"sourcesContent":["export * from \"./TabBar\";\nexport * from \"./TabBarItem\";\nexport * from \"./types\";\n","import React, { useRef, useCallback, useState, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n isWeb,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\nimport { TabBarItem } from \"./TabBarItem\";\nimport type { TabBarProps } from \"./types\";\n\n/**\n * TabBar - An accessible tab bar navigation component\n *\n * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:\n * - Arrow Left/Right: Navigate between tabs\n * - Home: Jump to first tab\n * - End: Jump to last tab\n * - Enter/Space: Activate focused tab (when activateOnFocus is false)\n *\n * @example\n * ```tsx\n * <TabBar\n * state={navigationState}\n * descriptors={descriptors}\n * navigation={navigation}\n * aria-label=\"Main navigation\"\n * />\n * ```\n */\nexport const TabBar: React.FC<TabBarProps & ThemeOverrideProps> = ({\n state,\n descriptors,\n navigation,\n labelPosition = \"below-icon\",\n backgroundColor,\n testID,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n id,\n activateOnFocus = true,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const tabRefs = useRef<(any | null)[]>([]);\n const containerRef = useRef<any>(null);\n const tabCount = state.routes.length;\n\n // Indicator position for sliding selection animation\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 tab changes (web only)\n useEffect(() => {\n if (!isWeb) return;\n\n const activeIndex = state.index;\n const activeTabEl = tabRefs.current[activeIndex];\n const containerEl = containerRef.current;\n\n if (activeTabEl && containerEl) {\n const containerRect = containerEl.getBoundingClientRect();\n const tabRect = activeTabEl.getBoundingClientRect();\n\n setIndicatorStyle({\n left: tabRect.left - containerRect.left,\n width: tabRect.width,\n initialized: true,\n });\n }\n }, [state.index]);\n\n /**\n * Focus a tab by its index\n */\n const focusTab = useCallback((index: number) => {\n const tabElement = tabRefs.current[index];\n if (tabElement) {\n tabElement.focus();\n }\n }, []);\n\n /**\n * Navigate to a tab by index\n */\n const navigateToTab = useCallback(\n (index: number) => {\n const route = state.routes[index];\n if (route) {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n }\n },\n [state.routes, navigation]\n );\n\n /**\n * Handle keyboard navigation within the tab bar\n */\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent, currentIndex: number) => {\n let nextIndex: number | null = null;\n\n switch (e.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n e.preventDefault();\n nextIndex = currentIndex < tabCount - 1 ? currentIndex + 1 : 0;\n break;\n\n case \"ArrowLeft\":\n case \"ArrowUp\":\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : tabCount - 1;\n break;\n\n case \"Home\":\n e.preventDefault();\n nextIndex = 0;\n break;\n\n case \"End\":\n e.preventDefault();\n nextIndex = tabCount - 1;\n break;\n\n case \"Enter\":\n case \" \":\n e.preventDefault();\n navigateToTab(currentIndex);\n break;\n\n default:\n break;\n }\n\n if (nextIndex !== null) {\n focusTab(nextIndex);\n if (activateOnFocus) {\n navigateToTab(nextIndex);\n }\n }\n },\n [tabCount, focusTab, navigateToTab, activateOnFocus]\n );\n\n return (\n <Box\n as=\"nav\"\n role=\"tablist\"\n aria-label={ariaLabel || \"Tab navigation\"}\n aria-labelledby={ariaLabelledBy}\n aria-orientation=\"horizontal\"\n ref={(el: any) => {\n containerRef.current = el;\n }}\n flexDirection=\"row\"\n alignItems=\"center\"\n position=\"relative\"\n backgroundColor={backgroundColor || theme.colors.control.segmented.bg}\n borderWidth={1}\n borderColor={theme.colors.control.segmented.border}\n borderStyle=\"solid\"\n borderRadius={8}\n padding={4}\n height={56}\n width=\"100%\"\n overflow=\"hidden\"\n testID={testID || \"tab-bar-container\"}\n id={id}\n >\n {isWeb && indicatorStyle.initialized && (\n <Box\n position=\"absolute\"\n zIndex={0}\n height={48}\n backgroundColor={theme.colors.control.segmented.bgActive}\n borderRadius={4}\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 {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarShowLabel === false\n ? undefined\n : options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: \"tabLongPress\",\n target: route.key,\n });\n };\n\n const icon = options.tabBarIcon\n ? options.tabBarIcon({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n size: 24,\n })\n : undefined;\n\n const badge = options.tabBarBadge;\n\n // Generate accessible label fallback\n const resolvedLabel =\n typeof label === \"function\"\n ? label({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n position: labelPosition,\n })\n : label;\n\n // Use explicit accessibility label or fall back to text label\n const accessibilityLabel =\n options.tabBarAccessibilityLabel ||\n (typeof resolvedLabel === \"string\" ? resolvedLabel : route.name);\n\n // Generate unique tab ID\n const tabId = id ? `${id}-tab-${route.key}` : undefined;\n\n return (\n <TabBarItem\n key={route.key}\n id={tabId}\n label={resolvedLabel}\n icon={icon}\n badge={badge}\n focused={isFocused}\n onPress={onPress}\n onLongPress={onLongPress}\n labelPosition={labelPosition}\n accessibilityLabel={accessibilityLabel}\n testID={options.tabBarTestID}\n index={index}\n tabCount={tabCount}\n onKeyDown={handleKeyDown}\n tabRef={(el) => {\n tabRefs.current[index] = el;\n }}\n />\n );\n })}\n </Box>\n );\n};\n\nTabBar.displayName = \"TabBar\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n max-width: ${(props) =>\n typeof props.maxWidth === \"number\"\n ? `${props.maxWidth}px`\n : props.maxWidth || \"none\"};\n max-height: ${(props) =>\n typeof props.maxHeight === \"number\"\n ? `${props.maxHeight}px`\n : props.maxHeight || \"none\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\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 \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React, { type ReactNode } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n isWeb,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport type { TabBarItemProps } from \"./types\";\n\n/**\n * TabBarItem - An accessible tab item component\n *\n * Implements WAI-ARIA tab role with proper semantics:\n * - role=\"tab\" for tab semantics\n * - aria-selected to indicate active state\n * - tabIndex management for roving tabindex pattern\n * - Keyboard navigation support\n */\nexport const TabBarItem: React.FC<TabBarItemProps & ThemeOverrideProps> = ({\n label,\n icon,\n badge,\n focused,\n onPress,\n onLongPress,\n labelPosition,\n accessibilityLabel,\n testID,\n id,\n index,\n onKeyDown,\n tabRef,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n const color = focused\n ? theme.colors.content.primary\n : theme.colors.content.secondary;\n\n const renderIcon = () => {\n if (!icon) return null;\n\n return (\n <Box\n position=\"relative\"\n alignItems=\"center\"\n justifyContent=\"center\"\n aria-hidden={true}\n >\n <Icon size={24} color={color}>\n {icon}\n </Icon>\n {badge !== undefined && badge !== null && (\n <Box position=\"absolute\" top={-5} right={-10} zIndex={1}>\n <Badge\n size=\"sm\"\n aria-label={\n typeof badge === \"number\"\n ? `${badge} notifications`\n : String(badge)\n }\n >\n {badge}\n </Badge>\n </Box>\n )}\n </Box>\n );\n };\n\n const renderLabel = () => {\n if (typeof label === \"string\") {\n return (\n <Text\n color={color}\n fontSize={10}\n lineHeight={10}\n fontWeight={focused ? \"500\" : \"400\"}\n numberOfLines={1}\n aria-hidden={true}\n >\n {label}\n </Text>\n );\n }\n return label as ReactNode;\n };\n\n /**\n * Handle keyboard events for this tab\n */\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (onKeyDown) {\n onKeyDown(e, index);\n }\n };\n\n return (\n <Box\n as=\"button\"\n role=\"tab\"\n id={id}\n aria-selected={focused}\n aria-label={accessibilityLabel}\n tabIndex={focused ? 0 : -1}\n ref={tabRef}\n flex={1}\n flexBasis={0}\n minWidth={48}\n position=\"relative\"\n zIndex={1}\n alignItems=\"center\"\n justifyContent=\"center\"\n paddingTop={8}\n paddingBottom={12}\n paddingHorizontal={8}\n cursor=\"pointer\"\n flexDirection={labelPosition === \"beside-icon\" ? \"row\" : \"column\"}\n gap={labelPosition === \"beside-icon\" ? 8 : 4}\n backgroundColor={\n !isWeb && focused\n ? theme.colors.control.segmented.bgActive\n : \"transparent\"\n }\n borderRadius={4}\n onPress={onPress}\n onLongPress={onLongPress}\n onKeyDown={handleKeyDown}\n testID={testID}\n hoverStyle={{\n backgroundColor: focused\n ? undefined\n : theme.colors.control.segmented.bgHover,\n }}\n focusStyle={{\n outlineColor: theme.colors.border.brand,\n outlineWidth: 2,\n outlineOffset: -2,\n outlineStyle: \"solid\",\n }}\n >\n {renderIcon()}\n {renderLabel()}\n </Box>\n );\n};\n\nTabBarItem.displayName = \"TabBarItem\";\n"],"mappings":"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","names":["import_react","styled","React","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_xui_core","import_jsx_runtime","import_jsx_runtime"]}
package/web/index.mjs CHANGED
@@ -39,6 +39,8 @@ var StyledBox = styled.div`
39
39
  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
40
40
  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
41
41
  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
42
+ max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
43
+ max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
42
44
 
43
45
  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
44
46
  ${(props) => props.paddingHorizontal && `
@@ -226,10 +228,16 @@ var Icon = ({ children, ...props }) => {
226
228
  };
227
229
 
228
230
  // src/TabBar.tsx
229
- import { useDesignSystem as useDesignSystem2, isWeb as isWeb2 } from "@xsolla/xui-core";
231
+ import {
232
+ useResolvedTheme as useResolvedTheme2,
233
+ isWeb as isWeb2
234
+ } from "@xsolla/xui-core";
230
235
 
231
236
  // src/TabBarItem.tsx
232
- import { useDesignSystem, isWeb } from "@xsolla/xui-core";
237
+ import {
238
+ useResolvedTheme,
239
+ isWeb
240
+ } from "@xsolla/xui-core";
233
241
  import { Badge } from "@xsolla/xui-badge";
234
242
  import { jsx as jsx4, jsxs } from "react/jsx-runtime";
235
243
  var TabBarItem = ({
@@ -245,9 +253,11 @@ var TabBarItem = ({
245
253
  id,
246
254
  index,
247
255
  onKeyDown,
248
- tabRef
256
+ tabRef,
257
+ themeMode,
258
+ themeProductContext
249
259
  }) => {
250
- const { theme } = useDesignSystem();
260
+ const { theme } = useResolvedTheme({ themeMode, themeProductContext });
251
261
  const color = focused ? theme.colors.content.primary : theme.colors.content.secondary;
252
262
  const renderIcon = () => {
253
263
  if (!icon) return null;
@@ -353,9 +363,11 @@ var TabBar = ({
353
363
  "aria-label": ariaLabel,
354
364
  "aria-labelledby": ariaLabelledBy,
355
365
  id,
356
- activateOnFocus = true
366
+ activateOnFocus = true,
367
+ themeMode,
368
+ themeProductContext
357
369
  }) => {
358
- const { theme } = useDesignSystem2();
370
+ const { theme } = useResolvedTheme2({ themeMode, themeProductContext });
359
371
  const tabRefs = useRef([]);
360
372
  const containerRef = useRef(null);
361
373
  const tabCount = state.routes.length;
package/web/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/TabBar.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Icon.tsx","../../src/TabBarItem.tsx"],"sourcesContent":["import React, { useRef, useCallback, useState, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, isWeb } from \"@xsolla/xui-core\";\nimport { TabBarItem } from \"./TabBarItem\";\nimport type { TabBarProps } from \"./types\";\n\n/**\n * TabBar - An accessible tab bar navigation component\n *\n * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:\n * - Arrow Left/Right: Navigate between tabs\n * - Home: Jump to first tab\n * - End: Jump to last tab\n * - Enter/Space: Activate focused tab (when activateOnFocus is false)\n *\n * @example\n * ```tsx\n * <TabBar\n * state={navigationState}\n * descriptors={descriptors}\n * navigation={navigation}\n * aria-label=\"Main navigation\"\n * />\n * ```\n */\nexport const TabBar: React.FC<TabBarProps> = ({\n state,\n descriptors,\n navigation,\n labelPosition = \"below-icon\",\n backgroundColor,\n testID,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n id,\n activateOnFocus = true,\n}) => {\n const { theme } = useDesignSystem();\n const tabRefs = useRef<(any | null)[]>([]);\n const containerRef = useRef<any>(null);\n const tabCount = state.routes.length;\n\n // Indicator position for sliding selection animation\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 tab changes (web only)\n useEffect(() => {\n if (!isWeb) return;\n\n const activeIndex = state.index;\n const activeTabEl = tabRefs.current[activeIndex];\n const containerEl = containerRef.current;\n\n if (activeTabEl && containerEl) {\n const containerRect = containerEl.getBoundingClientRect();\n const tabRect = activeTabEl.getBoundingClientRect();\n\n setIndicatorStyle({\n left: tabRect.left - containerRect.left,\n width: tabRect.width,\n initialized: true,\n });\n }\n }, [state.index]);\n\n /**\n * Focus a tab by its index\n */\n const focusTab = useCallback((index: number) => {\n const tabElement = tabRefs.current[index];\n if (tabElement) {\n tabElement.focus();\n }\n }, []);\n\n /**\n * Navigate to a tab by index\n */\n const navigateToTab = useCallback(\n (index: number) => {\n const route = state.routes[index];\n if (route) {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n }\n },\n [state.routes, navigation]\n );\n\n /**\n * Handle keyboard navigation within the tab bar\n */\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent, currentIndex: number) => {\n let nextIndex: number | null = null;\n\n switch (e.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n e.preventDefault();\n nextIndex = currentIndex < tabCount - 1 ? currentIndex + 1 : 0;\n break;\n\n case \"ArrowLeft\":\n case \"ArrowUp\":\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : tabCount - 1;\n break;\n\n case \"Home\":\n e.preventDefault();\n nextIndex = 0;\n break;\n\n case \"End\":\n e.preventDefault();\n nextIndex = tabCount - 1;\n break;\n\n case \"Enter\":\n case \" \":\n e.preventDefault();\n navigateToTab(currentIndex);\n break;\n\n default:\n break;\n }\n\n if (nextIndex !== null) {\n focusTab(nextIndex);\n if (activateOnFocus) {\n navigateToTab(nextIndex);\n }\n }\n },\n [tabCount, focusTab, navigateToTab, activateOnFocus]\n );\n\n return (\n <Box\n as=\"nav\"\n role=\"tablist\"\n aria-label={ariaLabel || \"Tab navigation\"}\n aria-labelledby={ariaLabelledBy}\n aria-orientation=\"horizontal\"\n ref={(el: any) => {\n containerRef.current = el;\n }}\n flexDirection=\"row\"\n alignItems=\"center\"\n position=\"relative\"\n backgroundColor={backgroundColor || theme.colors.control.segmented.bg}\n borderWidth={1}\n borderColor={theme.colors.control.segmented.border}\n borderStyle=\"solid\"\n borderRadius={8}\n padding={4}\n height={56}\n width=\"100%\"\n overflow=\"hidden\"\n testID={testID || \"tab-bar-container\"}\n id={id}\n >\n {isWeb && indicatorStyle.initialized && (\n <Box\n position=\"absolute\"\n zIndex={0}\n height={48}\n backgroundColor={theme.colors.control.segmented.bgActive}\n borderRadius={4}\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 {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarShowLabel === false\n ? undefined\n : options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: \"tabLongPress\",\n target: route.key,\n });\n };\n\n const icon = options.tabBarIcon\n ? options.tabBarIcon({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n size: 24,\n })\n : undefined;\n\n const badge = options.tabBarBadge;\n\n // Generate accessible label fallback\n const resolvedLabel =\n typeof label === \"function\"\n ? label({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n position: labelPosition,\n })\n : label;\n\n // Use explicit accessibility label or fall back to text label\n const accessibilityLabel =\n options.tabBarAccessibilityLabel ||\n (typeof resolvedLabel === \"string\" ? resolvedLabel : route.name);\n\n // Generate unique tab ID\n const tabId = id ? `${id}-tab-${route.key}` : undefined;\n\n return (\n <TabBarItem\n key={route.key}\n id={tabId}\n label={resolvedLabel}\n icon={icon}\n badge={badge}\n focused={isFocused}\n onPress={onPress}\n onLongPress={onLongPress}\n labelPosition={labelPosition}\n accessibilityLabel={accessibilityLabel}\n testID={options.tabBarTestID}\n index={index}\n tabCount={tabCount}\n onKeyDown={handleKeyDown}\n tabRef={(el) => {\n tabRefs.current[index] = el;\n }}\n />\n );\n })}\n </Box>\n );\n};\n\nTabBar.displayName = \"TabBar\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\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 \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React, { type ReactNode } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, isWeb } from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport type { TabBarItemProps } from \"./types\";\n\n/**\n * TabBarItem - An accessible tab item component\n *\n * Implements WAI-ARIA tab role with proper semantics:\n * - role=\"tab\" for tab semantics\n * - aria-selected to indicate active state\n * - tabIndex management for roving tabindex pattern\n * - Keyboard navigation support\n */\nexport const TabBarItem: React.FC<TabBarItemProps> = ({\n label,\n icon,\n badge,\n focused,\n onPress,\n onLongPress,\n labelPosition,\n accessibilityLabel,\n testID,\n id,\n index,\n onKeyDown,\n tabRef,\n}) => {\n const { theme } = useDesignSystem();\n\n const color = focused\n ? theme.colors.content.primary\n : theme.colors.content.secondary;\n\n const renderIcon = () => {\n if (!icon) return null;\n\n return (\n <Box\n position=\"relative\"\n alignItems=\"center\"\n justifyContent=\"center\"\n aria-hidden={true}\n >\n <Icon size={24} color={color}>\n {icon}\n </Icon>\n {badge !== undefined && badge !== null && (\n <Box position=\"absolute\" top={-5} right={-10} zIndex={1}>\n <Badge\n size=\"sm\"\n aria-label={\n typeof badge === \"number\"\n ? `${badge} notifications`\n : String(badge)\n }\n >\n {badge}\n </Badge>\n </Box>\n )}\n </Box>\n );\n };\n\n const renderLabel = () => {\n if (typeof label === \"string\") {\n return (\n <Text\n color={color}\n fontSize={10}\n lineHeight={10}\n fontWeight={focused ? \"500\" : \"400\"}\n numberOfLines={1}\n aria-hidden={true}\n >\n {label}\n </Text>\n );\n }\n return label as ReactNode;\n };\n\n /**\n * Handle keyboard events for this tab\n */\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (onKeyDown) {\n onKeyDown(e, index);\n }\n };\n\n return (\n <Box\n as=\"button\"\n role=\"tab\"\n id={id}\n aria-selected={focused}\n aria-label={accessibilityLabel}\n tabIndex={focused ? 0 : -1}\n ref={tabRef}\n flex={1}\n flexBasis={0}\n minWidth={48}\n position=\"relative\"\n zIndex={1}\n alignItems=\"center\"\n justifyContent=\"center\"\n paddingTop={8}\n paddingBottom={12}\n paddingHorizontal={8}\n cursor=\"pointer\"\n flexDirection={labelPosition === \"beside-icon\" ? \"row\" : \"column\"}\n gap={labelPosition === \"beside-icon\" ? 8 : 4}\n backgroundColor={\n !isWeb && focused\n ? theme.colors.control.segmented.bgActive\n : \"transparent\"\n }\n borderRadius={4}\n onPress={onPress}\n onLongPress={onLongPress}\n onKeyDown={handleKeyDown}\n testID={testID}\n hoverStyle={{\n backgroundColor: focused\n ? undefined\n : theme.colors.control.segmented.bgHover,\n }}\n focusStyle={{\n outlineColor: theme.colors.border.brand,\n outlineWidth: 2,\n outlineOffset: -2,\n outlineStyle: \"solid\",\n }}\n >\n {renderIcon()}\n {renderLabel()}\n </Box>\n );\n};\n\nTabBarItem.displayName = \"TabBarItem\";\n"],"mappings":"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","names":["styled","jsx","styled","jsx","useDesignSystem","isWeb","jsx","jsx","jsxs","useDesignSystem","isWeb"]}
1
+ {"version":3,"sources":["../../src/TabBar.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Icon.tsx","../../src/TabBarItem.tsx"],"sourcesContent":["import React, { useRef, useCallback, useState, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n isWeb,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\nimport { TabBarItem } from \"./TabBarItem\";\nimport type { TabBarProps } from \"./types\";\n\n/**\n * TabBar - An accessible tab bar navigation component\n *\n * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:\n * - Arrow Left/Right: Navigate between tabs\n * - Home: Jump to first tab\n * - End: Jump to last tab\n * - Enter/Space: Activate focused tab (when activateOnFocus is false)\n *\n * @example\n * ```tsx\n * <TabBar\n * state={navigationState}\n * descriptors={descriptors}\n * navigation={navigation}\n * aria-label=\"Main navigation\"\n * />\n * ```\n */\nexport const TabBar: React.FC<TabBarProps & ThemeOverrideProps> = ({\n state,\n descriptors,\n navigation,\n labelPosition = \"below-icon\",\n backgroundColor,\n testID,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n id,\n activateOnFocus = true,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const tabRefs = useRef<(any | null)[]>([]);\n const containerRef = useRef<any>(null);\n const tabCount = state.routes.length;\n\n // Indicator position for sliding selection animation\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 tab changes (web only)\n useEffect(() => {\n if (!isWeb) return;\n\n const activeIndex = state.index;\n const activeTabEl = tabRefs.current[activeIndex];\n const containerEl = containerRef.current;\n\n if (activeTabEl && containerEl) {\n const containerRect = containerEl.getBoundingClientRect();\n const tabRect = activeTabEl.getBoundingClientRect();\n\n setIndicatorStyle({\n left: tabRect.left - containerRect.left,\n width: tabRect.width,\n initialized: true,\n });\n }\n }, [state.index]);\n\n /**\n * Focus a tab by its index\n */\n const focusTab = useCallback((index: number) => {\n const tabElement = tabRefs.current[index];\n if (tabElement) {\n tabElement.focus();\n }\n }, []);\n\n /**\n * Navigate to a tab by index\n */\n const navigateToTab = useCallback(\n (index: number) => {\n const route = state.routes[index];\n if (route) {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n }\n },\n [state.routes, navigation]\n );\n\n /**\n * Handle keyboard navigation within the tab bar\n */\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent, currentIndex: number) => {\n let nextIndex: number | null = null;\n\n switch (e.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n e.preventDefault();\n nextIndex = currentIndex < tabCount - 1 ? currentIndex + 1 : 0;\n break;\n\n case \"ArrowLeft\":\n case \"ArrowUp\":\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : tabCount - 1;\n break;\n\n case \"Home\":\n e.preventDefault();\n nextIndex = 0;\n break;\n\n case \"End\":\n e.preventDefault();\n nextIndex = tabCount - 1;\n break;\n\n case \"Enter\":\n case \" \":\n e.preventDefault();\n navigateToTab(currentIndex);\n break;\n\n default:\n break;\n }\n\n if (nextIndex !== null) {\n focusTab(nextIndex);\n if (activateOnFocus) {\n navigateToTab(nextIndex);\n }\n }\n },\n [tabCount, focusTab, navigateToTab, activateOnFocus]\n );\n\n return (\n <Box\n as=\"nav\"\n role=\"tablist\"\n aria-label={ariaLabel || \"Tab navigation\"}\n aria-labelledby={ariaLabelledBy}\n aria-orientation=\"horizontal\"\n ref={(el: any) => {\n containerRef.current = el;\n }}\n flexDirection=\"row\"\n alignItems=\"center\"\n position=\"relative\"\n backgroundColor={backgroundColor || theme.colors.control.segmented.bg}\n borderWidth={1}\n borderColor={theme.colors.control.segmented.border}\n borderStyle=\"solid\"\n borderRadius={8}\n padding={4}\n height={56}\n width=\"100%\"\n overflow=\"hidden\"\n testID={testID || \"tab-bar-container\"}\n id={id}\n >\n {isWeb && indicatorStyle.initialized && (\n <Box\n position=\"absolute\"\n zIndex={0}\n height={48}\n backgroundColor={theme.colors.control.segmented.bgActive}\n borderRadius={4}\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 {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarShowLabel === false\n ? undefined\n : options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: \"tabLongPress\",\n target: route.key,\n });\n };\n\n const icon = options.tabBarIcon\n ? options.tabBarIcon({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n size: 24,\n })\n : undefined;\n\n const badge = options.tabBarBadge;\n\n // Generate accessible label fallback\n const resolvedLabel =\n typeof label === \"function\"\n ? label({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n position: labelPosition,\n })\n : label;\n\n // Use explicit accessibility label or fall back to text label\n const accessibilityLabel =\n options.tabBarAccessibilityLabel ||\n (typeof resolvedLabel === \"string\" ? resolvedLabel : route.name);\n\n // Generate unique tab ID\n const tabId = id ? `${id}-tab-${route.key}` : undefined;\n\n return (\n <TabBarItem\n key={route.key}\n id={tabId}\n label={resolvedLabel}\n icon={icon}\n badge={badge}\n focused={isFocused}\n onPress={onPress}\n onLongPress={onLongPress}\n labelPosition={labelPosition}\n accessibilityLabel={accessibilityLabel}\n testID={options.tabBarTestID}\n index={index}\n tabCount={tabCount}\n onKeyDown={handleKeyDown}\n tabRef={(el) => {\n tabRefs.current[index] = el;\n }}\n />\n );\n })}\n </Box>\n );\n};\n\nTabBar.displayName = \"TabBar\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n max-width: ${(props) =>\n typeof props.maxWidth === \"number\"\n ? `${props.maxWidth}px`\n : props.maxWidth || \"none\"};\n max-height: ${(props) =>\n typeof props.maxHeight === \"number\"\n ? `${props.maxHeight}px`\n : props.maxHeight || \"none\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\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 \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n numberOfLines: _numberOfLines,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React, { type ReactNode } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport {\n useResolvedTheme,\n isWeb,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport type { TabBarItemProps } from \"./types\";\n\n/**\n * TabBarItem - An accessible tab item component\n *\n * Implements WAI-ARIA tab role with proper semantics:\n * - role=\"tab\" for tab semantics\n * - aria-selected to indicate active state\n * - tabIndex management for roving tabindex pattern\n * - Keyboard navigation support\n */\nexport const TabBarItem: React.FC<TabBarItemProps & ThemeOverrideProps> = ({\n label,\n icon,\n badge,\n focused,\n onPress,\n onLongPress,\n labelPosition,\n accessibilityLabel,\n testID,\n id,\n index,\n onKeyDown,\n tabRef,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n const color = focused\n ? theme.colors.content.primary\n : theme.colors.content.secondary;\n\n const renderIcon = () => {\n if (!icon) return null;\n\n return (\n <Box\n position=\"relative\"\n alignItems=\"center\"\n justifyContent=\"center\"\n aria-hidden={true}\n >\n <Icon size={24} color={color}>\n {icon}\n </Icon>\n {badge !== undefined && badge !== null && (\n <Box position=\"absolute\" top={-5} right={-10} zIndex={1}>\n <Badge\n size=\"sm\"\n aria-label={\n typeof badge === \"number\"\n ? `${badge} notifications`\n : String(badge)\n }\n >\n {badge}\n </Badge>\n </Box>\n )}\n </Box>\n );\n };\n\n const renderLabel = () => {\n if (typeof label === \"string\") {\n return (\n <Text\n color={color}\n fontSize={10}\n lineHeight={10}\n fontWeight={focused ? \"500\" : \"400\"}\n numberOfLines={1}\n aria-hidden={true}\n >\n {label}\n </Text>\n );\n }\n return label as ReactNode;\n };\n\n /**\n * Handle keyboard events for this tab\n */\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (onKeyDown) {\n onKeyDown(e, index);\n }\n };\n\n return (\n <Box\n as=\"button\"\n role=\"tab\"\n id={id}\n aria-selected={focused}\n aria-label={accessibilityLabel}\n tabIndex={focused ? 0 : -1}\n ref={tabRef}\n flex={1}\n flexBasis={0}\n minWidth={48}\n position=\"relative\"\n zIndex={1}\n alignItems=\"center\"\n justifyContent=\"center\"\n paddingTop={8}\n paddingBottom={12}\n paddingHorizontal={8}\n cursor=\"pointer\"\n flexDirection={labelPosition === \"beside-icon\" ? \"row\" : \"column\"}\n gap={labelPosition === \"beside-icon\" ? 8 : 4}\n backgroundColor={\n !isWeb && focused\n ? theme.colors.control.segmented.bgActive\n : \"transparent\"\n }\n borderRadius={4}\n onPress={onPress}\n onLongPress={onLongPress}\n onKeyDown={handleKeyDown}\n testID={testID}\n hoverStyle={{\n backgroundColor: focused\n ? undefined\n : theme.colors.control.segmented.bgHover,\n }}\n focusStyle={{\n outlineColor: theme.colors.border.brand,\n outlineWidth: 2,\n outlineOffset: -2,\n outlineStyle: \"solid\",\n }}\n >\n {renderIcon()}\n {renderLabel()}\n </Box>\n );\n};\n\nTabBarItem.displayName = \"TabBarItem\";\n"],"mappings":"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","names":["styled","jsx","styled","jsx","useResolvedTheme","isWeb","jsx","jsx","jsxs","useResolvedTheme","isWeb"]}