@xsolla/xui-tab-bar 0.104.0 → 0.106.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 (15) hide show
  1. package/native/index.d.mts +6 -6
  2. package/native/index.d.ts +6 -6
  3. package/native/index.js +29 -16
  4. package/native/index.js.flow +6 -6
  5. package/native/index.js.map +1 -1
  6. package/native/index.mjs +33 -20
  7. package/native/index.mjs.map +1 -1
  8. package/package.json +4 -4
  9. package/web/index.d.mts +6 -6
  10. package/web/index.d.ts +6 -6
  11. package/web/index.js +29 -16
  12. package/web/index.js.flow +6 -6
  13. package/web/index.js.map +1 -1
  14. package/web/index.mjs +33 -20
  15. package/web/index.mjs.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-tab-bar",
3
- "version": "0.104.0",
3
+ "version": "0.106.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
13
13
  "test:coverage": "vitest run --coverage"
14
14
  },
15
15
  "dependencies": {
16
- "@xsolla/xui-badge": "0.104.0",
17
- "@xsolla/xui-core": "0.104.0",
18
- "@xsolla/xui-primitives-core": "0.104.0"
16
+ "@xsolla/xui-badge": "0.106.0",
17
+ "@xsolla/xui-core": "0.106.0",
18
+ "@xsolla/xui-primitives-core": "0.106.0"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "react": ">=16.8.0"
package/web/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- import React$1, { ReactNode } from 'react';
1
+ import React, { ReactNode } from 'react';
2
2
 
3
3
  type TabBarLabelPosition = "beside-icon" | "below-icon";
4
4
  interface TabBarProps {
@@ -108,10 +108,10 @@ interface TabBarItemProps {
108
108
  index: number;
109
109
  /** Total number of tabs */
110
110
  tabCount: number;
111
- /** Callback for keyboard navigation */
112
- onKeyDown?: (e: React.KeyboardEvent, index: number) => void;
111
+ /** Callback for keyboard navigation (web only) */
112
+ onKeyDown?: (e: any, index: number) => void;
113
113
  /** Ref callback for focus management */
114
- tabRef?: (el: HTMLElement | null) => void;
114
+ tabRef?: (el: any) => void;
115
115
  }
116
116
 
117
117
  /**
@@ -133,7 +133,7 @@ interface TabBarItemProps {
133
133
  * />
134
134
  * ```
135
135
  */
136
- declare const TabBar: React$1.FC<TabBarProps>;
136
+ declare const TabBar: React.FC<TabBarProps>;
137
137
 
138
138
  /**
139
139
  * TabBarItem - An accessible tab item component
@@ -144,6 +144,6 @@ declare const TabBar: React$1.FC<TabBarProps>;
144
144
  * - tabIndex management for roving tabindex pattern
145
145
  * - Keyboard navigation support
146
146
  */
147
- declare const TabBarItem: React$1.FC<TabBarItemProps>;
147
+ declare const TabBarItem: React.FC<TabBarItemProps>;
148
148
 
149
149
  export { TabBar, TabBarItem, type TabBarItemProps, type TabBarLabelPosition, type TabBarProps };
package/web/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React$1, { ReactNode } from 'react';
1
+ import React, { ReactNode } from 'react';
2
2
 
3
3
  type TabBarLabelPosition = "beside-icon" | "below-icon";
4
4
  interface TabBarProps {
@@ -108,10 +108,10 @@ interface TabBarItemProps {
108
108
  index: number;
109
109
  /** Total number of tabs */
110
110
  tabCount: number;
111
- /** Callback for keyboard navigation */
112
- onKeyDown?: (e: React.KeyboardEvent, index: number) => void;
111
+ /** Callback for keyboard navigation (web only) */
112
+ onKeyDown?: (e: any, index: number) => void;
113
113
  /** Ref callback for focus management */
114
- tabRef?: (el: HTMLElement | null) => void;
114
+ tabRef?: (el: any) => void;
115
115
  }
116
116
 
117
117
  /**
@@ -133,7 +133,7 @@ interface TabBarItemProps {
133
133
  * />
134
134
  * ```
135
135
  */
136
- declare const TabBar: React$1.FC<TabBarProps>;
136
+ declare const TabBar: React.FC<TabBarProps>;
137
137
 
138
138
  /**
139
139
  * TabBarItem - An accessible tab item component
@@ -144,6 +144,6 @@ declare const TabBar: React$1.FC<TabBarProps>;
144
144
  * - tabIndex management for roving tabindex pattern
145
145
  * - Keyboard navigation support
146
146
  */
147
- declare const TabBarItem: React$1.FC<TabBarItemProps>;
147
+ declare const TabBarItem: React.FC<TabBarItemProps>;
148
148
 
149
149
  export { TabBar, TabBarItem, type TabBarItemProps, type TabBarLabelPosition, type TabBarProps };
package/web/index.js CHANGED
@@ -285,7 +285,7 @@ var TabBarItem = ({
285
285
  tabRef
286
286
  }) => {
287
287
  const { theme } = (0, import_xui_core.useDesignSystem)();
288
- const color = focused ? theme.colors.content.inverse : theme.colors.content.primary;
288
+ const color = focused ? theme.colors.content.primary : theme.colors.content.secondary;
289
289
  const renderIcon = () => {
290
290
  if (!icon) return null;
291
291
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -320,8 +320,7 @@ var TabBarItem = ({
320
320
  {
321
321
  color,
322
322
  fontSize: 10,
323
- lineHeight: 10,
324
- fontWeight: "400",
323
+ fontWeight: focused ? "500" : "400",
325
324
  numberOfLines: 1,
326
325
  "aria-hidden": true,
327
326
  children: label
@@ -346,21 +345,28 @@ var TabBarItem = ({
346
345
  tabIndex: focused ? 0 : -1,
347
346
  ref: tabRef,
348
347
  flex: 1,
348
+ flexBasis: 0,
349
+ minWidth: 0,
350
+ position: "relative",
351
+ zIndex: 1,
349
352
  alignItems: "center",
350
353
  justifyContent: "center",
351
354
  paddingVertical: 8,
355
+ paddingHorizontal: 4,
352
356
  cursor: "pointer",
353
357
  flexDirection: labelPosition === "beside-icon" ? "row" : "column",
354
- gap: labelPosition === "beside-icon" ? 8 : 8,
355
- position: "relative",
356
- zIndex: 1,
357
- borderRadius: 4,
358
+ gap: labelPosition === "beside-icon" ? 8 : 4,
359
+ backgroundColor: !import_xui_core.isWeb && focused ? theme.colors.control.faint.bg : "transparent",
360
+ borderWidth: !import_xui_core.isWeb && focused ? 1 : 0,
361
+ borderColor: !import_xui_core.isWeb && focused ? theme.colors.border.secondary : "transparent",
362
+ borderStyle: "solid",
363
+ borderRadius: 8,
358
364
  onPress,
359
365
  onLongPress,
360
366
  onKeyDown: handleKeyDown,
361
367
  testID,
362
- hoverStyle: focused ? void 0 : {
363
- backgroundColor: theme.colors.overlay.mono
368
+ hoverStyle: {
369
+ backgroundColor: focused ? theme.colors.control.faint.bgHover : theme.colors.overlay.mono
364
370
  },
365
371
  focusStyle: {
366
372
  outlineColor: theme.colors.border.brand,
@@ -484,11 +490,14 @@ var TabBar = ({
484
490
  containerRef.current = el;
485
491
  },
486
492
  flexDirection: "row",
493
+ position: "relative",
487
494
  backgroundColor: backgroundColor || theme.colors.background.primary,
488
- borderRadius: 4,
495
+ borderWidth: 1,
496
+ borderColor: theme.colors.border.secondary,
497
+ borderStyle: "solid",
498
+ borderRadius: 8,
489
499
  height: 56,
490
500
  width: "100%",
491
- position: "relative",
492
501
  overflow: "hidden",
493
502
  testID: testID || "tab-bar-container",
494
503
  id,
@@ -497,10 +506,14 @@ var TabBar = ({
497
506
  Box,
498
507
  {
499
508
  position: "absolute",
509
+ top: 0,
500
510
  zIndex: 0,
501
- height: "100%",
502
- backgroundColor: theme.colors.content.primary,
503
- borderRadius: 4,
511
+ height: 54,
512
+ backgroundColor: theme.colors.control.faint.bg,
513
+ borderRadius: 6,
514
+ borderWidth: 1,
515
+ borderColor: theme.colors.border.secondary,
516
+ borderStyle: "solid",
504
517
  style: {
505
518
  left: indicatorStyle.left,
506
519
  width: indicatorStyle.width,
@@ -533,13 +546,13 @@ var TabBar = ({
533
546
  const iconColor = isFocused ? theme.colors.content.inverse : theme.colors.content.primary;
534
547
  const icon = options.tabBarIcon ? options.tabBarIcon({
535
548
  focused: isFocused,
536
- color: iconColor,
549
+ color: isFocused ? theme.colors.content.primary : theme.colors.content.secondary,
537
550
  size: 24
538
551
  }) : void 0;
539
552
  const badge = options.tabBarBadge;
540
553
  const resolvedLabel = typeof label === "function" ? label({
541
554
  focused: isFocused,
542
- color: iconColor,
555
+ color: isFocused ? theme.colors.content.primary : theme.colors.content.secondary,
543
556
  position: labelPosition
544
557
  }) : label;
545
558
  const accessibilityLabel = options.tabBarAccessibilityLabel || (typeof resolvedLabel === "string" ? resolvedLabel : route.name);
package/web/index.js.flow CHANGED
@@ -5,7 +5,7 @@
5
5
  * @flow
6
6
  */
7
7
 
8
- import React$1, { Node } from "react";
8
+ import React, { Node } from "react";
9
9
  declare type TabBarLabelPosition = "beside-icon" | "below-icon";
10
10
  declare interface TabBarProps {
11
11
  /**
@@ -172,14 +172,14 @@ declare interface TabBarItemProps {
172
172
  tabCount: number;
173
173
 
174
174
  /**
175
- * Callback for keyboard navigation
175
+ * Callback for keyboard navigation (web only)
176
176
  */
177
- onKeyDown?: (e: React$KeyboardEvent<>, index: number) => void;
177
+ onKeyDown?: (e: any, index: number) => void;
178
178
 
179
179
  /**
180
180
  * Ref callback for focus management
181
181
  */
182
- tabRef?: (el: HTMLElement | null) => void;
182
+ tabRef?: (el: any) => void;
183
183
  }
184
184
  /**
185
185
  * TabBar - An accessible tab bar navigation component
@@ -198,7 +198,7 @@ declare interface TabBarItemProps {
198
198
  * />
199
199
  * ```
200
200
  */
201
- declare var TabBar: React$1.FC<TabBarProps>;
201
+ declare var TabBar: React.FC<TabBarProps>;
202
202
  /**
203
203
  * TabBarItem - An accessible tab item component
204
204
  *
@@ -208,6 +208,6 @@ declare var TabBar: React$1.FC<TabBarProps>;
208
208
  * - tabIndex management for roving tabindex pattern
209
209
  * - Keyboard navigation support
210
210
  */
211
- declare var TabBarItem: React$1.FC<TabBarItemProps>;
211
+ declare var TabBarItem: React.FC<TabBarItemProps>;
212
212
  export type { TabBarItemProps, TabBarLabelPosition, TabBarProps };
213
213
  declare export { TabBar, TabBarItem };
package/web/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/TabBar.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Icon.tsx","../../src/TabBarItem.tsx"],"sourcesContent":["export * from \"./TabBar\";\nexport * from \"./TabBarItem\";\nexport * from \"./types\";\n","import React, { useRef, useCallback, useState, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, isWeb } from \"@xsolla/xui-core\";\nimport { TabBarItem } from \"./TabBarItem\";\nimport type { TabBarProps } from \"./types\";\n\n/**\n * TabBar - An accessible tab bar navigation component\n *\n * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:\n * - Arrow Left/Right: Navigate between tabs\n * - Home: Jump to first tab\n * - End: Jump to last tab\n * - Enter/Space: Activate focused tab (when activateOnFocus is false)\n *\n * @example\n * ```tsx\n * <TabBar\n * state={navigationState}\n * descriptors={descriptors}\n * navigation={navigation}\n * aria-label=\"Main navigation\"\n * />\n * ```\n */\nexport const TabBar: React.FC<TabBarProps> = ({\n state,\n descriptors,\n navigation,\n labelPosition = \"below-icon\",\n backgroundColor,\n testID,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n id,\n activateOnFocus = true,\n}) => {\n const { theme } = useDesignSystem();\n const tabRefs = useRef<(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 styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React, { 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","styled","React","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_xui_core","import_react","import_jsx_runtime","import_jsx_runtime"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/TabBar.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Icon.tsx","../../src/TabBarItem.tsx"],"sourcesContent":["export * from \"./TabBar\";\nexport * from \"./TabBarItem\";\nexport * from \"./types\";\n","import React, { useRef, useCallback, useState, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, isWeb } from \"@xsolla/xui-core\";\nimport { TabBarItem } from \"./TabBarItem\";\nimport type { TabBarProps } from \"./types\";\n\n/**\n * TabBar - An accessible tab bar navigation component\n *\n * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:\n * - Arrow Left/Right: Navigate between tabs\n * - Home: Jump to first tab\n * - End: Jump to last tab\n * - Enter/Space: Activate focused tab (when activateOnFocus is false)\n *\n * @example\n * ```tsx\n * <TabBar\n * state={navigationState}\n * descriptors={descriptors}\n * navigation={navigation}\n * aria-label=\"Main navigation\"\n * />\n * ```\n */\nexport const TabBar: React.FC<TabBarProps> = ({\n state,\n descriptors,\n navigation,\n labelPosition = \"below-icon\",\n backgroundColor,\n testID,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n id,\n activateOnFocus = true,\n}) => {\n const { theme } = useDesignSystem();\n const tabRefs = useRef<(any | null)[]>([]);\n const containerRef = useRef<any>(null);\n const tabCount = state.routes.length;\n\n // Indicator position for sliding selection animation\n const [indicatorStyle, setIndicatorStyle] = useState<{\n left: number;\n width: number;\n initialized: boolean;\n }>({ left: 0, width: 0, initialized: false });\n\n // Update indicator position when active tab changes (web only)\n useEffect(() => {\n if (!isWeb) return;\n\n const activeIndex = state.index;\n const activeTabEl = tabRefs.current[activeIndex];\n const containerEl = containerRef.current;\n\n if (activeTabEl && containerEl) {\n const containerRect = containerEl.getBoundingClientRect();\n const tabRect = activeTabEl.getBoundingClientRect();\n\n setIndicatorStyle({\n left: tabRect.left - containerRect.left,\n width: tabRect.width,\n initialized: true,\n });\n }\n }, [state.index]);\n\n /**\n * Focus a tab by its index\n */\n const focusTab = useCallback((index: number) => {\n const tabElement = tabRefs.current[index];\n if (tabElement) {\n tabElement.focus();\n }\n }, []);\n\n /**\n * Navigate to a tab by index\n */\n const navigateToTab = useCallback(\n (index: number) => {\n const route = state.routes[index];\n if (route) {\n const event = navigation.emit({\n type: \"tabPress\",\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n }\n },\n [state.routes, navigation]\n );\n\n /**\n * Handle keyboard navigation within the tab bar\n */\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent, currentIndex: number) => {\n let nextIndex: number | null = null;\n\n switch (e.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n e.preventDefault();\n nextIndex = currentIndex < tabCount - 1 ? currentIndex + 1 : 0;\n break;\n\n case \"ArrowLeft\":\n case \"ArrowUp\":\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : tabCount - 1;\n break;\n\n case \"Home\":\n e.preventDefault();\n nextIndex = 0;\n break;\n\n case \"End\":\n e.preventDefault();\n nextIndex = tabCount - 1;\n break;\n\n case \"Enter\":\n case \" \":\n e.preventDefault();\n navigateToTab(currentIndex);\n break;\n\n default:\n break;\n }\n\n if (nextIndex !== null) {\n focusTab(nextIndex);\n if (activateOnFocus) {\n navigateToTab(nextIndex);\n }\n }\n },\n [tabCount, focusTab, navigateToTab, activateOnFocus]\n );\n\n return (\n <Box\n as=\"nav\"\n role=\"tablist\"\n aria-label={ariaLabel || \"Tab navigation\"}\n aria-labelledby={ariaLabelledBy}\n aria-orientation=\"horizontal\"\n ref={(el: any) => {\n containerRef.current = el;\n }}\n flexDirection=\"row\"\n position=\"relative\"\n backgroundColor={backgroundColor || theme.colors.background.primary}\n borderWidth={1}\n borderColor={theme.colors.border.secondary}\n borderStyle=\"solid\"\n borderRadius={8}\n height={56}\n width=\"100%\"\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 top={0}\n zIndex={0}\n height={54}\n backgroundColor={theme.colors.control.faint.bg}\n borderRadius={6}\n borderWidth={1}\n borderColor={theme.colors.border.secondary}\n borderStyle=\"solid\"\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: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n size: 24,\n })\n : undefined;\n\n const badge = options.tabBarBadge;\n\n // Generate accessible label fallback\n const resolvedLabel =\n typeof label === \"function\"\n ? label({\n focused: isFocused,\n color: isFocused\n ? theme.colors.content.primary\n : theme.colors.content.secondary,\n position: labelPosition,\n })\n : label;\n\n // Use explicit accessibility label or fall back to text label\n const accessibilityLabel =\n options.tabBarAccessibilityLabel ||\n (typeof resolvedLabel === \"string\" ? resolvedLabel : route.name);\n\n // Generate unique tab ID\n const tabId = id ? `${id}-tab-${route.key}` : undefined;\n\n return (\n <TabBarItem\n key={route.key}\n id={tabId}\n label={resolvedLabel}\n icon={icon}\n badge={badge}\n focused={isFocused}\n onPress={onPress}\n onLongPress={onLongPress}\n labelPosition={labelPosition}\n accessibilityLabel={accessibilityLabel}\n testID={options.tabBarTestID}\n index={index}\n tabCount={tabCount}\n onKeyDown={handleKeyDown}\n tabRef={(el) => {\n tabRefs.current[index] = el;\n }}\n />\n );\n })}\n </Box>\n );\n};\n\nTabBar.displayName = \"TabBar\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React, { 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, isWeb } from \"@xsolla/xui-core\";\nimport { Badge } from \"@xsolla/xui-badge\";\nimport type { TabBarItemProps } from \"./types\";\n\n/**\n * TabBarItem - An accessible tab item component\n *\n * Implements WAI-ARIA tab role with proper semantics:\n * - role=\"tab\" for tab semantics\n * - aria-selected to indicate active state\n * - tabIndex management for roving tabindex pattern\n * - Keyboard navigation support\n */\nexport const TabBarItem: React.FC<TabBarItemProps> = ({\n label,\n icon,\n badge,\n focused,\n onPress,\n onLongPress,\n labelPosition,\n accessibilityLabel,\n testID,\n id,\n index,\n onKeyDown,\n tabRef,\n}) => {\n const { theme } = useDesignSystem();\n\n // Use inverse color (white) when focused for floating design\n const color = focused\n ? theme.colors.content.primary\n : theme.colors.content.secondary;\n\n const renderIcon = () => {\n if (!icon) return null;\n\n return (\n <Box\n position=\"relative\"\n alignItems=\"center\"\n justifyContent=\"center\"\n aria-hidden={true}\n >\n <Icon size={24} color={color}>\n {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 fontWeight={focused ? \"500\" : \"400\"}\n numberOfLines={1}\n aria-hidden={true}\n >\n {label}\n </Text>\n );\n }\n return label as ReactNode;\n };\n\n /**\n * Handle keyboard events for this tab\n */\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (onKeyDown) {\n onKeyDown(e, index);\n }\n };\n\n return (\n <Box\n as=\"button\"\n role=\"tab\"\n id={id}\n aria-selected={focused}\n aria-label={accessibilityLabel}\n tabIndex={focused ? 0 : -1}\n ref={tabRef}\n flex={1}\n flexBasis={0}\n minWidth={0}\n position=\"relative\"\n zIndex={1}\n alignItems=\"center\"\n justifyContent=\"center\"\n paddingVertical={8}\n paddingHorizontal={4}\n cursor=\"pointer\"\n flexDirection={labelPosition === \"beside-icon\" ? \"row\" : \"column\"}\n gap={labelPosition === \"beside-icon\" ? 8 : 4}\n backgroundColor={\n !isWeb && focused\n ? theme.colors.control.faint.bg\n : \"transparent\"\n }\n borderWidth={!isWeb && focused ? 1 : 0}\n borderColor={!isWeb && focused ? theme.colors.border.secondary : \"transparent\"}\n borderStyle=\"solid\"\n borderRadius={8}\n onPress={onPress}\n onLongPress={onLongPress}\n onKeyDown={handleKeyDown}\n testID={testID}\n hoverStyle={{\n backgroundColor: focused\n ? theme.colors.control.faint.bgHover\n : 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","styled","React","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_xui_core","import_react","import_jsx_runtime","import_jsx_runtime"]}
package/web/index.mjs CHANGED
@@ -225,11 +225,11 @@ var Icon = ({ children, ...props }) => {
225
225
  };
226
226
 
227
227
  // src/TabBar.tsx
228
- import { useDesignSystem as useDesignSystem2, isWeb } from "@xsolla/xui-core";
228
+ import { useDesignSystem as useDesignSystem2, isWeb as isWeb2 } from "@xsolla/xui-core";
229
229
 
230
230
  // src/TabBarItem.tsx
231
231
  import { cloneElement, isValidElement } from "react";
232
- import { useDesignSystem } from "@xsolla/xui-core";
232
+ import { useDesignSystem, isWeb } from "@xsolla/xui-core";
233
233
  import { Badge } from "@xsolla/xui-badge";
234
234
  import { jsx as jsx4, jsxs } from "react/jsx-runtime";
235
235
  var TabBarItem = ({
@@ -248,7 +248,7 @@ var TabBarItem = ({
248
248
  tabRef
249
249
  }) => {
250
250
  const { theme } = useDesignSystem();
251
- const color = focused ? theme.colors.content.inverse : theme.colors.content.primary;
251
+ const color = focused ? theme.colors.content.primary : theme.colors.content.secondary;
252
252
  const renderIcon = () => {
253
253
  if (!icon) return null;
254
254
  return /* @__PURE__ */ jsxs(
@@ -283,8 +283,7 @@ var TabBarItem = ({
283
283
  {
284
284
  color,
285
285
  fontSize: 10,
286
- lineHeight: 10,
287
- fontWeight: "400",
286
+ fontWeight: focused ? "500" : "400",
288
287
  numberOfLines: 1,
289
288
  "aria-hidden": true,
290
289
  children: label
@@ -309,21 +308,28 @@ var TabBarItem = ({
309
308
  tabIndex: focused ? 0 : -1,
310
309
  ref: tabRef,
311
310
  flex: 1,
311
+ flexBasis: 0,
312
+ minWidth: 0,
313
+ position: "relative",
314
+ zIndex: 1,
312
315
  alignItems: "center",
313
316
  justifyContent: "center",
314
317
  paddingVertical: 8,
318
+ paddingHorizontal: 4,
315
319
  cursor: "pointer",
316
320
  flexDirection: labelPosition === "beside-icon" ? "row" : "column",
317
- gap: labelPosition === "beside-icon" ? 8 : 8,
318
- position: "relative",
319
- zIndex: 1,
320
- borderRadius: 4,
321
+ gap: labelPosition === "beside-icon" ? 8 : 4,
322
+ backgroundColor: !isWeb && focused ? theme.colors.control.faint.bg : "transparent",
323
+ borderWidth: !isWeb && focused ? 1 : 0,
324
+ borderColor: !isWeb && focused ? theme.colors.border.secondary : "transparent",
325
+ borderStyle: "solid",
326
+ borderRadius: 8,
321
327
  onPress,
322
328
  onLongPress,
323
329
  onKeyDown: handleKeyDown,
324
330
  testID,
325
- hoverStyle: focused ? void 0 : {
326
- backgroundColor: theme.colors.overlay.mono
331
+ hoverStyle: {
332
+ backgroundColor: focused ? theme.colors.control.faint.bgHover : theme.colors.overlay.mono
327
333
  },
328
334
  focusStyle: {
329
335
  outlineColor: theme.colors.border.brand,
@@ -360,7 +366,7 @@ var TabBar = ({
360
366
  const tabCount = state.routes.length;
361
367
  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0, initialized: false });
362
368
  useEffect(() => {
363
- if (!isWeb) return;
369
+ if (!isWeb2) return;
364
370
  const activeIndex = state.index;
365
371
  const activeTabEl = tabRefs.current[activeIndex];
366
372
  const containerEl = containerRef.current;
@@ -447,23 +453,30 @@ var TabBar = ({
447
453
  containerRef.current = el;
448
454
  },
449
455
  flexDirection: "row",
456
+ position: "relative",
450
457
  backgroundColor: backgroundColor || theme.colors.background.primary,
451
- borderRadius: 4,
458
+ borderWidth: 1,
459
+ borderColor: theme.colors.border.secondary,
460
+ borderStyle: "solid",
461
+ borderRadius: 8,
452
462
  height: 56,
453
463
  width: "100%",
454
- position: "relative",
455
464
  overflow: "hidden",
456
465
  testID: testID || "tab-bar-container",
457
466
  id,
458
467
  children: [
459
- isWeb && indicatorStyle.initialized && /* @__PURE__ */ jsx5(
468
+ isWeb2 && indicatorStyle.initialized && /* @__PURE__ */ jsx5(
460
469
  Box,
461
470
  {
462
471
  position: "absolute",
472
+ top: 0,
463
473
  zIndex: 0,
464
- height: "100%",
465
- backgroundColor: theme.colors.content.primary,
466
- borderRadius: 4,
474
+ height: 54,
475
+ backgroundColor: theme.colors.control.faint.bg,
476
+ borderRadius: 6,
477
+ borderWidth: 1,
478
+ borderColor: theme.colors.border.secondary,
479
+ borderStyle: "solid",
467
480
  style: {
468
481
  left: indicatorStyle.left,
469
482
  width: indicatorStyle.width,
@@ -496,13 +509,13 @@ var TabBar = ({
496
509
  const iconColor = isFocused ? theme.colors.content.inverse : theme.colors.content.primary;
497
510
  const icon = options.tabBarIcon ? options.tabBarIcon({
498
511
  focused: isFocused,
499
- color: iconColor,
512
+ color: isFocused ? theme.colors.content.primary : theme.colors.content.secondary,
500
513
  size: 24
501
514
  }) : void 0;
502
515
  const badge = options.tabBarBadge;
503
516
  const resolvedLabel = typeof label === "function" ? label({
504
517
  focused: isFocused,
505
- color: iconColor,
518
+ color: isFocused ? theme.colors.content.primary : theme.colors.content.secondary,
506
519
  position: labelPosition
507
520
  }) : label;
508
521
  const accessibilityLabel = options.tabBarAccessibilityLabel || (typeof resolvedLabel === "string" ? resolvedLabel : route.name);