@xsolla/xui-segmented 0.99.0 → 0.100.0

package/README.md

@@ -1,47 +1,234 @@
-# @xsolla/xui-segmented
+---
+title: Segmented
+subtitle: A control for switching between options.
+description: A cross-platform React segmented control for switching between related views or filters.
+---
 
-Segmented control for switching between related views or filter options.
+# Segmented
+
+A cross-platform React segmented control component for switching between related views or filters. Similar to iOS's UISegmentedControl.
 
 ## Installation
 
 ```bash
+npm install @xsolla/xui-segmented
+# or
 yarn add @xsolla/xui-segmented
 ```
 
-## Usage
+## Demo
+
+### Basic Segmented
+
+```tsx
+import * as React from 'react';
+import { Segmented } from '@xsolla/xui-segmented';
+
+export default function BasicSegmented() {
+  const [active, setActive] = React.useState('day');
+
+  return (
+    <Segmented
+      items={[
+        { id: 'day', label: 'Day' },
+        { id: 'week', label: 'Week' },
+        { id: 'month', label: 'Month' },
+      ]}
+      activeId={active}
+      onChange={setActive}
+    />
+  );
+}
+```
+
+### With Icons
 
 ```tsx
+import * as React from 'react';
+import { Segmented } from '@xsolla/xui-segmented';
+import { Grid, List } from '@xsolla/xui-icons-base';
+
+export default function IconSegmented() {
+  const [active, setActive] = React.useState('grid');
+
+  return (
+    <Segmented
+      items={[
+        { id: 'grid', label: 'Grid', icon: <Grid size={16} /> },
+        { id: 'list', label: 'List', icon: <List size={16} /> },
+      ]}
+      activeId={active}
+      onChange={setActive}
+    />
+  );
+}
+```
+
+### Full Width
+
+```tsx
+import * as React from 'react';
+import { Segmented } from '@xsolla/xui-segmented';
+
+export default function FullWidthSegmented() {
+  const [active, setActive] = React.useState('all');
+
+  return (
+    <div style={{ width: 400 }}>
+      <Segmented
+        fullWidth={true}
+        items={[
+          { id: 'all', label: 'All' },
+          { id: 'active', label: 'Active' },
+          { id: 'completed', label: 'Completed' },
+        ]}
+        activeId={active}
+        onChange={setActive}
+      />
+    </div>
+  );
+}
+```
+
+## Anatomy
+
+```jsx
 import { Segmented } from '@xsolla/xui-segmented';
 
 <Segmented
-  items={[
-    { id: 'day', label: 'Day' },
-    { id: 'week', label: 'Week' },
-    { id: 'month', label: 'Month' },
+  items={[                       // Array of segment items
+    { id: 'a', label: 'A' },
+    { id: 'b', label: 'B' },
   ]}
-  activeId="day"
-  onChange={(id) => console.log(id)}
+  activeId="a"                   // Currently active item ID
+  onChange={handleChange}        // Selection change handler
+  size="md"                       // Size variant
+  stroke={false}                 // Show border around container
+  fullWidth={false}              // Expand to container width
 />
 ```
 
-## Props
+## Examples
+
+### Segmented Sizes
+
+```tsx
+import * as React from 'react';
+import { Segmented } from '@xsolla/xui-segmented';
+
+export default function SegmentedSizes() {
+  const items = [
+    { id: 'a', label: 'Option A' },
+    { id: 'b', label: 'Option B' },
+    { id: 'c', label: 'Option C' },
+  ];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Segmented size="sm" items={items} activeId="a" />
+      <Segmented size="md" items={items} activeId="a" />
+      <Segmented size="lg" items={items} activeId="a" />
+      <Segmented size="xl" items={items} activeId="a" />
+    </div>
+  );
+}
+```
+
+### With Stroke Border
+
+```tsx
+import * as React from 'react';
+import { Segmented } from '@xsolla/xui-segmented';
+
+export default function StrokeSegmented() {
+  const [active, setActive] = React.useState('left');
+
+  return (
+    <Segmented
+      stroke={true}
+      items={[
+        { id: 'left', label: 'Left' },
+        { id: 'center', label: 'Center' },
+        { id: 'right', label: 'Right' },
+      ]}
+      activeId={active}
+      onChange={setActive}
+    />
+  );
+}
+```
+
+### With Disabled Items
+
+```tsx
+import * as React from 'react';
+import { Segmented } from '@xsolla/xui-segmented';
+
+export default function DisabledItemSegmented() {
+  const [active, setActive] = React.useState('enabled1');
+
+  return (
+    <Segmented
+      items={[
+        { id: 'enabled1', label: 'Enabled' },
+        { id: 'disabled', label: 'Disabled', disabled: true },
+        { id: 'enabled2', label: 'Enabled' },
+      ]}
+      activeId={active}
+      onChange={setActive}
+    />
+  );
+}
+```
+
+## API Reference
 
 ### Segmented
 
+**Segmented Props:**
+
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `SegmentedItemType[]` | — | Array of segment items (required) |
-| `activeId` | `string` | — | ID of the currently active segment |
-| `onChange` | `(id: string) => void` | — | Callback when a segment is selected |
-| `size` | `'xl' \| 'lg' \| 'md' \| 'sm'` | `'md'` | Size variant |
-| `stroke` | `boolean` | `false` | Adds a border around the container |
-| `fullWidth` | `boolean` | `false` | Stretches the control to fill its container |
-
-#### SegmentedItemType
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `id` | `string` | Unique identifier |
-| `label` | `string` | Display text |
-| `icon` | `React.ReactNode` | Optional icon |
-| `disabled` | `boolean` | Disables this segment |
+| :--- | :--- | :------ | :---------- |
+| items | `SegmentedItemType[]` | - | **Required.** Array of segment items. |
+| activeId | `string` | - | ID of the currently active item. |
+| onChange | `(id: string) => void` | - | Selection change handler. |
+| size | `"xl" \| "lg" \| "md" \| "sm"` | `"md"` | Size variant. |
+| stroke | `boolean` | `false` | Show border around container. |
+| fullWidth | `boolean` | `false` | Expand segments to fill container width. |
+| id | `string` | - | HTML id attribute. |
+| testID | `string` | - | Test identifier. |
+
+**SegmentedItemType:**
+
+```typescript
+interface SegmentedItemType {
+  id: string;             // Unique identifier
+  label: string;          // Display text
+  icon?: ReactNode;       // Optional icon
+  disabled?: boolean;     // Disabled state
+  "aria-label"?: string;  // Accessible label
+}
+```
+
+## Keyboard Navigation
+
+| Key | Action |
+| :-- | :----- |
+| Arrow Right/Down | Move to next item |
+| Arrow Left/Up | Move to previous item |
+| Enter/Space | Select focused item |
+
+## Behavior
+
+- Active segment has elevated background
+- Disabled segments show reduced opacity
+- Keyboard navigation wraps around
+- Hover effect on non-active segments
+
+## Accessibility
+
+- Uses `role="radiogroup"` on container
+- Each segment has `role="radio"`
+- `aria-checked` indicates selection state
+- `aria-disabled` for disabled items
+- Roving tabindex for keyboard navigation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-segmented",
-  "version": "0.99.0",
+  "version": "0.100.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,9 +10,9 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-badge": "0.99.0",
-    "@xsolla/xui-core": "0.99.0",
-    "@xsolla/xui-primitives-core": "0.99.0"
+    "@xsolla/xui-badge": "0.100.0",
+    "@xsolla/xui-core": "0.100.0",
+    "@xsolla/xui-primitives-core": "0.100.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",