@xsolla/xui-tag-label 0.148.0-pr266.1777536173

package/README.md

@@ -0,0 +1,55 @@
+# @xsolla/xui-tag-label
+
+A specialized identification and categorization component for the Xsolla brand.
+
+## Installation
+
+```bash
+yarn add @xsolla/xui-tag-label
+```
+
+## Usage
+
+```tsx
+import { TagLabel } from "@xsolla/xui-tag-label";
+
+const MyComponent = () => (
+  <TagLabel
+    entityType="item"
+    subentityType="skin"
+    series="XLA"
+    number="-001-001"
+    name="Backpack item"
+    status="sale"
+  />
+);
+```
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `entityType` | `'item' \| 'product' | 'account'` | Main category of the item. |
+| `subentityType` | `SubentityType` | Detailed sub-category (e.g., 'skin', 'game', 'sdk'). |
+| `series` | `string` | ID series prefix (e.g., 'XLA'). |
+| `number` | `string` | ID number suffix (e.g., '-001-001'). |
+| `name` | `string` | Name of the item. |
+| `status` | `'sale' \| 'maintenance' \| 'inactive'` | Visual status indicator. |
+| `compact` | `boolean` | Whether to show the simplified, icon-only version. |
+| `icon` | `ReactNode` | Custom icon override for the entity segment. |
+| `rarity` | `ReactNode` | Rarity icon or indicator. |
+| `children` | `ReactNode` | Custom content for the tailing slot. |
+| `themeMode` | `'light' \| 'dark' ...` | Theme mode override. |
+| `themeProductContext` | `ProductContext` | Product context override. |
+
+## Anatomy
+
+The `TagLabel` is composed of multiple optional segments:
+
+1. **Entity**: Primary categorization (colored background + icon + label).
+2. **Subentity**: Secondary categorization (icon + label).
+3. **ID**: Unique identification (Series + Number).
+4. **Name**: Descriptive text.
+5. **Rarity**: Status/rarity icon.
+6. **Status**: Operational status icon.
+7. **Custom Slot**: Additional flexible content.

package/native/index.d.mts

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type EntityType = "item" | "product" | "account";
+type StatusType = "sale" | "maintenance" | "inactive";
+type 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";
+interface TagLabelProps extends ThemeOverrideProps {
+    /** Main entity type */
+    entityType?: EntityType;
+    /** Detailed sub-category */
+    subentityType?: SubentityType;
+    /** Custom icon for entity/subentity if needed */
+    icon?: ReactNode;
+    /** ID series (e.g. "XLA") */
+    series?: string;
+    /** ID number (e.g. "-001-001") */
+    number?: string;
+    /** Item label/name */
+    label?: string;
+    /** Rarity icon or indicator */
+    rarity?: ReactNode;
+    /** Status indicator */
+    status?: StatusType;
+    /** Whether to show the compact version */
+    compact?: boolean;
+    /** Custom content slot */
+    children?: ReactNode;
+    /** Custom styles */
+    style?: any;
+}
+declare const TagLabel: React.FC<TagLabelProps>;
+
+export { type EntityType, type StatusType, type SubentityType, TagLabel, type TagLabelProps };

package/native/index.d.ts

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type EntityType = "item" | "product" | "account";
+type StatusType = "sale" | "maintenance" | "inactive";
+type 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";
+interface TagLabelProps extends ThemeOverrideProps {
+    /** Main entity type */
+    entityType?: EntityType;
+    /** Detailed sub-category */
+    subentityType?: SubentityType;
+    /** Custom icon for entity/subentity if needed */
+    icon?: ReactNode;
+    /** ID series (e.g. "XLA") */
+    series?: string;
+    /** ID number (e.g. "-001-001") */
+    number?: string;
+    /** Item label/name */
+    label?: string;
+    /** Rarity icon or indicator */
+    rarity?: ReactNode;
+    /** Status indicator */
+    status?: StatusType;
+    /** Whether to show the compact version */
+    compact?: boolean;
+    /** Custom content slot */
+    children?: ReactNode;
+    /** Custom styles */
+    style?: any;
+}
+declare const TagLabel: React.FC<TagLabelProps>;
+
+export { type EntityType, type StatusType, type SubentityType, TagLabel, type TagLabelProps };