@xsolla/xui-tab-bar 0.103.0 → 0.104.0

package/native/index.js

@@ -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

@@ -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"]}
+{"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

@@ -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
+          );
+        })
+      ]
     }
   );
 };