npm - @xsolla/xui-tab-bar - Versions diffs - 0.102.0 → 0.104.0 - Mend

@xsolla/xui-tab-bar 0.102.0 → 0.104.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 (9) hide show

package/native/index.js CHANGED Viewed

@@ -225,7 +225,7 @@ var Text = ({
   ...props
 }) => {
   let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
-  if (resolvedFontFamily === "Pilat Wide Bold") {
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
     resolvedFontFamily = void 0;
   }
   const style = {
@@ -287,7 +287,7 @@ var TabBarItem = ({
   tabRef
 }) => {
   const { theme } = (0, import_xui_core.useDesignSystem)();
-  const color = focused ? theme.colors.content.brand.primary : theme.colors.content.primary;
+  const color = focused ? theme.colors.content.inverse : theme.colors.content.primary;
   const renderIcon = () => {
     if (!icon) return null;
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -321,8 +321,9 @@ var TabBarItem = ({
         Text,
         {
           color,
-          fontSize: 12,
-          fontWeight: focused ? "600" : "400",
+          fontSize: 10,
+          lineHeight: 10,
+          fontWeight: "400",
           numberOfLines: 1,
           "aria-hidden": true,
           children: label
@@ -352,12 +353,15 @@ var TabBarItem = ({
       paddingVertical: 8,
       cursor: "pointer",
       flexDirection: labelPosition === "beside-icon" ? "row" : "column",
-      gap: labelPosition === "beside-icon" ? 8 : 4,
+      gap: labelPosition === "beside-icon" ? 8 : 8,
+      position: "relative",
+      zIndex: 1,
+      borderRadius: 4,
       onPress,
       onLongPress,
       onKeyDown: handleKeyDown,
       testID,
-      hoverStyle: {
+      hoverStyle: focused ? void 0 : {
         backgroundColor: theme.colors.overlay.mono
       },
       focusStyle: {
@@ -391,7 +395,24 @@ var TabBar = ({
 }) => {
   const { theme } = (0, import_xui_core2.useDesignSystem)();
   const tabRefs = (0, import_react3.useRef)([]);
+  const containerRef = (0, import_react3.useRef)(null);
   const tabCount = state.routes.length;
+  const [indicatorStyle, setIndicatorStyle] = (0, import_react3.useState)({ left: 0, width: 0, initialized: false });
+  (0, import_react3.useEffect)(() => {
+    if (!import_xui_core2.isWeb) return;
+    const activeIndex = state.index;
+    const activeTabEl = tabRefs.current[activeIndex];
+    const containerEl = containerRef.current;
+    if (activeTabEl && containerEl) {
+      const containerRect = containerEl.getBoundingClientRect();
+      const tabRect = activeTabEl.getBoundingClientRect();
+      setIndicatorStyle({
+        left: tabRect.left - containerRect.left,
+        width: tabRect.width,
+        initialized: true
+      });
+    }
+  }, [state.index]);
   const focusTab = (0, import_react3.useCallback)((index) => {
     const tabElement = tabRefs.current[index];
     if (tabElement) {
@@ -453,7 +474,7 @@ var TabBar = ({
     },
     [tabCount, focusTab, navigateToTab, activateOnFocus]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     Box,
     {
       as: "nav",
@@ -461,71 +482,94 @@ var TabBar = ({
       "aria-label": ariaLabel || "Tab navigation",
       "aria-labelledby": ariaLabelledBy,
       "aria-orientation": "horizontal",
+      ref: (el) => {
+        containerRef.current = el;
+      },
       flexDirection: "row",
       backgroundColor: backgroundColor || theme.colors.background.primary,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.border.secondary,
-      borderStyle: "solid",
-      height: 60,
+      borderRadius: 4,
+      height: 56,
       width: "100%",
+      position: "relative",
+      overflow: "hidden",
       testID: testID || "tab-bar-container",
       id,
-      children: state.routes.map((route, index) => {
-        const { options } = descriptors[route.key];
-        const label = options.tabBarShowLabel === false ? void 0 : options.tabBarLabel !== void 0 ? options.tabBarLabel : options.title !== void 0 ? options.title : route.name;
-        const isFocused = state.index === index;
-        const onPress = () => {
-          const event = navigation.emit({
-            type: "tabPress",
-            target: route.key,
-            canPreventDefault: true
-          });
-          if (!isFocused && !event.defaultPrevented) {
-            navigation.navigate(route.name, route.params);
-          }
-        };
-        const onLongPress = () => {
-          navigation.emit({
-            type: "tabLongPress",
-            target: route.key
-          });
-        };
-        const icon = options.tabBarIcon ? options.tabBarIcon({
-          focused: isFocused,
-          color: isFocused ? theme.colors.content.brand.primary : theme.colors.content.primary,
-          size: 24
-        }) : void 0;
-        const badge = options.tabBarBadge;
-        const resolvedLabel = typeof label === "function" ? label({
-          focused: isFocused,
-          color: isFocused ? theme.colors.content.brand.primary : theme.colors.content.primary,
-          position: labelPosition
-        }) : label;
-        const accessibilityLabel = options.tabBarAccessibilityLabel || (typeof resolvedLabel === "string" ? resolvedLabel : route.name);
-        const tabId = id ? `${id}-tab-${route.key}` : void 0;
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          TabBarItem,
+      children: [
+        import_xui_core2.isWeb && indicatorStyle.initialized && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Box,
           {
-            id: tabId,
-            label: resolvedLabel,
-            icon,
-            badge,
-            focused: isFocused,
-            onPress,
-            onLongPress,
-            labelPosition,
-            accessibilityLabel,
-            testID: options.tabBarTestID,
-            index,
-            tabCount,
-            onKeyDown: handleKeyDown,
-            tabRef: (el) => {
-              tabRefs.current[index] = el;
+            position: "absolute",
+            zIndex: 0,
+            height: "100%",
+            backgroundColor: theme.colors.content.primary,
+            borderRadius: 4,
+            style: {
+              left: indicatorStyle.left,
+              width: indicatorStyle.width,
+              transition: "left 200ms ease-out, width 200ms ease-out",
+              pointerEvents: "none"
+            },
+            "aria-hidden": true
+          }
+        ),
+        state.routes.map((route, index) => {
+          const { options } = descriptors[route.key];
+          const label = options.tabBarShowLabel === false ? void 0 : options.tabBarLabel !== void 0 ? options.tabBarLabel : options.title !== void 0 ? options.title : route.name;
+          const isFocused = state.index === index;
+          const onPress = () => {
+            const event = navigation.emit({
+              type: "tabPress",
+              target: route.key,
+              canPreventDefault: true
+            });
+            if (!isFocused && !event.defaultPrevented) {
+              navigation.navigate(route.name, route.params);
             }
-          },
-          route.key
-        );
-      })
+          };
+          const onLongPress = () => {
+            navigation.emit({
+              type: "tabLongPress",
+              target: route.key
+            });
+          };
+          const iconColor = isFocused ? theme.colors.content.inverse : theme.colors.content.primary;
+          const icon = options.tabBarIcon ? options.tabBarIcon({
+            focused: isFocused,
+            color: iconColor,
+            size: 24
+          }) : void 0;
+          const badge = options.tabBarBadge;
+          const resolvedLabel = typeof label === "function" ? label({
+            focused: isFocused,
+            color: iconColor,
+            position: labelPosition
+          }) : label;
+          const accessibilityLabel = options.tabBarAccessibilityLabel || (typeof resolvedLabel === "string" ? resolvedLabel : route.name);
+          const tabId = id ? `${id}-tab-${route.key}` : void 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            TabBarItem,
+            {
+              id: tabId,
+              label: resolvedLabel,
+              icon,
+              badge,
+              focused: isFocused,
+              onPress,
+              onLongPress,
+              labelPosition,
+              accessibilityLabel,
+              testID: options.tabBarTestID,
+              index,
+              tabCount,
+              onKeyDown: handleKeyDown,
+              tabRef: (el) => {
+                tabRefs.current[index] = el;
+              }
+            },
+            route.key
+          );
+        })
+      ]
     }
   );
 };

package/native/index.js.map CHANGED Viewed

	@@ -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 } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } 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<(HTMLElement \| null)[]>([]);\n const tabCount = state.routes.length;\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 flexDirection=\"row\"\n backgroundColor={backgroundColor \|\| theme.colors.background.primary}\n borderTopWidth={1}\n borderTopColor={theme.colors.border.secondary}\n borderStyle=\"solid\"\n height={60}\n width=\"100%\"\n testID={testID \|\| \"tab-bar-container\"}\n id={id}\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.brand.primary\n : theme.colors.content.primary,\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.brand.primary\n : theme.colors.content.primary,\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 { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, it's better to use the system font\n // to avoid rendering issues or missing text.\n if (resolvedFontFamily === \"Pilat Wide Bold\") {\n resolvedFontFamily = undefined;\n }\n\n const style: 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 };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\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, { cloneElement, isValidElement, 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 } 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.brand.primary\n : theme.colors.content.primary;\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 {isValidElement(icon)\n ? cloneElement(icon as React.ReactElement<any>, {\n size: 24,\n color: color,\n stroke: color,\n })\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={12}\n fontWeight={focused ? \"600\" : \"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 alignItems=\"center\"\n justifyContent=\"center\"\n paddingVertical={8}\n cursor=\"pointer\"\n flexDirection={labelPosition === \"beside-icon\" ? \"row\" : \"column\"}\n gap={labelPosition === \"beside-icon\" ? 8 : 4}\n onPress={onPress}\n onLongPress={onLongPress}\n onKeyDown={handleKeyDown}\n testID={testID}\n hoverStyle={{\n backgroundColor: theme.colors.overlay.mono,\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_react","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 { 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<(HTMLElement \| null)[]>([]);\n const containerRef = useRef<HTMLElement \| null>(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: HTMLElement \| null) => {\n containerRef.current = el;\n }}\n flexDirection=\"row\"\n backgroundColor={backgroundColor \|\| theme.colors.background.primary}\n borderRadius={4}\n height={56}\n width=\"100%\"\n position=\"relative\"\n overflow=\"hidden\"\n testID={testID \|\| \"tab-bar-container\"}\n id={id}\n >\n {/ Sliding selection indicator (web only) /}\n {isWeb && indicatorStyle.initialized && (\n <Box\n position=\"absolute\"\n zIndex={0}\n height=\"100%\"\n backgroundColor={theme.colors.content.primary}\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 // Use inverse color (white) when selected for floating design\n const iconColor = isFocused\n ? theme.colors.content.inverse\n : theme.colors.content.primary;\n\n const icon = options.tabBarIcon\n ? options.tabBarIcon({\n focused: isFocused,\n color: iconColor,\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: iconColor,\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 { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, fall back to the system font\n if (\n resolvedFontFamily === \"Pilat Wide\" \|\|\n resolvedFontFamily === \"Pilat Wide Bold\" \|\|\n resolvedFontFamily === \"Aktiv Grotesk\"\n ) {\n resolvedFontFamily = undefined;\n }\n\n const style: 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 };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\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, { cloneElement, isValidElement, 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 } 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 // Use inverse color (white) when focused for floating design\n const color = focused\n ? theme.colors.content.inverse\n : theme.colors.content.primary;\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 {isValidElement(icon)\n ? cloneElement(icon as React.ReactElement<any>, {\n size: 24,\n color: color,\n stroke: color,\n })\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=\"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 alignItems=\"center\"\n justifyContent=\"center\"\n paddingVertical={8}\n cursor=\"pointer\"\n flexDirection={labelPosition === \"beside-icon\" ? \"row\" : \"column\"}\n gap={labelPosition === \"beside-icon\" ? 8 : 8}\n position=\"relative\"\n zIndex={1}\n borderRadius={4}\n onPress={onPress}\n onLongPress={onLongPress}\n onKeyDown={handleKeyDown}\n testID={testID}\n hoverStyle={\n focused\n ? undefined\n : {\n backgroundColor: theme.colors.overlay.mono,\n }\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_react","import_jsx_runtime","import_jsx_runtime"]}

package/native/index.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 // src/TabBar.tsx
-import { useRef, useCallback } from "react";
+import { useRef, useCallback, useState, useEffect } from "react";
 // ../primitives-native/src/Box.tsx
 import {
@@ -192,7 +192,7 @@ var Text = ({
   ...props
 }) => {
   let resolvedFontFamily = fontFamily ? fontFamily.split(",")[0].replace(/['"]/g, "").trim() : void 0;
-  if (resolvedFontFamily === "Pilat Wide Bold") {
+  if (resolvedFontFamily === "Pilat Wide" || resolvedFontFamily === "Pilat Wide Bold" || resolvedFontFamily === "Aktiv Grotesk") {
     resolvedFontFamily = void 0;
   }
   const style = {
@@ -231,7 +231,7 @@ var Icon = ({ children, color, size }) => {
 };
 // src/TabBar.tsx
-import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
+import { useDesignSystem as useDesignSystem2, isWeb } from "@xsolla/xui-core";
 // src/TabBarItem.tsx
 import { cloneElement, isValidElement } from "react";
@@ -254,7 +254,7 @@ var TabBarItem = ({
   tabRef
 }) => {
   const { theme } = useDesignSystem();
-  const color = focused ? theme.colors.content.brand.primary : theme.colors.content.primary;
+  const color = focused ? theme.colors.content.inverse : theme.colors.content.primary;
   const renderIcon = () => {
     if (!icon) return null;
     return /* @__PURE__ */ jsxs(
@@ -288,8 +288,9 @@ var TabBarItem = ({
         Text,
         {
           color,
-          fontSize: 12,
-          fontWeight: focused ? "600" : "400",
+          fontSize: 10,
+          lineHeight: 10,
+          fontWeight: "400",
           numberOfLines: 1,
           "aria-hidden": true,
           children: label
@@ -319,12 +320,15 @@ var TabBarItem = ({
       paddingVertical: 8,
       cursor: "pointer",
       flexDirection: labelPosition === "beside-icon" ? "row" : "column",
-      gap: labelPosition === "beside-icon" ? 8 : 4,
+      gap: labelPosition === "beside-icon" ? 8 : 8,
+      position: "relative",
+      zIndex: 1,
+      borderRadius: 4,
       onPress,
       onLongPress,
       onKeyDown: handleKeyDown,
       testID,
-      hoverStyle: {
+      hoverStyle: focused ? void 0 : {
         backgroundColor: theme.colors.overlay.mono
       },
       focusStyle: {
@@ -343,7 +347,7 @@ var TabBarItem = ({
 TabBarItem.displayName = "TabBarItem";
 // src/TabBar.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var TabBar = ({
   state,
   descriptors,
@@ -358,7 +362,24 @@ var TabBar = ({
 }) => {
   const { theme } = useDesignSystem2();
   const tabRefs = useRef([]);
+  const containerRef = useRef(null);
   const tabCount = state.routes.length;
+  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0, initialized: false });
+  useEffect(() => {
+    if (!isWeb) return;
+    const activeIndex = state.index;
+    const activeTabEl = tabRefs.current[activeIndex];
+    const containerEl = containerRef.current;
+    if (activeTabEl && containerEl) {
+      const containerRect = containerEl.getBoundingClientRect();
+      const tabRect = activeTabEl.getBoundingClientRect();
+      setIndicatorStyle({
+        left: tabRect.left - containerRect.left,
+        width: tabRect.width,
+        initialized: true
+      });
+    }
+  }, [state.index]);
   const focusTab = useCallback((index) => {
     const tabElement = tabRefs.current[index];
     if (tabElement) {
@@ -420,7 +441,7 @@ var TabBar = ({
     },
     [tabCount, focusTab, navigateToTab, activateOnFocus]
   );
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs2(
     Box,
     {
       as: "nav",
@@ -428,71 +449,94 @@ var TabBar = ({
       "aria-label": ariaLabel || "Tab navigation",
       "aria-labelledby": ariaLabelledBy,
       "aria-orientation": "horizontal",
+      ref: (el) => {
+        containerRef.current = el;
+      },
       flexDirection: "row",
       backgroundColor: backgroundColor || theme.colors.background.primary,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.border.secondary,
-      borderStyle: "solid",
-      height: 60,
+      borderRadius: 4,
+      height: 56,
       width: "100%",
+      position: "relative",
+      overflow: "hidden",
       testID: testID || "tab-bar-container",
       id,
-      children: state.routes.map((route, index) => {
-        const { options } = descriptors[route.key];
-        const label = options.tabBarShowLabel === false ? void 0 : options.tabBarLabel !== void 0 ? options.tabBarLabel : options.title !== void 0 ? options.title : route.name;
-        const isFocused = state.index === index;
-        const onPress = () => {
-          const event = navigation.emit({
-            type: "tabPress",
-            target: route.key,
-            canPreventDefault: true
-          });
-          if (!isFocused && !event.defaultPrevented) {
-            navigation.navigate(route.name, route.params);
-          }
-        };
-        const onLongPress = () => {
-          navigation.emit({
-            type: "tabLongPress",
-            target: route.key
-          });
-        };
-        const icon = options.tabBarIcon ? options.tabBarIcon({
-          focused: isFocused,
-          color: isFocused ? theme.colors.content.brand.primary : theme.colors.content.primary,
-          size: 24
-        }) : void 0;
-        const badge = options.tabBarBadge;
-        const resolvedLabel = typeof label === "function" ? label({
-          focused: isFocused,
-          color: isFocused ? theme.colors.content.brand.primary : theme.colors.content.primary,
-          position: labelPosition
-        }) : label;
-        const accessibilityLabel = options.tabBarAccessibilityLabel || (typeof resolvedLabel === "string" ? resolvedLabel : route.name);
-        const tabId = id ? `${id}-tab-${route.key}` : void 0;
-        return /* @__PURE__ */ jsx5(
-          TabBarItem,
+      children: [
+        isWeb && indicatorStyle.initialized && /* @__PURE__ */ jsx5(
+          Box,
           {
-            id: tabId,
-            label: resolvedLabel,
-            icon,
-            badge,
-            focused: isFocused,
-            onPress,
-            onLongPress,
-            labelPosition,
-            accessibilityLabel,
-            testID: options.tabBarTestID,
-            index,
-            tabCount,
-            onKeyDown: handleKeyDown,
-            tabRef: (el) => {
-              tabRefs.current[index] = el;
+            position: "absolute",
+            zIndex: 0,
+            height: "100%",
+            backgroundColor: theme.colors.content.primary,
+            borderRadius: 4,
+            style: {
+              left: indicatorStyle.left,
+              width: indicatorStyle.width,
+              transition: "left 200ms ease-out, width 200ms ease-out",
+              pointerEvents: "none"
+            },
+            "aria-hidden": true
+          }
+        ),
+        state.routes.map((route, index) => {
+          const { options } = descriptors[route.key];
+          const label = options.tabBarShowLabel === false ? void 0 : options.tabBarLabel !== void 0 ? options.tabBarLabel : options.title !== void 0 ? options.title : route.name;
+          const isFocused = state.index === index;
+          const onPress = () => {
+            const event = navigation.emit({
+              type: "tabPress",
+              target: route.key,
+              canPreventDefault: true
+            });
+            if (!isFocused && !event.defaultPrevented) {
+              navigation.navigate(route.name, route.params);
             }
-          },
-          route.key
-        );
-      })
+          };
+          const onLongPress = () => {
+            navigation.emit({
+              type: "tabLongPress",
+              target: route.key
+            });
+          };
+          const iconColor = isFocused ? theme.colors.content.inverse : theme.colors.content.primary;
+          const icon = options.tabBarIcon ? options.tabBarIcon({
+            focused: isFocused,
+            color: iconColor,
+            size: 24
+          }) : void 0;
+          const badge = options.tabBarBadge;
+          const resolvedLabel = typeof label === "function" ? label({
+            focused: isFocused,
+            color: iconColor,
+            position: labelPosition
+          }) : label;
+          const accessibilityLabel = options.tabBarAccessibilityLabel || (typeof resolvedLabel === "string" ? resolvedLabel : route.name);
+          const tabId = id ? `${id}-tab-${route.key}` : void 0;
+          return /* @__PURE__ */ jsx5(
+            TabBarItem,
+            {
+              id: tabId,
+              label: resolvedLabel,
+              icon,
+              badge,
+              focused: isFocused,
+              onPress,
+              onLongPress,
+              labelPosition,
+              accessibilityLabel,
+              testID: options.tabBarTestID,
+              index,
+              tabCount,
+              onKeyDown: handleKeyDown,
+              tabRef: (el) => {
+                tabRefs.current[index] = el;
+              }
+            },
+            route.key
+          );
+        })
+      ]
     }
   );
 };