@xsolla/xui-multi-select 0.99.0 → 0.100.0

package/README.md

@@ -1,43 +1,175 @@
-# @xsolla/xui-multi-select
+---
+title: Multi Select
+subtitle: A select for multiple selections.
+description: A cross-platform React multi-select component for choosing multiple options from a list.
+---
 
-Multi-value dropdown select with tag or text display of selected items.
+# Multi Select
+
+A cross-platform React multi-select component that allows users to select multiple options from a dropdown list with checkboxes.
 
 ## Installation
 
 ```bash
+npm install @xsolla/xui-multi-select
+# or
 yarn add @xsolla/xui-multi-select
 ```
 
-## Usage
+## Demo
+
+### Basic Multi Select
 
 ```tsx
+import * as React from 'react';
+import { MultiSelect } from '@xsolla/xui-multi-select';
+
+export default function BasicMultiSelect() {
+  const [selected, setSelected] = React.useState<string[]>([]);
+
+  return (
+    <MultiSelect
+      options={['React', 'Vue', 'Angular', 'Svelte']}
+      value={selected}
+      onChange={setSelected}
+      placeholder="Select frameworks"
+    />
+  );
+}
+```
+
+### With Label
+
+```tsx
+import * as React from 'react';
+import { MultiSelect } from '@xsolla/xui-multi-select';
+
+export default function LabeledMultiSelect() {
+  const [selected, setSelected] = React.useState<string[]>(['Marketing']);
+
+  return (
+    <MultiSelect
+      label="Departments"
+      options={['Engineering', 'Marketing', 'Sales', 'Design', 'HR']}
+      value={selected}
+      onChange={setSelected}
+      placeholder="Select departments"
+    />
+  );
+}
+```
+
+### Multi Select Sizes
+
+```tsx
+import * as React from 'react';
+import { MultiSelect } from '@xsolla/xui-multi-select';
+
+export default function MultiSelectSizes() {
+  const options = ['Option 1', 'Option 2', 'Option 3'];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <MultiSelect options={options} size="xs" placeholder="Extra Small" />
+      <MultiSelect options={options} size="sm" placeholder="Small" />
+      <MultiSelect options={options} size="md" placeholder="Medium" />
+      <MultiSelect options={options} size="lg" placeholder="Large" />
+      <MultiSelect options={options} size="xl" placeholder="Extra Large" />
+    </div>
+  );
+}
+```
+
+## Anatomy
+
+```jsx
 import { MultiSelect } from '@xsolla/xui-multi-select';
 
 <MultiSelect
-  label="Platforms"
-  options={[
-    { label: 'Web', value: 'web' },
-    { label: 'iOS', value: 'ios' },
-    { label: 'Android', value: 'android' },
-  ]}
-  value={selected}
-  onChange={setSelected}
+  options={['a', 'b', 'c']}   // Available options
+  value={selectedArray}        // Currently selected values
+  onChange={setSelected}       // Selection change handler
+  placeholder="Select..."      // Placeholder text
+  label="Label"                // Label above select
+  size="md"                     // Size variant
+  disabled={false}             // Disabled state
 />
 ```
 
-## Props
+## Examples
+
+### Form Integration
+
+```tsx
+import * as React from 'react';
+import { MultiSelect } from '@xsolla/xui-multi-select';
+import { Button } from '@xsolla/xui-button';
+
+export default function FormMultiSelect() {
+  const [skills, setSkills] = React.useState<string[]>([]);
+
+  const handleSubmit = () => {
+    console.log('Selected skills:', skills);
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 300 }}>
+      <MultiSelect
+        label="Skills"
+        options={['JavaScript', 'TypeScript', 'Python', 'Go', 'Rust', 'Java']}
+        value={skills}
+        onChange={setSkills}
+        placeholder="Select your skills"
+      />
+      <Button onPress={handleSubmit}>Submit</Button>
+    </div>
+  );
+}
+```
+
+### Disabled State
+
+```tsx
+import * as React from 'react';
+import { MultiSelect } from '@xsolla/xui-multi-select';
+
+export default function DisabledMultiSelect() {
+  return (
+    <MultiSelect
+      options={['Option 1', 'Option 2', 'Option 3']}
+      value={['Option 1']}
+      disabled
+      placeholder="Disabled select"
+    />
+  );
+}
+```
+
+## API Reference
 
 ### MultiSelect
 
+**MultiSelect Props:**
+
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `options` | `MultiSelectOption[]` | — | List of options (`{ label, value, disabled? }`) |
-| `value` | `MultiSelectValue` | — | Array of selected values |
-| `onChange` | `(values: MultiSelectValue) => void` | — | Called when the selection changes |
-| `placeholder` | `string` | `"Select"` | Placeholder text when nothing is selected |
-| `label` | `string` | — | Label displayed above the control |
-| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size of the control |
-| `state` | `"default" \| "hover" \| "focus" \| "disable" \| "error"` | — | Visual state |
-| `disabled` | `boolean` | `false` | Disables the control |
-| `errorMessage` | `string` | — | Error message shown below the control |
-| `variant` | `"tag" \| "text"` | `"tag"` | Display selected items as tags or comma-separated text |
+| :--- | :--- | :------ | :---------- |
+| options | `string[]` | - | **Required.** Available options. |
+| value | `string[]` | `[]` | Currently selected values. |
+| onChange | `(value: string[]) => void` | - | Selection change handler. |
+| placeholder | `string` | - | Placeholder when nothing selected. |
+| size | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Component size. |
+| label | `string` | - | Label above select. |
+| disabled | `boolean` | `false` | Disabled state. |
+
+## Display Behavior
+
+- When no items selected: Shows placeholder
+- When items selected: Shows "N selected" text
+- Dropdown shows checkboxes for each option
+- Checked items are visually indicated
+
+## Accessibility
+
+- Uses checkbox pattern for selections
+- Dropdown is keyboard navigable
+- Selection state announced to screen readers

package/package.json

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