@xsolla/xui-b2b-accordion 0.148.0 → 0.148.2

package/README.md

@@ -0,0 +1,124 @@
+# B2B Accordion
+
+A stacked list of `Collapsible` items with coordinated open/close behaviour. By default only one item can be open at a time (single mode). Use for FAQ sections, setup guides, or any ordered list of expandable content.
+
+For a single standalone expandable section, use `@xsolla/xui-b2b-collapsible` instead.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-b2b-accordion
+# or
+yarn add @xsolla/xui-b2b-accordion
+```
+
+> `@xsolla/xui-b2b-collapsible` is a peer dependency and is installed automatically.
+
+## Demo
+
+### Setup Guide Pattern
+
+```tsx
+import React from 'react';
+import { Accordion, type AccordionItem } from '@xsolla/xui-b2b-accordion';
+import { Status } from '@xsolla/xui-status';
+
+const items: AccordionItem[] = [
+  {
+    key: 'template',
+    title: 'Create and review the template of your game store page',
+    trailing: <Status palette="success" size="md" labelType="dot-color">Done</Status>,
+    content: <p>Content here.</p>,
+  },
+  {
+    key: 'tips',
+    title: 'See tips and tricks for your game store',
+    trailing: <Status palette="warning" size="md" labelType="dot-color">In progress</Status>,
+    content: <p>Content here.</p>,
+  },
+  {
+    key: 'keys',
+    title: 'Set up game keys to sell on your game store page',
+    trailing: <Status palette="default" size="md" labelType="dot-color">Pending</Status>,
+    content: <p>Content here.</p>,
+  },
+];
+
+<Accordion items={items} defaultOpenKeys={['template']} />
+```
+
+### FAQ Pattern
+
+```tsx
+const items: AccordionItem[] = [
+  {
+    key: 'what',
+    title: 'What is Xsolla?',
+    caption: 'About',
+    content: <p>Xsolla is a global video game commerce company.</p>,
+  },
+  {
+    key: 'sdk',
+    title: 'How do I integrate the SDK?',
+    caption: 'Integration',
+    content: <p>Follow the integration guide in the developer docs.</p>,
+  },
+];
+
+<Accordion items={items} defaultOpenKeys={['what']} />
+```
+
+### Multiple Open Items
+
+```tsx
+// Allow more than one item open at the same time
+<Accordion items={items} multiple defaultOpenKeys={['what', 'payments']} />
+```
+
+### Controlled
+
+```tsx
+import React, { useState } from 'react';
+
+const [openKeys, setOpenKeys] = useState<string[]>(['what']);
+
+<Accordion
+  items={items}
+  multiple
+  openKeys={openKeys}
+  onOpenChange={setOpenKeys}
+/>
+```
+
+## API Reference
+
+### Accordion
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `items` | `AccordionItem[]` | — | **Required.** Array of item definitions. |
+| `multiple` | `boolean` | `false` | Allow more than one item open simultaneously. |
+| `defaultOpenKeys` | `string[]` | `[]` | Keys open on first render (uncontrolled). |
+| `openKeys` | `string[]` | — | Controlled open keys. |
+| `onOpenChange` | `(keys: string[]) => void` | — | Called when open keys change. |
+| `className` | `string` | — | CSS class applied to the root wrapper. |
+| `themeMode` | `string` | — | Override the global theme mode. |
+| `themeProductContext` | `string` | — | Override the global product context. |
+
+### AccordionItem
+
+| Field | Type | Description |
+| :---- | :--- | :---------- |
+| `key` | `string` | **Required.** Unique identifier used for open/close tracking. |
+| `title` | `ReactNode` | **Required.** Title text or node in the trigger row. |
+| `content` | `ReactNode` | **Required.** Body content shown when expanded. |
+| `caption` | `ReactNode` | Secondary text below the title (e.g. category label). |
+| `trailing` | `ReactNode` | Content to the right of the text, before the chevron (e.g. `Status`). |
+
+## Behaviour
+
+- Items always use `view="white-surface"` — the Accordion composes `Collapsible` internally.
+- In **single mode** (default), opening an item closes all others.
+- In **multiple mode**, items toggle independently.
+- Controlled mode (`openKeys` + `onOpenChange`) overrides all internal state.
+- Panel content is always in the DOM (hidden via CSS `grid-template-rows: 0fr`) — no mount/unmount on toggle.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-b2b-accordion",
-  "version": "0.148.0",
+  "version": "0.148.2",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-b2b-collapsible": "0.148.0",
-    "@xsolla/xui-core": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0"
+    "@xsolla/xui-b2b-collapsible": "0.148.2",
+    "@xsolla/xui-core": "0.148.2",
+    "@xsolla/xui-primitives-core": "0.148.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",