@xsolla/xui-tag 0.99.0 → 0.100.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 +269 -12
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,30 +1,287 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Tag
|
|
3
|
+
subtitle: A tag/chip component for labels.
|
|
4
|
+
description: A cross-platform React tag component for displaying labels, categories, and removable chips.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Tag
|
|
8
|
+
|
|
9
|
+
A cross-platform React tag component for displaying labels, categories, and removable chips. Supports multiple tones and optional icons.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-tag
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-tag
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Basic Tag
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
26
|
+
|
|
27
|
+
export default function BasicTag() {
|
|
28
|
+
return (
|
|
29
|
+
<div style={{ display: 'flex', gap: 8 }}>
|
|
30
|
+
<Tag>Default</Tag>
|
|
31
|
+
<Tag tone="brand">Brand</Tag>
|
|
32
|
+
<Tag tone="success">Success</Tag>
|
|
33
|
+
</div>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Tag Tones
|
|
12
39
|
|
|
13
40
|
```tsx
|
|
14
|
-
import
|
|
41
|
+
import * as React from 'react';
|
|
42
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
43
|
+
|
|
44
|
+
export default function TagTones() {
|
|
45
|
+
return (
|
|
46
|
+
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
|
47
|
+
<Tag tone="primary">Primary</Tag>
|
|
48
|
+
<Tag tone="secondary">Secondary</Tag>
|
|
49
|
+
<Tag tone="brand">Brand</Tag>
|
|
50
|
+
<Tag tone="brandExtra">Brand Extra</Tag>
|
|
51
|
+
<Tag tone="success">Success</Tag>
|
|
52
|
+
<Tag tone="warning">Warning</Tag>
|
|
53
|
+
<Tag tone="alert">Alert</Tag>
|
|
54
|
+
<Tag tone="neutral">Neutral</Tag>
|
|
55
|
+
</div>
|
|
56
|
+
);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Tag Sizes
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import * as React from 'react';
|
|
64
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
65
|
+
|
|
66
|
+
export default function TagSizes() {
|
|
67
|
+
return (
|
|
68
|
+
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
|
69
|
+
<Tag size="xs">Extra Small</Tag>
|
|
70
|
+
<Tag size="sm">Small</Tag>
|
|
71
|
+
<Tag size="md">Medium</Tag>
|
|
72
|
+
<Tag size="lg">Large</Tag>
|
|
73
|
+
<Tag size="xl">Extra Large</Tag>
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Tag with Icon
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
import * as React from 'react';
|
|
83
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
84
|
+
import { Check } from '@xsolla/xui-icons';
|
|
85
|
+
import { Star, Clock } from '@xsolla/xui-icons-base';
|
|
86
|
+
|
|
87
|
+
export default function TagWithIcon() {
|
|
88
|
+
return (
|
|
89
|
+
<div style={{ display: 'flex', gap: 8 }}>
|
|
90
|
+
<Tag icon={<Star size={12} />} tone="warning">Featured</Tag>
|
|
91
|
+
<Tag icon={<Check size={12} />} tone="success">Verified</Tag>
|
|
92
|
+
<Tag icon={<Clock size={12} />} tone="neutral">Pending</Tag>
|
|
93
|
+
</div>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Removable Tag
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
import * as React from 'react';
|
|
102
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
103
|
+
|
|
104
|
+
export default function RemovableTag() {
|
|
105
|
+
const [tags, setTags] = React.useState(['React', 'TypeScript', 'Node.js', 'GraphQL']);
|
|
106
|
+
|
|
107
|
+
const removeTag = (tagToRemove: string) => {
|
|
108
|
+
setTags(tags.filter(tag => tag !== tagToRemove));
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
return (
|
|
112
|
+
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
|
113
|
+
{tags.map(tag => (
|
|
114
|
+
<Tag key={tag} tone="brand" onRemove={() => removeTag(tag)}>
|
|
115
|
+
{tag}
|
|
116
|
+
</Tag>
|
|
117
|
+
))}
|
|
118
|
+
</div>
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## Anatomy
|
|
124
|
+
|
|
125
|
+
Import the component and use it directly:
|
|
126
|
+
|
|
127
|
+
```jsx
|
|
128
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
15
129
|
|
|
16
|
-
<Tag
|
|
17
|
-
|
|
130
|
+
<Tag
|
|
131
|
+
size="md" // Size variant
|
|
132
|
+
tone="brand" // Color tone
|
|
133
|
+
icon={<Icon />} // Optional leading icon
|
|
134
|
+
onRemove={handleRemove} // Makes tag removable
|
|
135
|
+
>
|
|
136
|
+
Tag Label
|
|
18
137
|
</Tag>
|
|
19
138
|
```
|
|
20
139
|
|
|
21
|
-
##
|
|
140
|
+
## Examples
|
|
141
|
+
|
|
142
|
+
### Category Tags
|
|
143
|
+
|
|
144
|
+
```tsx
|
|
145
|
+
import * as React from 'react';
|
|
146
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
147
|
+
|
|
148
|
+
export default function CategoryTags() {
|
|
149
|
+
const categories = [
|
|
150
|
+
{ name: 'Technology', tone: 'brand' as const },
|
|
151
|
+
{ name: 'Design', tone: 'brandExtra' as const },
|
|
152
|
+
{ name: 'Marketing', tone: 'success' as const },
|
|
153
|
+
{ name: 'Sales', tone: 'warning' as const },
|
|
154
|
+
];
|
|
155
|
+
|
|
156
|
+
return (
|
|
157
|
+
<div style={{ display: 'flex', gap: 8 }}>
|
|
158
|
+
{categories.map(cat => (
|
|
159
|
+
<Tag key={cat.name} tone={cat.tone} size="sm">
|
|
160
|
+
{cat.name}
|
|
161
|
+
</Tag>
|
|
162
|
+
))}
|
|
163
|
+
</div>
|
|
164
|
+
);
|
|
165
|
+
}
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
### Status Tags
|
|
169
|
+
|
|
170
|
+
```tsx
|
|
171
|
+
import * as React from 'react';
|
|
172
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
173
|
+
import { CheckCircle, Clock, XCircle } from '@xsolla/xui-icons-base';
|
|
174
|
+
|
|
175
|
+
export default function StatusTags() {
|
|
176
|
+
return (
|
|
177
|
+
<div style={{ display: 'flex', gap: 8 }}>
|
|
178
|
+
<Tag
|
|
179
|
+
icon={<CheckCircle size={12} />}
|
|
180
|
+
tone="success"
|
|
181
|
+
>
|
|
182
|
+
Completed
|
|
183
|
+
</Tag>
|
|
184
|
+
<Tag
|
|
185
|
+
icon={<Clock size={12} />}
|
|
186
|
+
tone="warning"
|
|
187
|
+
>
|
|
188
|
+
In Progress
|
|
189
|
+
</Tag>
|
|
190
|
+
<Tag
|
|
191
|
+
icon={<XCircle size={12} />}
|
|
192
|
+
tone="alert"
|
|
193
|
+
>
|
|
194
|
+
Failed
|
|
195
|
+
</Tag>
|
|
196
|
+
</div>
|
|
197
|
+
);
|
|
198
|
+
}
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
### Tag Input
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
import * as React from 'react';
|
|
205
|
+
import { Tag } from '@xsolla/xui-tag';
|
|
206
|
+
import { Input } from '@xsolla/xui-input';
|
|
207
|
+
|
|
208
|
+
export default function TagInput() {
|
|
209
|
+
const [tags, setTags] = React.useState(['react', 'typescript']);
|
|
210
|
+
const [inputValue, setInputValue] = React.useState('');
|
|
211
|
+
|
|
212
|
+
const addTag = () => {
|
|
213
|
+
if (inputValue.trim() && !tags.includes(inputValue.trim())) {
|
|
214
|
+
setTags([...tags, inputValue.trim()]);
|
|
215
|
+
setInputValue('');
|
|
216
|
+
}
|
|
217
|
+
};
|
|
218
|
+
|
|
219
|
+
return (
|
|
220
|
+
<div>
|
|
221
|
+
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 8 }}>
|
|
222
|
+
{tags.map(tag => (
|
|
223
|
+
<Tag
|
|
224
|
+
key={tag}
|
|
225
|
+
tone="secondary"
|
|
226
|
+
onRemove={() => setTags(tags.filter(t => t !== tag))}
|
|
227
|
+
>
|
|
228
|
+
{tag}
|
|
229
|
+
</Tag>
|
|
230
|
+
))}
|
|
231
|
+
</div>
|
|
232
|
+
<Input
|
|
233
|
+
value={inputValue}
|
|
234
|
+
onChangeText={setInputValue}
|
|
235
|
+
placeholder="Add a tag..."
|
|
236
|
+
onKeyDown={(e) => e.key === 'Enter' && addTag()}
|
|
237
|
+
/>
|
|
238
|
+
</div>
|
|
239
|
+
);
|
|
240
|
+
}
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
## API Reference
|
|
22
244
|
|
|
23
245
|
### Tag
|
|
24
246
|
|
|
247
|
+
A tag/chip component.
|
|
248
|
+
|
|
249
|
+
**Tag Props:**
|
|
250
|
+
|
|
25
251
|
| Prop | Type | Default | Description |
|
|
26
|
-
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
252
|
+
| :--- | :--- | :------ | :---------- |
|
|
253
|
+
| children | `ReactNode` | - | **Required.** Tag content. |
|
|
254
|
+
| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Size of the tag. |
|
|
255
|
+
| tone | `"primary" \| "secondary" \| "brand" \| "brandExtra" \| "success" \| "warning" \| "alert" \| "neutral"` | `"primary"` | Color tone. |
|
|
256
|
+
| icon | `ReactNode` | - | Leading icon. |
|
|
257
|
+
| onRemove | `() => void` | - | Callback for remove button. Makes tag removable. |
|
|
258
|
+
|
|
259
|
+
**Tone Color Mapping:**
|
|
260
|
+
|
|
261
|
+
| Tone | Background | Text |
|
|
262
|
+
| :--- | :--------- | :--- |
|
|
263
|
+
| primary | Background primary | Content primary |
|
|
264
|
+
| secondary | Background secondary | Content primary |
|
|
265
|
+
| brand | Brand primary | On brand |
|
|
266
|
+
| brandExtra | BrandExtra primary | On brandExtra |
|
|
267
|
+
| success | Success primary | On success |
|
|
268
|
+
| warning | Warning primary | On warning |
|
|
269
|
+
| alert | Alert primary | On alert |
|
|
270
|
+
| neutral | Neutral primary | On neutral |
|
|
271
|
+
|
|
272
|
+
## Theming
|
|
273
|
+
|
|
274
|
+
Tag uses the design system theme for colors:
|
|
275
|
+
|
|
276
|
+
```typescript
|
|
277
|
+
// Colors accessed via theme (example for "brand" tone)
|
|
278
|
+
theme.colors.background.brand.primary // Background
|
|
279
|
+
theme.colors.content.onBrand // Text color
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
## Accessibility
|
|
283
|
+
|
|
284
|
+
- Uses semantic elements for proper structure
|
|
285
|
+
- Remove button includes accessible label
|
|
286
|
+
- Keyboard accessible remove action
|
|
287
|
+
- Focus indicator on interactive elements
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-tag",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.100.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-core": "0.
|
|
14
|
-
"@xsolla/xui-icons": "0.
|
|
15
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.100.0",
|
|
14
|
+
"@xsolla/xui-icons": "0.100.0",
|
|
15
|
+
"@xsolla/xui-primitives-core": "0.100.0"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8.0",
|