@xsolla/xui-tabs 0.141.0 → 0.141.1

package/README.md

@@ -1,447 +0,0 @@
-# Tabs
-
-A cross-platform React tabs component for organizing content into multiple panels that users can switch between. Implements WAI-ARIA tablist pattern for accessibility.
-
-**Variants:**
-- **Line** (default): Traditional underlined tabs with bottom border indicator
-- **Segmented**: Button-group style segmented control with sliding active indicator
-
-## Installation
-
-```bash
-npm install @xsolla/xui-tabs
-# or
-yarn add @xsolla/xui-tabs
-```
-
-## Demo
-
-### Basic Tabs
-
-```tsx
-import * as React from 'react';
-import { Tabs, TabPanel } from '@xsolla/xui-tabs';
-
-export default function BasicTabs() {
-  const [activeTab, setActiveTab] = React.useState('tab1');
-
-  const tabs = [
-    { id: 'tab1', label: 'Overview' },
-    { id: 'tab2', label: 'Features' },
-    { id: 'tab3', label: 'Pricing' },
-  ];
-
-  return (
-    <div>
-      <Tabs
-        id="basic-tabs"
-        tabs={tabs}
-        activeTabId={activeTab}
-        onChange={setActiveTab}
-      />
-      <TabPanel id="tab1" tabsId="basic-tabs" hidden={activeTab !== 'tab1'}>
-        <p>Overview content goes here.</p>
-      </TabPanel>
-      <TabPanel id="tab2" tabsId="basic-tabs" hidden={activeTab !== 'tab2'}>
-        <p>Features content goes here.</p>
-      </TabPanel>
-      <TabPanel id="tab3" tabsId="basic-tabs" hidden={activeTab !== 'tab3'}>
-        <p>Pricing content goes here.</p>
-      </TabPanel>
-    </div>
-  );
-}
-```
-
-### Tabs with Icons
-
-```tsx
-import * as React from 'react';
-import { Tabs } from '@xsolla/xui-tabs';
-import { Home, User, Settings } from '@xsolla/xui-icons';
-
-export default function TabsWithIcons() {
-  const [activeTab, setActiveTab] = React.useState('home');
-
-  const tabs = [
-    { id: 'home', label: 'Home', icon: <Home size={16} /> },
-    { id: 'profile', label: 'Profile', icon: <User size={16} /> },
-    { id: 'settings', label: 'Settings', icon: <Settings size={16} /> },
-  ];
-
-  return (
-    <Tabs
-      tabs={tabs}
-      activeTabId={activeTab}
-      onChange={setActiveTab}
-    />
-  );
-}
-```
-
-### Tabs with Counter
-
-```tsx
-import * as React from 'react';
-import { Tabs } from '@xsolla/xui-tabs';
-
-export default function TabsWithCounter() {
-  const [activeTab, setActiveTab] = React.useState('inbox');
-
-  const tabs = [
-    { id: 'inbox', label: 'Inbox', counter: 12 },
-    { id: 'sent', label: 'Sent', counter: 5 },
-    { id: 'drafts', label: 'Drafts', counter: 3 },
-    { id: 'spam', label: 'Spam', badge: true },
-  ];
-
-  return (
-    <Tabs
-      tabs={tabs}
-      activeTabId={activeTab}
-      onChange={setActiveTab}
-    />
-  );
-}
-```
-
-### Tabs Sizes
-
-```tsx
-import * as React from 'react';
-import { Tabs } from '@xsolla/xui-tabs';
-
-export default function TabsSizes() {
-  const tabs = [
-    { id: 'a', label: 'Tab A' },
-    { id: 'b', label: 'Tab B' },
-    { id: 'c', label: 'Tab C' },
-  ];
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-      <Tabs tabs={tabs} activeTabId="a" size="sm" />
-      <Tabs tabs={tabs} activeTabId="a" size="md" />
-      <Tabs tabs={tabs} activeTabId="a" size="lg" />
-      <Tabs tabs={tabs} activeTabId="a" size="xl" />
-    </div>
-  );
-}
-```
-
-### Segmented Variant
-
-A button-group style segmented control with a sliding active indicator animation.
-
-```tsx
-import * as React from 'react';
-import { Tabs } from '@xsolla/xui-tabs';
-
-export default function SegmentedTabs() {
-  const [activeTab, setActiveTab] = React.useState('daily');
-
-  const tabs = [
-    { id: 'daily', label: 'Daily' },
-    { id: 'weekly', label: 'Weekly' },
-    { id: 'monthly', label: 'Monthly' },
-  ];
-
-  return (
-    <Tabs
-      tabs={tabs}
-      activeTabId={activeTab}
-      onChange={setActiveTab}
-      variant="segmented"
-    />
-  );
-}
-```
-
-### Stretched Tabs
-
-Use the `stretched` prop to make tabs fill the entire container width.
-
-```tsx
-import * as React from 'react';
-import { Tabs } from '@xsolla/xui-tabs';
-
-export default function StretchedTabs() {
-  const [activeTab, setActiveTab] = React.useState('tab1');
-
-  const tabs = [
-    { id: 'tab1', label: 'First' },
-    { id: 'tab2', label: 'Second' },
-    { id: 'tab3', label: 'Third' },
-  ];
-
-  return (
-    <div style={{ width: '100%' }}>
-      {/* Line variant stretched */}
-      <Tabs
-        tabs={tabs}
-        activeTabId={activeTab}
-        onChange={setActiveTab}
-        stretched
-      />
-
-      {/* Segmented variant stretched */}
-      <Tabs
-        tabs={tabs}
-        activeTabId={activeTab}
-        onChange={setActiveTab}
-        variant="segmented"
-        stretched
-      />
-    </div>
-  );
-}
-```
-
-## Anatomy
-
-Import the components and compose them:
-
-```jsx
-import { Tabs, TabPanel } from '@xsolla/xui-tabs';
-
-// Tab list
-<Tabs
-  id="my-tabs"                // Unique ID for ARIA
-  tabs={tabItems}             // Array of tab definitions
-  activeTabId={activeId}      // Currently active tab
-  onChange={handleChange}     // Tab selection handler
-  size="md"                   // Size variant
-  variant="line"              // Visual variant: "line" | "segmented"
-  stretched={false}           // Fill container width
-  alignLeft={true}            // Alignment (line variant only)
-  activateOnFocus={true}      // Auto-activate on focus
-/>
-
-// Tab panels
-<TabPanel
-  id="tab-id"                 // Matches tab.id
-  tabsId="my-tabs"            // Parent Tabs id
-  hidden={!isActive}          // Visibility control
->
-  Panel content
-</TabPanel>
-```
-
-## Examples
-
-### Disabled Tab
-
-```tsx
-import * as React from 'react';
-import { Tabs } from '@xsolla/xui-tabs';
-
-export default function DisabledTab() {
-  const [activeTab, setActiveTab] = React.useState('active');
-
-  const tabs = [
-    { id: 'active', label: 'Active Tab' },
-    { id: 'disabled', label: 'Disabled Tab', disabled: true },
-    { id: 'another', label: 'Another Tab' },
-  ];
-
-  return (
-    <Tabs
-      tabs={tabs}
-      activeTabId={activeTab}
-      onChange={setActiveTab}
-    />
-  );
-}
-```
-
-### Manual Activation
-
-```tsx
-import * as React from 'react';
-import { Tabs } from '@xsolla/xui-tabs';
-
-export default function ManualActivation() {
-  const [activeTab, setActiveTab] = React.useState('tab1');
-
-  const tabs = [
-    { id: 'tab1', label: 'First' },
-    { id: 'tab2', label: 'Second' },
-    { id: 'tab3', label: 'Third' },
-  ];
-
-  return (
-    <div>
-      <p>Use Arrow keys to navigate, Enter/Space to activate</p>
-      <Tabs
-        tabs={tabs}
-        activeTabId={activeTab}
-        onChange={setActiveTab}
-        activateOnFocus={false}
-      />
-    </div>
-  );
-}
-```
-
-### Full Example with Content
-
-```tsx
-import * as React from 'react';
-import { Tabs, TabPanel } from '@xsolla/xui-tabs';
-import { Settings } from '@xsolla/xui-icons';
-import { LayoutDashboard, BarChart3, FileText } from '@xsolla/xui-icons-base';
-
-export default function FullTabsExample() {
-  const [activeTab, setActiveTab] = React.useState('dashboard');
-
-  const tabs = [
-    { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard size={16} /> },
-    { id: 'analytics', label: 'Analytics', icon: <BarChart3 size={16} />, counter: 5 },
-    { id: 'reports', label: 'Reports', icon: <FileText size={16} /> },
-    { id: 'settings', label: 'Settings', icon: <Settings size={16} /> },
-  ];
-
-  return (
-    <div style={{ width: '100%' }}>
-      <Tabs
-        id="main-tabs"
-        tabs={tabs}
-        activeTabId={activeTab}
-        onChange={setActiveTab}
-        size="md"
-      />
-
-      <div style={{ padding: 24, border: '1px solid #eee', borderTop: 'none' }}>
-        <TabPanel id="dashboard" tabsId="main-tabs" hidden={activeTab !== 'dashboard'}>
-          <h3>Dashboard</h3>
-          <p>Welcome to your dashboard overview.</p>
-        </TabPanel>
-
-        <TabPanel id="analytics" tabsId="main-tabs" hidden={activeTab !== 'analytics'}>
-          <h3>Analytics</h3>
-          <p>View your analytics and metrics here.</p>
-        </TabPanel>
-
-        <TabPanel id="reports" tabsId="main-tabs" hidden={activeTab !== 'reports'}>
-          <h3>Reports</h3>
-          <p>Generate and view reports.</p>
-        </TabPanel>
-
-        <TabPanel id="settings" tabsId="main-tabs" hidden={activeTab !== 'settings'}>
-          <h3>Settings</h3>
-          <p>Configure your preferences.</p>
-        </TabPanel>
-      </div>
-    </div>
-  );
-}
-```
-
-## API Reference
-
-### Tabs
-
-The tab list component.
-
-**Tabs Props:**
-
-| Prop | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| tabs | `TabItemType[]` | - | **Required.** Array of tab definitions. |
-| activeTabId | `string` | - | Currently active tab ID. |
-| onChange | `(id: string) => void` | - | Callback when tab selection changes. |
-| size | `"xl" \| "lg" \| "md" \| "sm"` | `"md"` | Size of the tabs. |
-| variant | `"line" \| "segmented"` | `"line"` | Visual variant. Line shows underlined tabs; segmented shows button-group style. |
-| stretched | `boolean` | `false` | Whether to stretch tabs to fill container width. |
-| alignLeft | `boolean` | `true` | Left vs center alignment (line variant only). |
-| activateOnFocus | `boolean` | `true` | Auto-activate tab on focus. |
-| id | `string` | - | Unique ID for ARIA association. |
-| aria-label | `string` | - | Accessible label for tab list. |
-| aria-labelledby | `string` | - | ID of labeling element. |
-| testID | `string` | - | Test identifier. |
-
-**TabItemType:**
-
-```typescript
-interface TabItemType {
-  id: string;               // Unique tab identifier
-  label: string;            // Display label
-  icon?: ReactNode;         // Optional icon
-  counter?: string | number; // Optional counter badge
-  badge?: boolean | string | number; // Optional badge
-  disabled?: boolean;       // Whether tab is disabled
-  "aria-label"?: string;    // Custom accessible label
-}
-```
-
----
-
-### TabPanel
-
-Container for tab content.
-
-**TabPanel Props:**
-
-| Prop | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| id | `string` | - | **Required.** Matches corresponding tab.id. |
-| tabsId | `string` | - | **Required.** Parent Tabs component id. |
-| hidden | `boolean` | - | Whether panel is hidden. |
-| children | `ReactNode` | - | Panel content. |
-| aria-label | `string` | - | Accessible label. |
-| testID | `string` | - | Test identifier. |
-
-## Keyboard Navigation
-
-| Key | Action |
-| :-- | :----- |
-| Arrow Right/Down | Move to next enabled tab |
-| Arrow Left/Up | Move to previous enabled tab |
-| Home | Jump to first enabled tab |
-| End | Jump to last enabled tab |
-| Enter/Space | Activate tab (when activateOnFocus is false) |
-
-## Theming
-
-Tabs uses the design system theme for colors:
-
-### Line Variant
-
-```typescript
-// Colors accessed via theme
-theme.colors.content.primary     // Active tab text
-theme.colors.content.tertiary    // Inactive tab text
-theme.colors.border.primary      // Active tab indicator (bottom border)
-theme.colors.border.secondary    // Container bottom border
-theme.colors.overlay.mono        // Hover background
-```
-
-### Segmented Variant
-
-```typescript
-// Colors accessed via theme
-theme.colors.control.segmented.bg         // Container background
-theme.colors.control.segmented.bgHover    // Tab hover background
-theme.colors.control.segmented.bgActive   // Active tab indicator background
-theme.colors.control.segmented.textActive // Active tab text color
-theme.colors.control.text.primary         // Inactive tab text
-theme.colors.control.text.disable         // Disabled tab text
-```
-
-## Accessibility
-
-- Implements WAI-ARIA tablist pattern
-- Uses `role="tablist"`, `role="tab"`, `role="tabpanel"`
-- `aria-selected` indicates active tab
-- `aria-controls` links tabs to panels
-- `aria-labelledby` links panels to tabs
-- Full keyboard navigation support
-- Focus management follows ARIA best practices
-- Segmented variant sliding indicator is marked with `aria-hidden`
-
-## Platform Support
-
-Both variants support web and React Native platforms:
-
-- **Web**: Segmented variant includes smooth sliding animation for the active indicator
-- **React Native**: Falls back to static background without animation