@xsolla/xui-toggletip 0.95.0 → 0.97.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +41 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# @xsolla/xui-toggletip
|
|
2
|
+
|
|
3
|
+
Click-triggered info popover with optional title, body content, and footer actions.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @xsolla/xui-toggletip
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Toggletip } from '@xsolla/xui-toggletip';
|
|
15
|
+
import { Button } from '@xsolla/xui-button';
|
|
16
|
+
|
|
17
|
+
const Example = () => (
|
|
18
|
+
<Toggletip
|
|
19
|
+
title="About this feature"
|
|
20
|
+
content="This setting controls the visibility of optional UI elements."
|
|
21
|
+
footer={<Button size="xs">Got it</Button>}
|
|
22
|
+
direction="bottom"
|
|
23
|
+
>
|
|
24
|
+
<Button variant="secondary" tone="mono" size="xs">Info</Button>
|
|
25
|
+
</Toggletip>
|
|
26
|
+
);
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Props
|
|
30
|
+
|
|
31
|
+
### Toggletip
|
|
32
|
+
|
|
33
|
+
| Prop | Type | Default | Description |
|
|
34
|
+
|------|------|---------|-------------|
|
|
35
|
+
| `title` | `ReactNode` | — | Heading rendered at the top of the popover |
|
|
36
|
+
| `content` | `ReactNode` | — | Body content of the popover |
|
|
37
|
+
| `footer` | `ReactNode` | — | Action buttons rendered at the bottom |
|
|
38
|
+
| `direction` | `"top" \| "top-left" \| "top-right" \| "bottom" \| "bottom-left" \| "bottom-right" \| "left" \| "right"` | `"top"` | Placement relative to the trigger |
|
|
39
|
+
| `width` | `string` | `"288px"` | Width of the popover |
|
|
40
|
+
| `offset` | `number` | `12` | Gap between popover and trigger (px) |
|
|
41
|
+
| `autoDirection` | `boolean` | — | Automatically flip placement to stay in viewport |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-toggletip",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.97.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-button": "0.
|
|
14
|
-
"@xsolla/xui-core": "0.
|
|
15
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-button": "0.97.0",
|
|
14
|
+
"@xsolla/xui-core": "0.97.0",
|
|
15
|
+
"@xsolla/xui-primitives-core": "0.97.0"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8.0",
|