@xsolla/xui-multi-select 0.148.0 → 0.148.1

package/README.md

@@ -0,0 +1,169 @@
+# 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
+```
+
+## 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
+  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
+/>
+```
+
+## 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 | `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.148.0",
+  "version": "0.148.1",
   "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.148.0",
-    "@xsolla/xui-core": "0.148.0",
-    "@xsolla/xui-dropdown": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0"
+    "@xsolla/xui-checkbox": "0.148.1",
+    "@xsolla/xui-core": "0.148.1",
+    "@xsolla/xui-dropdown": "0.148.1",
+    "@xsolla/xui-primitives-core": "0.148.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",