@xsolla/xui-tab-bar 0.74.0 → 0.76.0

package/native/index.js.flow

@@ -0,0 +1,213 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import React$1, { Node } from "react";
+declare type TabBarLabelPosition = "beside-icon" | "below-icon";
+declare interface TabBarProps {
+  /**
+   * React Navigation state
+   */
+  state: {
+    index: number,
+    routes: {
+      key: string,
+      name: string,
+      params?: { [key: string]: any },
+      ...
+    }[],
+    ...
+  };
+
+  /**
+   * React Navigation descriptors
+   */
+  descriptors: {
+    [key: string]: {
+      options: {
+        tabBarLabel?:
+          | string
+          | ((props: {
+              focused: boolean,
+              color: string,
+              position: TabBarLabelPosition,
+              ...
+            }) => Node),
+        title?: string,
+        tabBarIcon?: (props: {
+          focused: boolean,
+          color: string,
+          size: number,
+          ...
+        }) => Node,
+        tabBarBadge?: string | number,
+        tabBarBadgeStyle?: any,
+        tabBarShowLabel?: boolean,
+        tabBarAccessibilityLabel?: string,
+        tabBarTestID?: string,
+        [key: string]: any,
+      },
+      ...
+    },
+    ...
+  };
+
+  /**
+   * React Navigation navigation object
+   */
+  navigation: {
+    navigate: (name: string, params?: { [key: string]: any }) => void,
+    emit: (options: {
+      type: string,
+      target?: string,
+      canPreventDefault?: boolean,
+      ...
+    }) => any,
+    ...
+  };
+
+  /**
+   * Position of the label relative to the icon
+   * @default 'below-icon'
+   */
+  labelPosition?: TabBarLabelPosition;
+
+  /**
+   * Custom background color for the tab bar
+   */
+  backgroundColor?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+
+  /**
+   * Accessible label for the tab bar navigation
+   * Used by screen readers to identify the navigation region
+   */
+  "aria-label"?: string;
+
+  /**
+   * ID of element that labels this tab bar
+   */
+  "aria-labelledby"?: string;
+
+  /**
+   * HTML id attribute for the tab bar container
+   * Used to generate unique IDs for tabs and panels
+   */
+  id?: string;
+
+  /**
+   * Whether keyboard navigation should automatically activate tabs
+   * When true (default), arrow keys both focus and activate tabs
+   * When false, arrow keys only focus, Enter/Space activates
+   * @default true
+   */
+  activateOnFocus?: boolean;
+}
+declare interface TabBarItemProps {
+  /**
+   * Display label for the tab
+   */
+  label: string | Node;
+
+  /**
+   * Icon to display in the tab
+   */
+  icon?: Node;
+
+  /**
+   * Badge content to display on the tab
+   */
+  badge?: string | number;
+
+  /**
+   * Whether this tab is currently focused/selected
+   */
+  focused: boolean;
+
+  /**
+   * Callback when tab is pressed
+   */
+  onPress: () => void;
+
+  /**
+   * Callback when tab is long pressed
+   */
+  onLongPress: () => void;
+
+  /**
+   * Position of the label relative to the icon
+   */
+  labelPosition: TabBarLabelPosition;
+
+  /**
+   * Accessible label for screen readers
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+
+  /**
+   * Unique ID for the tab element
+   */
+  id?: string;
+
+  /**
+   * Index of the tab in the tab list
+   */
+  index: number;
+
+  /**
+   * Total number of tabs
+   */
+  tabCount: number;
+
+  /**
+   * Callback for keyboard navigation
+   */
+  onKeyDown?: (e: React$KeyboardEvent<>, index: number) => void;
+
+  /**
+   * Ref callback for focus management
+   */
+  tabRef?: (el: HTMLElement | null) => void;
+}
+/**
+ * TabBar - An accessible tab bar navigation component
+ *
+ * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:
+ * - Arrow Left/Right: Navigate between tabs
+ * - Home: Jump to first tab
+ * - End: Jump to last tab
+ * - Enter/Space: Activate focused tab (when activateOnFocus is false)
+ * @example ```tsx
+ * <TabBar
+ *   state={navigationState}
+ *   descriptors={descriptors}
+ *   navigation={navigation}
+ *   aria-label="Main navigation"
+ * />
+ * ```
+ */
+declare var TabBar: React$1.FC<TabBarProps>;
+/**
+ * TabBarItem - An accessible tab item component
+ *
+ * Implements WAI-ARIA tab role with proper semantics:
+ * - role="tab" for tab semantics
+ * - aria-selected to indicate active state
+ * - tabIndex management for roving tabindex pattern
+ * - Keyboard navigation support
+ */
+declare var TabBarItem: React$1.FC<TabBarItemProps>;
+export type { TabBarItemProps, TabBarLabelPosition, TabBarProps };
+declare export { TabBar, TabBarItem };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-tab-bar",
-  "version": "0.74.0",
+  "version": "0.76.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-badge": "0.74.0",
-    "@xsolla/xui-core": "0.74.0",
-    "@xsolla/xui-primitives-core": "0.74.0"
+    "@xsolla/xui-badge": "0.76.0",
+    "@xsolla/xui-core": "0.76.0",
+    "@xsolla/xui-primitives-core": "0.76.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0"

