@xsolla/xui-multi-select 0.140.0-pr246.1776914902 → 0.141.0

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/native/index.js

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(index_exports);
 // src/MultiSelect.tsx
 var import_react10 = require("react");
 
-// ../../foundation/primitives-native/src/Box.tsx
+// ../primitives-native/src/Box.tsx
 var import_react_native = require("react-native");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Box = ({
@@ -211,7 +211,7 @@ var Box = ({
   );
 };
 
-// ../../foundation/primitives-native/src/Text.tsx
+// ../primitives-native/src/Text.tsx
 var import_react_native2 = require("react-native");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var roleMap = {
@@ -274,7 +274,7 @@ var Text = ({
   );
 };
 
-// ../../foundation/primitives-native/src/Icon.tsx
+// ../primitives-native/src/Icon.tsx
 var import_react = __toESM(require("react"));
 var import_react_native3 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -305,7 +305,7 @@ var import_xui_core4 = require("@xsolla/xui-core");
 var import_react8 = require("react");
 var import_xui_core3 = require("@xsolla/xui-core");
 
-// ../../foundation/icons-base/dist/web/index.mjs
+// ../icons-base/dist/web/index.mjs
 var import_styled_components = __toESM(require("styled-components"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -1097,24 +1097,24 @@ var import_styled_components5 = __toESM(require("styled-components"), 1);
 var import_jsx_runtime729 = require("react/jsx-runtime");
 var import_xui_core = require("@xsolla/xui-core");
 
-// ../../foundation/icons/dist/web/index.mjs
+// ../icons/dist/web/index.mjs
 var import_react4 = __toESM(require("react"), 1);
 var import_styled_components2 = __toESM(require("styled-components"), 1);
 var import_jsx_runtime725 = require("react/jsx-runtime");
 
-// ../../../node_modules/lucide-react/dist/esm/createLucideIcon.js
+// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 var import_react3 = require("react");
 
-// ../../../node_modules/lucide-react/dist/esm/shared/src/utils.js
+// ../../node_modules/lucide-react/dist/esm/shared/src/utils.js
 var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 var mergeClasses = (...classes) => classes.filter((className, index3, array) => {
   return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index3;
 }).join(" ").trim();
 
-// ../../../node_modules/lucide-react/dist/esm/Icon.js
+// ../../node_modules/lucide-react/dist/esm/Icon.js
 var import_react2 = require("react");
 
-// ../../../node_modules/lucide-react/dist/esm/defaultAttributes.js
+// ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
 var defaultAttributes = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
@@ -1127,7 +1127,7 @@ var defaultAttributes = {
   strokeLinejoin: "round"
 };
 
-// ../../../node_modules/lucide-react/dist/esm/Icon.js
+// ../../node_modules/lucide-react/dist/esm/Icon.js
 var Icon2 = (0, import_react2.forwardRef)(
   ({
     color = "currentColor",
@@ -1159,7 +1159,7 @@ var Icon2 = (0, import_react2.forwardRef)(
   }
 );
 
-// ../../../node_modules/lucide-react/dist/esm/createLucideIcon.js
+// ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
   const Component = (0, import_react3.forwardRef)(
     ({ className, ...props }, ref) => (0, import_react3.createElement)(Icon2, {
@@ -1173,13 +1173,13 @@ var createLucideIcon = (iconName, iconNode) => {
   return Component;
 };
 
-// ../../../node_modules/lucide-react/dist/esm/icons/x.js
+// ../../node_modules/lucide-react/dist/esm/icons/x.js
 var X = createLucideIcon("X", [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ]);
 
-// ../../foundation/icons/dist/web/index.mjs
+// ../icons/dist/web/index.mjs
 var import_jsx_runtime726 = require("react/jsx-runtime");
 function memoize(fn) {
   var cache = {};