@xsolla/xui-tabs 0.74.0 → 0.75.0

package/native/index.d.mts

@@ -25,8 +25,12 @@ interface TabsProps {
     onChange?: (id: string) => void;
     /** Size variant of the tabs */
     size?: "xl" | "lg" | "md" | "sm";
-    /** Whether to align tabs to the left */
+    /** Visual variant of the tabs */
+    variant?: "line" | "segmented";
+    /** Whether to align tabs to the left (only for line variant) */
     alignLeft?: boolean;
+    /** Whether the component should stretch to fill its container */
+    stretched?: boolean;
     /** Accessible label for the tab list */
     "aria-label"?: string;
     /** ID of element that labels this tab list */
@@ -47,6 +51,9 @@ interface TabsProps {
  * - End: Jump to last tab
  * - Enter/Space: Activate focused tab (when activateOnFocus is false)
  *
+ * Variants:
+ * - "line" (default): Traditional underlined tabs
+ * - "segmented": Button-group style segmented control
  */
 declare const Tabs: React.FC<TabsProps>;
 /**

package/native/index.d.ts

@@ -25,8 +25,12 @@ interface TabsProps {
     onChange?: (id: string) => void;
     /** Size variant of the tabs */
     size?: "xl" | "lg" | "md" | "sm";
-    /** Whether to align tabs to the left */
+    /** Visual variant of the tabs */
+    variant?: "line" | "segmented";
+    /** Whether to align tabs to the left (only for line variant) */
     alignLeft?: boolean;
+    /** Whether the component should stretch to fill its container */
+    stretched?: boolean;
     /** Accessible label for the tab list */
     "aria-label"?: string;
     /** ID of element that labels this tab list */
@@ -47,6 +51,9 @@ interface TabsProps {
  * - End: Jump to last tab
  * - Enter/Space: Activate focused tab (when activateOnFocus is false)
  *
+ * Variants:
+ * - "line" (default): Traditional underlined tabs
+ * - "segmented": Button-group style segmented control
  */
 declare const Tabs: React.FC<TabsProps>;
 /**

package/native/index.js

@@ -521,12 +521,15 @@ TextAreaPrimitive.displayName = "TextAreaPrimitive";
 var import_xui_core = require("@xsolla/xui-core");
 var import_xui_badge = require("@xsolla/xui-badge");
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var isWeb = typeof document !== "undefined";
 var Tabs = ({
   tabs,
   activeTabId,
   onChange,
   size = "md",
+  variant = "line",
   alignLeft = true,
+  stretched = false,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   activateOnFocus = true,
@@ -534,10 +537,27 @@ var Tabs = ({
   testID
 }) => {
   const { theme } = (0, import_xui_core.useDesignSystem)();
-  const sizeStyles = theme.sizing.tabs(size);
+  const isSegmented = variant === "segmented";
   const tabListId = id ? `${id}-tablist` : void 0;
   const [_focusedIndex, setFocusedIndex] = (0, import_react4.useState)(-1);
   const tabRefs = (0, import_react4.useRef)([]);
+  const containerRef = (0, import_react4.useRef)(null);
+  const [indicatorStyle, setIndicatorStyle] = (0, import_react4.useState)({ left: 0, width: 0, initialized: false });
+  (0, import_react4.useEffect)(() => {
+    if (!isSegmented || !isWeb) return;
+    const activeIndex = tabs.findIndex((tab) => tab.id === activeTabId);
+    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
+      });
+    }
+  }, [activeTabId, tabs, isSegmented]);
   const enabledIndices = tabs.map((tab, index) => !tab.disabled ? index : -1).filter((i) => i !== -1);
   const focusTab = (0, import_react4.useCallback)((index) => {
     const tabElement = tabRefs.current[index];
@@ -605,6 +625,146 @@ var Tabs = ({
     },
     [enabledIndices, focusTab, activateOnFocus, onChange, tabs]
   );
+  if (isSegmented) {
+    const segmentedStyles = theme.sizing.tabsSegmented(size);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      Box,
+      {
+        as: "nav",
+        role: "tablist",
+        id: tabListId,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-orientation": "horizontal",
+        testID,
+        ref: (el) => {
+          containerRef.current = el;
+        },
+        flexDirection: "row",
+        alignItems: "center",
+        flexShrink: 0,
+        position: "relative",
+        width: stretched ? "100%" : "fit-content",
+        height: segmentedStyles.height,
+        backgroundColor: theme.colors.control.segmented.bg,
+        borderRadius: segmentedStyles.containerRadius,
+        padding: segmentedStyles.containerPadding,
+        overflow: "hidden",
+        children: [
+          isWeb && indicatorStyle.initialized && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Box,
+            {
+              position: "absolute",
+              zIndex: 0,
+              height: `calc(100% - ${segmentedStyles.containerPadding * 2}px)`,
+              backgroundColor: theme.colors.control.segmented.bgActive,
+              borderRadius: segmentedStyles.itemRadius,
+              style: {
+                left: indicatorStyle.left,
+                width: indicatorStyle.width,
+                transition: "left 200ms ease-out, width 200ms ease-out",
+                pointerEvents: "none"
+              },
+              "aria-hidden": true
+            }
+          ),
+          tabs.map((tab, index) => {
+            const isActive = tab.id === activeTabId;
+            const isDisabled = tab.disabled;
+            const tabId = id ? `${id}-tab-${tab.id}` : void 0;
+            const tabPanelId = id ? `${id}-tabpanel-${tab.id}` : void 0;
+            const handlePress = () => {
+              if (!isDisabled && onChange) {
+                onChange(tab.id);
+              }
+            };
+            const handleFocus = () => {
+              setFocusedIndex(index);
+            };
+            const textColor = isDisabled ? theme.colors.control.text.disable : isActive ? theme.colors.control.segmented.textActive : theme.colors.control.text.primary;
+            return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              Box,
+              {
+                as: "button",
+                role: "tab",
+                id: tabId,
+                "aria-selected": isActive,
+                "aria-disabled": isDisabled || void 0,
+                "aria-controls": tabPanelId,
+                "aria-label": tab["aria-label"],
+                tabIndex: isActive ? 0 : -1,
+                disabled: isDisabled,
+                ref: (el) => {
+                  tabRefs.current[index] = el;
+                },
+                onPress: handlePress,
+                onFocus: handleFocus,
+                onKeyDown: (e) => handleKeyDown(e, index),
+                flex: stretched ? 1 : void 0,
+                flexShrink: 0,
+                position: "relative",
+                zIndex: 1,
+                height: "100%",
+                paddingHorizontal: segmentedStyles.itemPaddingHorizontal,
+                paddingVertical: segmentedStyles.itemPaddingVertical,
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: segmentedStyles.gap,
+                backgroundColor: !isWeb && isActive ? theme.colors.control.segmented.bgActive : "transparent",
+                borderRadius: segmentedStyles.itemRadius,
+                cursor: isDisabled ? "not-allowed" : "pointer",
+                hoverStyle: !isDisabled && !isActive ? {
+                  backgroundColor: theme.colors.control.segmented.bgHover
+                } : void 0,
+                focusStyle: {
+                  outlineColor: theme.colors.border.brand,
+                  outlineWidth: 2,
+                  outlineOffset: -2
+                },
+                children: [
+                  tab.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    Icon,
+                    {
+                      size: segmentedStyles.iconSize,
+                      color: textColor,
+                      "aria-hidden": true,
+                      children: tab.icon
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    Text,
+                    {
+                      color: textColor,
+                      fontSize: segmentedStyles.fontSize,
+                      fontWeight: "400",
+                      textAlign: "center",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      children: tab.label
+                    }
+                  ),
+                  tab.counter !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { marginLeft: 2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                    Text,
+                    {
+                      color: textColor,
+                      fontSize: segmentedStyles.fontSize,
+                      fontWeight: "400",
+                      children: tab.counter
+                    }
+                  ) }),
+                  tab.badge && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { marginLeft: 2, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_xui_badge.Badge, { size: "sm", children: typeof tab.badge === "string" || typeof tab.badge === "number" ? tab.badge : void 0 }) })
+                ]
+              },
+              tab.id
+            );
+          })
+        ]
+      }
+    );
+  }
+  const lineStyles = theme.sizing.tabs(size);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Box,
     {
@@ -618,8 +778,8 @@ var Tabs = ({
       flexDirection: "row",
       alignItems: "flex-end",
       justifyContent: alignLeft ? "flex-start" : "center",
-      width: "100%",
-      height: sizeStyles.height,
+      width: stretched ? "100%" : "fit-content",
+      height: lineStyles.height,
       borderBottomWidth: 1,
       borderBottomColor: theme.colors.border.secondary,
       borderStyle: "solid",
@@ -657,12 +817,12 @@ var Tabs = ({
             onPress: handlePress,
             onFocus: handleFocus,
             onKeyDown: (e) => handleKeyDown(e, index),
-            height: sizeStyles.height,
-            paddingHorizontal: sizeStyles.paddingHorizontal,
+            height: lineStyles.height,
+            paddingHorizontal: lineStyles.paddingHorizontal,
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "center",
-            gap: sizeStyles.gap,
+            gap: lineStyles.gap,
             position: "relative",
             borderBottomWidth,
             borderBottomColor,
@@ -678,12 +838,12 @@ var Tabs = ({
               outlineOffset: -2
             },
             children: [
-              tab.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: tab.icon }),
+              tab.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { size: lineStyles.iconSize, color: textColor, "aria-hidden": true, children: tab.icon }),
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 Text,
                 {
                   color: textColor,
-                  fontSize: sizeStyles.fontSize,
+                  fontSize: lineStyles.fontSize,
                   fontWeight: isActive ? "600" : "500",
                   children: tab.label
                 }
@@ -692,7 +852,7 @@ var Tabs = ({
                 Text,
                 {
                   color: theme.colors.content.brand.primary,
-                  fontSize: sizeStyles.fontSize,
+                  fontSize: lineStyles.fontSize,
                   fontWeight: "500",
                   "aria-label": `${tab.counter} items`,
                   children: tab.counter

package/native/index.js.flow

@@ -0,0 +1,159 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import React from "react";
+declare interface TabItemType {
+  /**
+   * Unique identifier for the tab
+   */
+  id: string;
+
+  /**
+   * Display label for the tab
+   */
+  label: string;
+
+  /**
+   * Optional icon to display before the label
+   */
+  icon?: React.ReactNode;
+
+  /**
+   * Optional counter to display after the label
+   */
+  counter?: string | number;
+
+  /**
+   * Optional badge to display
+   */
+  badge?: boolean | string | number;
+
+  /**
+   * Whether the tab is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Accessible label for screen readers (defaults to label)
+   */
+  "aria-label"?: string;
+}
+declare interface TabsProps {
+  /**
+   * Array of tab items
+   */
+  tabs: TabItemType[];
+
+  /**
+   * ID of the currently active tab
+   */
+  activeTabId?: string;
+
+  /**
+   * Callback when a tab is selected
+   */
+  onChange?: (id: string) => void;
+
+  /**
+   * Size variant of the tabs
+   */
+  size?: "xl" | "lg" | "md" | "sm";
+
+  /**
+   * Visual variant of the tabs
+   */
+  variant?: "line" | "segmented";
+
+  /**
+   * Whether to align tabs to the left (only for line variant)
+   */
+  alignLeft?: boolean;
+
+  /**
+   * Whether the component should stretch to fill its container
+   */
+  stretched?: boolean;
+
+  /**
+   * Accessible label for the tab list
+   */
+  "aria-label"?: string;
+
+  /**
+   * ID of element that labels this tab list
+   */
+  "aria-labelledby"?: string;
+
+  /**
+   * Whether keyboard navigation should automatically activate tabs
+   */
+  activateOnFocus?: boolean;
+
+  /**
+   * HTML id attribute
+   */
+  id?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+}
+/**
+ * Tabs - An accessible tabbed interface 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)
+ *
+ * Variants:
+ * - "line" (default): Traditional underlined tabs
+ * - "segmented": Button-group style segmented control
+ */
+declare var Tabs: React.FC<TabsProps>;
+/**
+ * TabPanel - Container for tab content with proper accessibility attributes
+ * @example <TabPanel id="tab1" tabsId="my-tabs" hidden={activeTab !== 'tab1'}>
+ *   <p>Content for tab 1</p>
+ * </TabPanel>
+ */
+declare interface TabPanelProps {
+  /**
+   * ID matching the tab's id
+   */
+  id: string;
+
+  /**
+   * ID of the parent Tabs component
+   */
+  tabsId: string;
+
+  /**
+   * Whether the panel is hidden
+   */
+  hidden?: boolean;
+
+  /**
+   * Panel content
+   */
+  children: React.ReactNode;
+
+  /**
+   * Accessible label for the panel
+   */
+  "aria-label"?: string;
+
+  /**
+   * Test ID for testing frameworks
+   */
+  testID?: string;
+}
+declare var TabPanel: React.FC<TabPanelProps>;
+export type { TabItemType, TabPanelProps, TabsProps };
+declare export { TabPanel, Tabs };