package/web/index.js.flow

@@ -0,0 +1,213 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import React$1, { Node } from "react";
+declare type TabBarLabelPosition = "beside-icon" | "below-icon";
+declare interface TabBarProps {
+  /**
+   * React Navigation state
+   */
+  state: {
+    index: number,
+    routes: {
+      key: string,
+      name: string,
+      params?: { [key: string]: any },
+      ...
+    }[],
+    ...
+  };
+
+  /**
+   * React Navigation descriptors
+   */
+  descriptors: {
+    [key: string]: {
+      options: {
+        tabBarLabel?:
+          | string
+          | ((props: {
+              focused: boolean,
+              color: string,
+              position: TabBarLabelPosition,
+              ...
+            }) => Node),
+        title?: string,
+        tabBarIcon?: (props: {
+          focused: boolean,
+          color: string,
+          size: number,
+          ...
+        }) => Node,
+        tabBarBadge?: string | number,
+        tabBarBadgeStyle?: any,
+        tabBarShowLabel?: boolean,
+        tabBarAccessibilityLabel?: string,
+        tabBarTestID?: string,
+        [key: string]: any,
+      },
+      ...
+    },
+    ...
+  };
+
+  /**
+   * React Navigation navigation object
+   */
+  navigation: {
+    navigate: (name: string, params?: { [key: string]: any }) => void,
+    emit: (options: {
+      type: string,
+      target?: string,
+      canPreventDefault?: boolean,
+      ...
+    }) => any,
+    ...
+  };
+
+  /**
+   * Position of the label relative to the icon
+   * @default 'below-icon'
+   */
+  labelPosition?: TabBarLabelPosition;
+
+  /**
+   * Custom background color for the tab bar
+   */
+  backgroundColor?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+
+  /**
+   * Accessible label for the tab bar navigation
+   * Used by screen readers to identify the navigation region
+   */
+  "aria-label"?: string;
+
+  /**
+   * ID of element that labels this tab bar
+   */
+  "aria-labelledby"?: string;
+
+  /**
+   * HTML id attribute for the tab bar container
+   * Used to generate unique IDs for tabs and panels
+   */
+  id?: string;
+
+  /**
+   * Whether keyboard navigation should automatically activate tabs
+   * When true (default), arrow keys both focus and activate tabs
+   * When false, arrow keys only focus, Enter/Space activates
+   * @default true
+   */
+  activateOnFocus?: boolean;
+}
+declare interface TabBarItemProps {
+  /**
+   * Display label for the tab
+   */
+  label: string | Node;
+
+  /**
+   * Icon to display in the tab
+   */
+  icon?: Node;
+
+  /**
+   * Badge content to display on the tab
+   */
+  badge?: string | number;
+
+  /**
+   * Whether this tab is currently focused/selected
+   */
+  focused: boolean;
+
+  /**
+   * Callback when tab is pressed
+   */
+  onPress: () => void;
+
+  /**
+   * Callback when tab is long pressed
+   */
+  onLongPress: () => void;
+
+  /**
+   * Position of the label relative to the icon
+   */
+  labelPosition: TabBarLabelPosition;
+
+  /**
+   * Accessible label for screen readers
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+
+  /**
+   * Unique ID for the tab element
+   */
+  id?: string;
+
+  /**
+   * Index of the tab in the tab list
+   */
+  index: number;
+
+  /**
+   * Total number of tabs
+   */
+  tabCount: number;
+
+  /**
+   * Callback for keyboard navigation
+   */
+  onKeyDown?: (e: React$KeyboardEvent<>, index: number) => void;
+
+  /**
+   * Ref callback for focus management
+   */
+  tabRef?: (el: HTMLElement | null) => void;
+}
+/**
+ * TabBar - An accessible tab bar navigation component
+ *
+ * Implements WAI-ARIA Tabs pattern with proper keyboard navigation:
+ * - Arrow Left/Right: Navigate between tabs
+ * - Home: Jump to first tab
+ * - End: Jump to last tab
+ * - Enter/Space: Activate focused tab (when activateOnFocus is false)
+ * @example ```tsx
+ * <TabBar
+ *   state={navigationState}
+ *   descriptors={descriptors}
+ *   navigation={navigation}
+ *   aria-label="Main navigation"
+ * />
+ * ```
+ */
+declare var TabBar: React$1.FC<TabBarProps>;
+/**
+ * TabBarItem - An accessible tab item component
+ *
+ * Implements WAI-ARIA tab role with proper semantics:
+ * - role="tab" for tab semantics
+ * - aria-selected to indicate active state
+ * - tabIndex management for roving tabindex pattern
+ * - Keyboard navigation support
+ */
+declare var TabBarItem: React$1.FC<TabBarItemProps>;
+export type { TabBarItemProps, TabBarLabelPosition, TabBarProps };
+declare export { TabBar, TabBarItem };