@xsolla/xui-b2b-collapsible 0.148.0 → 0.148.2

package/README.md

@@ -0,0 +1,192 @@
+# B2B Collapsible
+
+A single expandable section with animated open/close. Use for "Show more" patterns, technical details, or any card-level secondary content. For FAQ sections or stacked expandable lists, use `@xsolla/xui-b2b-accordion` instead.
+
+> **Migrating from `@xsolla/publisher-account-core`?** See the [prop migration table](#migrating-from-publisher-account-core) below.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-b2b-collapsible
+# or
+yarn add @xsolla/xui-b2b-collapsible
+```
+
+## Demo
+
+### Basic Usage
+
+```tsx
+import React from 'react';
+import { Collapsible } from '@xsolla/xui-b2b-collapsible';
+
+<Collapsible
+  title="Create and review the template of your game store page"
+  caption="Setup"
+  view="white-surface"
+>
+  <p>Content goes here.</p>
+</Collapsible>
+```
+
+### Three View Variants
+
+```tsx
+// No background — shows a bottom border divider
+<Collapsible title="Without surface" view="without-surface">
+  <p>Content</p>
+</Collapsible>
+
+// White card background with border radius
+<Collapsible title="White surface" view="white-surface">
+  <p>Content</p>
+</Collapsible>
+
+// Grey tinted card background
+<Collapsible title="Grey surface" view="grey-surface">
+  <p>Content</p>
+</Collapsible>
+```
+
+### Open by Default
+
+```tsx
+<Collapsible title="Pre-expanded" view="white-surface" defaultOpen>
+  <p>Visible on first render.</p>
+</Collapsible>
+```
+
+### With Icon Slot (Left)
+
+The `icon` slot is a pass-through — wrap with `IconWrapper` or use a `Checkbox` directly.
+
+```tsx
+import { IconWrapper } from '@xsolla/xui-icon-wrapper';
+import { ReverseLeft } from '@xsolla/xui-icons-base';
+import { Checkbox } from '@xsolla/xui-checkbox';
+
+// Icon with grey rounded background
+<Collapsible
+  title="Setup"
+  view="white-surface"
+  icon={
+    <IconWrapper size="md" shape="smooth">
+      <ReverseLeft />
+    </IconWrapper>
+  }
+>
+  <p>Content</p>
+</Collapsible>
+
+// Checkbox as the left slot
+<Collapsible
+  title="Mark as complete"
+  view="white-surface"
+  icon={<Checkbox size="md" checked={checked} onChange={(e) => setChecked(e.target.checked)} />}
+>
+  <p>Content</p>
+</Collapsible>
+```
+
+### With Trailing Slot (Right)
+
+```tsx
+import { Status } from '@xsolla/xui-status';
+
+<Collapsible
+  title="Publish your game store page"
+  caption="Publishing"
+  view="white-surface"
+  trailing={<Status palette="warning" size="md" labelType="dot-color">In progress</Status>}
+>
+  <p>Content</p>
+</Collapsible>
+```
+
+### Controlled
+
+```tsx
+import React, { useState } from 'react';
+
+const [open, setOpen] = useState(false);
+
+<Collapsible
+  title="Controlled"
+  view="white-surface"
+  open={open}
+  onOpenChange={setOpen}
+>
+  <p>Content</p>
+</Collapsible>
+```
+
+## API Reference
+
+### Collapsible
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `title` | `ReactNode` | — | **Required.** Title text or node in the trigger row. |
+| `children` | `ReactNode` | — | **Required.** Body content shown when expanded. |
+| `view` | `"without-surface" \| "white-surface" \| "grey-surface"` | `"without-surface"` | Visual surface style. |
+| `caption` | `ReactNode` | — | Secondary text rendered below the title. |
+| `icon` | `ReactNode` | — | Optional slot at the left of the trigger. Consumer controls styling (use `IconWrapper` or `Checkbox`). |
+| `trailing` | `ReactNode` | — | Optional slot to the right of the text, before the chevron (e.g. `Status`). |
+| `defaultOpen` | `boolean` | `false` | Initial open state for uncontrolled usage. |
+| `open` | `boolean` | — | Controlled open state. |
+| `onOpenChange` | `(open: boolean) => void` | — | Called when open state changes. |
+| `className` | `string` | — | CSS class applied to the root element. |
+| `aria-label` | `string` | auto | Accessible label for the trigger button. Defaults to `title` when it is a string. |
+| `themeMode` | `string` | — | Override the global theme mode for this component. |
+| `themeProductContext` | `string` | — | Override the global product context for this component. |
+
+### Deprecated Props (migrating from `@xsolla/publisher-account-core`)
+
+These props are still accepted but will log a TypeScript `@deprecated` warning in your IDE.
+
+| Deprecated prop | Use instead | Notes |
+| :-------------- | :---------- | :---- |
+| `onChange` | `onOpenChange` | Same signature `(isOpen: boolean) => void` |
+| `statusIcon` | `trailing` | Same shape |
+| `description` | `caption` | Covers the `lg` size `description` prop from the legacy API |
+
+Props with no equivalent in the new API (intentional redesign): `backgroundColor`, `size`, `childContentPadding`, `label` (sm size), `openingState` (use `open` / `defaultOpen`).
+
+## Accessibility
+
+- Trigger has `role="button"`, `tabIndex={0}`, and `aria-expanded`.
+- Responds to Enter and Space key events.
+- Panel content is always in the DOM (hidden via `grid-template-rows: 0fr`) for screen-reader access.
+
+## Migrating from `@xsolla/publisher-account-core`
+
+```tsx
+// BEFORE
+import { Collapsible } from '@xsolla/publisher-account-core';
+
+<Collapsible
+  title="Setup"
+  description="Step 1 of 3"
+  backgroundColor="primary"
+  size="lg"
+  statusIcon={<CheckIcon />}
+  openingState={false}
+  onChange={(isOpen) => console.log(isOpen)}
+>
+  content
+</Collapsible>
+
+// AFTER
+import { Collapsible } from '@xsolla/xui-b2b-collapsible';
+
+<Collapsible
+  title="Setup"
+  caption="Step 1 of 3"
+  view="white-surface"
+  trailing={<CheckIcon />}
+  defaultOpen={false}
+  onOpenChange={(isOpen) => console.log(isOpen)}
+>
+  content
+</Collapsible>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-b2b-collapsible",
-  "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-core": "0.148.0",
-    "@xsolla/xui-icons-base": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0"
+    "@xsolla/xui-core": "0.148.2",
+    "@xsolla/xui-icons-base": "0.148.2",
+    "@xsolla/xui-primitives-core": "0.148.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",