@xsolla/xui-segmented 0.148.0 → 0.148.2

package/README.md

@@ -0,0 +1,202 @@
+# 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
+```
+
+## 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={[                       // Array of segment items
+    { id: 'a', label: 'A' },
+    { id: 'b', label: 'B' },
+  ]}
+  activeId="a"                   // Currently active item ID
+  onChange={handleChange}        // Selection change handler
+  size="md"                      // Size variant
+  fullWidth={false}              // Expand to container width
+/>
+```
+
+## 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 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[]` | - | **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. |
+| 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 with smooth sliding animation
+- 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.148.0",
+  "version": "0.148.2",
   "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.148.0",
-    "@xsolla/xui-core": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0"
+    "@xsolla/xui-badge": "0.148.2",
+    "@xsolla/xui-core": "0.148.2",
+    "@xsolla/xui-primitives-core": "0.148.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",