@xsolla/xui-tag-label 0.150.0 → 0.152.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.
Files changed (2) hide show
  1. package/README.md +110 -40
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -1,55 +1,125 @@
1
- # @xsolla/xui-tag-label
1
+ # TagLabel
2
2
 
3
- A specialized identification and categorization component for the Xsolla brand.
3
+ A specialised cross-platform identification and categorisation tag composed of optional segments — entity, subentity, ID, label, rarity, status, and a custom slot.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
- yarn add @xsolla/xui-tag-label
8
+ npm install @xsolla/xui-tag-label
9
9
  ```
10
10
 
11
- ## Usage
11
+ ## Imports
12
12
 
13
13
  ```tsx
14
- import { TagLabel } from "@xsolla/xui-tag-label";
15
-
16
- const MyComponent = () => (
17
- <TagLabel
18
- entityType="item"
19
- subentityType="skin"
20
- series="XLA"
21
- number="-001-001"
22
- name="Backpack item"
23
- status="sale"
24
- />
25
- );
14
+ import { TagLabel, type EntityType, type SubentityType, type StatusType } from '@xsolla/xui-tag-label';
26
15
  ```
27
16
 
28
- ## Props
29
-
30
- | Prop | Type | Description |
31
- | --- | --- | --- |
32
- | `entityType` | `'item' \| 'product' | 'account'` | Main category of the item. |
33
- | `subentityType` | `SubentityType` | Detailed sub-category (e.g., 'skin', 'game', 'sdk'). |
34
- | `series` | `string` | ID series prefix (e.g., 'XLA'). |
35
- | `number` | `string` | ID number suffix (e.g., '-001-001'). |
36
- | `name` | `string` | Name of the item. |
37
- | `status` | `'sale' \| 'maintenance' \| 'inactive'` | Visual status indicator. |
38
- | `compact` | `boolean` | Whether to show the simplified, icon-only version. |
39
- | `icon` | `ReactNode` | Custom icon override for the entity segment. |
40
- | `rarity` | `ReactNode` | Rarity icon or indicator. |
41
- | `children` | `ReactNode` | Custom content for the tailing slot. |
42
- | `themeMode` | `'light' \| 'dark' ...` | Theme mode override. |
43
- | `themeProductContext` | `ProductContext` | Product context override. |
17
+ ## Quick start
18
+
19
+ ```tsx
20
+ import * as React from 'react';
21
+ import { TagLabel } from '@xsolla/xui-tag-label';
22
+
23
+ export default function QuickStart() {
24
+ return (
25
+ <TagLabel
26
+ entityType="item"
27
+ subentityType="skin"
28
+ series="XLA"
29
+ number="-001-001"
30
+ label="Backpack"
31
+ status="sale"
32
+ />
33
+ );
34
+ }
35
+ ```
36
+
37
+ ## API Reference
38
+
39
+ ### `<TagLabel>`
40
+
41
+ | Prop | Type | Default | Description |
42
+ | --- | --- | --- | --- |
43
+ | `entityType` | `"item" \| "product" \| "account"` | — | Primary category. Drives icon and tinted background of the entity segment. |
44
+ | `subentityType` | `SubentityType` | — | Detailed sub-category (e.g. `"skin"`, `"game"`, `"sdk"`). Hidden when `compact`. |
45
+ | `icon` | `ReactNode` | — | Custom icon override for the entity segment. |
46
+ | `series` | `string` | — | ID series prefix (e.g. `"XLA"`). |
47
+ | `number` | `string` | — | ID number suffix (e.g. `"-001-001"`). |
48
+ | `label` | `string` | — | Item label/name. Hidden when `compact`. |
49
+ | `rarity` | `ReactNode` | — | Rarity icon segment. Hidden when `compact`. |
50
+ | `status` | `"sale" \| "maintenance" \| "inactive"` | — | Status indicator segment. Hidden when `compact`. |
51
+ | `compact` | `boolean` | `false` | Render the icon-only / minimal version. |
52
+ | `children` | `ReactNode` | — | Custom trailing-slot content. Hidden when `compact`. |
53
+ | `style` | `CSSProperties` | — | Inline style overrides on the root container. |
54
+
55
+ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
56
+
57
+ ### Exported types
58
+
59
+ | Type | Members |
60
+ | --- | --- |
61
+ | `EntityType` | `"item" \| "product" \| "account"` |
62
+ | `StatusType` | `"sale" \| "maintenance" \| "inactive"` |
63
+ | `SubentityType` | `"skin" \| "in-game-item" \| "currency" \| "bundle" \| "lootbox" \| "game-key" \| "discount" \| "coupon" \| "game" \| "sdk" \| "plugin" \| "api" \| "service" \| "tool" \| "webshop" \| "app" \| "launcher" \| "library" \| "engine" \| "user" \| "developer" \| "influencer" \| "publisher" \| "settings"` |
44
64
 
45
65
  ## Anatomy
46
66
 
47
- The `TagLabel` is composed of multiple optional segments:
67
+ The tag is composed of optional segments rendered in this order:
68
+
69
+ 1. **Entity** — coloured background, icon, label.
70
+ 2. **Subentity** — secondary categorisation (omitted when `compact`).
71
+ 3. **ID** — series + number.
72
+ 4. **Name** — descriptive text (omitted when `compact`).
73
+ 5. **Rarity** — icon (omitted when `compact`).
74
+ 6. **Status** — operational status icon (omitted when `compact`).
75
+ 7. **Custom slot** — children (omitted when `compact`).
76
+
77
+ ## Examples
78
+
79
+ ### Compact
80
+
81
+ ```tsx
82
+ import * as React from 'react';
83
+ import { TagLabel } from '@xsolla/xui-tag-label';
84
+
85
+ export default function CompactTagLabel() {
86
+ return <TagLabel entityType="item" series="XLA" number="-001-001" compact />;
87
+ }
88
+ ```
89
+
90
+ ### With status
91
+
92
+ ```tsx
93
+ import * as React from 'react';
94
+ import { TagLabel } from '@xsolla/xui-tag-label';
95
+
96
+ export default function TagLabelStatus() {
97
+ return (
98
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
99
+ <TagLabel entityType="product" label="Adventure Pack" status="sale" />
100
+ <TagLabel entityType="product" label="Dev Kit" status="maintenance" />
101
+ <TagLabel entityType="account" label="User #42" status="inactive" />
102
+ </div>
103
+ );
104
+ }
105
+ ```
106
+
107
+ ### Custom trailing slot
108
+
109
+ ```tsx
110
+ import * as React from 'react';
111
+ import { TagLabel } from '@xsolla/xui-tag-label';
112
+
113
+ export default function TagLabelCustomSlot() {
114
+ return (
115
+ <TagLabel entityType="item" subentityType="skin" label="Camo Skin">
116
+ Limited
117
+ </TagLabel>
118
+ );
119
+ }
120
+ ```
121
+
122
+ ## Accessibility
48
123
 
49
- 1. **Entity**: Primary categorization (colored background + icon + label).
50
- 2. **Subentity**: Secondary categorization (icon + label).
51
- 3. **ID**: Unique identification (Series + Number).
52
- 4. **Name**: Descriptive text.
53
- 5. **Rarity**: Status/rarity icon.
54
- 6. **Status**: Operational status icon.
55
- 7. **Custom Slot**: Additional flexible content.
124
+ - Provide context around the tag (e.g. a list label or surrounding heading) so screen readers can interpret the categorisation.
125
+ - The component is decorative; for interactive use, wrap in a button or link with an explicit accessible name.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-tag-label",
3
- "version": "0.150.0",
3
+ "version": "0.152.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.150.0",
14
- "@xsolla/xui-icons": "0.150.0",
15
- "@xsolla/xui-primitives-core": "0.150.0"
13
+ "@xsolla/xui-core": "0.152.0",
14
+ "@xsolla/xui-icons": "0.152.0",
15
+ "@xsolla/xui-primitives-core": "0.152.0"
16
16
  },
17
17
  "peerDependencies": {
18
18
  "react": ">=16.8.0",