@xsolla/xui-tag 0.148.0 → 0.148.2

package/README.md

@@ -0,0 +1,319 @@
+# Tag
+
+A cross-platform React tag component for displaying labels, categories, and removable chips. Supports multiple tones, solid/outlined types, and optional left/right icons.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-tag
+# or
+yarn add @xsolla/xui-tag
+```
+
+## Demo
+
+### Basic Tag
+
+```tsx
+import * as React from 'react';
+import { Tag } from '@xsolla/xui-tag';
+
+export default function BasicTag() {
+  return (
+    <div style={{ display: 'flex', gap: 8 }}>
+      <Tag>Default</Tag>
+      <Tag tone="brand">Brand</Tag>
+      <Tag tone="success">Success</Tag>
+    </div>
+  );
+}
+```
+
+### Tag Tones
+
+```tsx
+import * as React from 'react';
+import { Tag } from '@xsolla/xui-tag';
+
+export default function TagTones() {
+  return (
+    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+      <Tag tone="primary">Primary</Tag>
+      <Tag tone="brand">Brand</Tag>
+      <Tag tone="brandExtra">Brand Extra</Tag>
+      <Tag tone="success">Success</Tag>
+      <Tag tone="warning">Warning</Tag>
+      <Tag tone="alert">Alert</Tag>
+      <Tag tone="neutral">Neutral</Tag>
+    </div>
+  );
+}
+```
+
+### Tag Sizes
+
+```tsx
+import * as React from 'react';
+import { Tag } from '@xsolla/xui-tag';
+
+export default function TagSizes() {
+  return (
+    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+      <Tag size="xs">Extra Small</Tag>
+      <Tag size="sm">Small</Tag>
+      <Tag size="md">Medium</Tag>
+      <Tag size="lg">Large</Tag>
+      <Tag size="xl">Extra Large</Tag>
+    </div>
+  );
+}
+```
+
+### Solid vs Outlined
+
+```tsx
+import * as React from 'react';
+import { Tag } from '@xsolla/xui-tag';
+
+export default function TagTypes() {
+  return (
+    <div style={{ display: 'flex', gap: 8 }}>
+      <Tag tone="brand" type="solid">Solid</Tag>
+      <Tag tone="brand" type="outlined">Outlined</Tag>
+    </div>
+  );
+}
+```
+
+### Tag with Icons
+
+```tsx
+import * as React from 'react';
+import { Tag } from '@xsolla/xui-tag';
+import { Check } from '@xsolla/xui-icons';
+import { Star, Clock } from '@xsolla/xui-icons-base';
+
+export default function TagWithIcon() {
+  return (
+    <div style={{ display: 'flex', gap: 8 }}>
+      <Tag iconLeft={<Star size={12} />} tone="warning">Featured</Tag>
+      <Tag iconLeft={<Check size={12} />} tone="success">Verified</Tag>
+      <Tag iconLeft={<Clock size={12} />} iconRight={<Star size={12} />} tone="neutral">Pending</Tag>
+    </div>
+  );
+}
+```
+
+### Icon-Only Tag
+
+```tsx
+import * as React from 'react';
+import { Tag } from '@xsolla/xui-tag';
+import { Check } from '@xsolla/xui-icons';
+
+export default function IconOnlyTag() {
+  return <Tag iconLeft={<Check size={12} />} tone="success" />;
+}
+```
+
+### Removable Tag
+
+```tsx
+import * as React from 'react';
+import { Tag } from '@xsolla/xui-tag';
+
+export default function RemovableTag() {
+  const [tags, setTags] = React.useState(['React', 'TypeScript', 'Node.js', 'GraphQL']);
+
+  const removeTag = (tagToRemove: string) => {
+    setTags(tags.filter(tag => tag !== tagToRemove));
+  };
+
+  return (
+    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+      {tags.map(tag => (
+        <Tag key={tag} tone="brand" onRemove={() => removeTag(tag)}>
+          {tag}
+        </Tag>
+      ))}
+    </div>
+  );
+}
+```
+
+## Anatomy
+
+Import the component and use it directly:
+
+```jsx
+import { Tag } from '@xsolla/xui-tag';
+
+<Tag
+  size="md"                    // Size variant
+  tone="brand"                 // Color tone
+  type="solid"                 // Solid or outlined
+  iconLeft={<Icon />}          // Optional leading icon
+  iconRight={<Icon />}         // Optional trailing icon
+  onRemove={handleRemove}      // Makes tag removable (renders X icon)
+>
+  Tag Label
+</Tag>
+```
+
+## Examples
+
+### Category Tags
+
+```tsx
+import * as React from 'react';
+import { Tag } from '@xsolla/xui-tag';
+
+export default function CategoryTags() {
+  const categories = [
+    { name: 'Technology', tone: 'brand' as const },
+    { name: 'Design', tone: 'brandExtra' as const },
+    { name: 'Marketing', tone: 'success' as const },
+    { name: 'Sales', tone: 'warning' as const },
+  ];
+
+  return (
+    <div style={{ display: 'flex', gap: 8 }}>
+      {categories.map(cat => (
+        <Tag key={cat.name} tone={cat.tone} size="sm">
+          {cat.name}
+        </Tag>
+      ))}
+    </div>
+  );
+}
+```
+
+### Status Tags
+
+```tsx
+import * as React from 'react';
+import { Tag } from '@xsolla/xui-tag';
+import { CheckCircle, Clock, XCircle } from '@xsolla/xui-icons-base';
+
+export default function StatusTags() {
+  return (
+    <div style={{ display: 'flex', gap: 8 }}>
+      <Tag iconLeft={<CheckCircle size={12} />} tone="success">
+        Completed
+      </Tag>
+      <Tag iconLeft={<Clock size={12} />} tone="warning">
+        In Progress
+      </Tag>
+      <Tag iconLeft={<XCircle size={12} />} tone="alert">
+        Failed
+      </Tag>
+    </div>
+  );
+}
+```
+
+### Tag Input
+
+```tsx
+import * as React from 'react';
+import { Tag } from '@xsolla/xui-tag';
+import { Input } from '@xsolla/xui-input';
+
+export default function TagInput() {
+  const [tags, setTags] = React.useState(['react', 'typescript']);
+  const [inputValue, setInputValue] = React.useState('');
+
+  const addTag = () => {
+    if (inputValue.trim() && !tags.includes(inputValue.trim())) {
+      setTags([...tags, inputValue.trim()]);
+      setInputValue('');
+    }
+  };
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 8 }}>
+        {tags.map(tag => (
+          <Tag
+            key={tag}
+            tone="primary"
+            onRemove={() => setTags(tags.filter(t => t !== tag))}
+          >
+            {tag}
+          </Tag>
+        ))}
+      </div>
+      <Input
+        value={inputValue}
+        onChangeText={setInputValue}
+        placeholder="Add a tag..."
+        onKeyDown={(e) => e.key === 'Enter' && addTag()}
+      />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### Tag
+
+A tag/chip component.
+
+**Tag Props:**
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| children | `ReactNode` | - | Tag content. Optional for icon-only tags. |
+| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Size of the tag. |
+| tone | `"primary" \| "brand" \| "brandExtra" \| "success" \| "warning" \| "alert" \| "neutral"` | `"primary"` | Color tone. |
+| type | `"solid" \| "outlined"` | `"solid"` | Visual type. Solid fills background; outlined uses a border with lighter background. |
+| iconLeft | `ReactNode` | - | Leading icon. |
+| iconRight | `ReactNode` | - | Trailing icon. |
+| onRemove | `() => void` | - | Callback for remove button. Renders an X icon in the trailing position. |
+
+**Solid Tone Color Mapping:**
+
+| Tone | Background | Text |
+| :--- | :--------- | :--- |
+| primary | Background primary | Content primary |
+| brand | Brand primary | On brand |
+| brandExtra | BrandExtra primary | On brandExtra |
+| success | Success primary | On success |
+| warning | Warning primary | On warning |
+| alert | Alert primary | On alert |
+| neutral | Neutral primary | On neutral |
+
+**Outlined Tone Color Mapping:**
+
+| Tone | Background | Border | Text |
+| :--- | :--------- | :----- | :--- |
+| primary | Background primary | Border secondary | Content primary |
+| brand | Brand secondary | Border brand | Content brand primary |
+| brandExtra | BrandExtra secondary | Border brandExtra | Content brandExtra primary |
+| success | Success secondary | Border success | Content success primary |
+| warning | Warning secondary | Border warning | Content warning primary |
+| alert | Alert secondary | Border alert | Content alert primary |
+| neutral | Neutral secondary | Border neutral | Content neutral primary |
+
+## Theming
+
+Tag uses the design system theme for colors:
+
+```typescript
+// Solid colors (example for "brand" tone)
+theme.colors.background.brand.primary  // Background
+theme.colors.content.on.brand         // Text color
+
+// Outlined colors (example for "brand" tone)
+theme.colors.background.brand.secondary  // Background
+theme.colors.border.brand               // Border color
+theme.colors.content.brand.primary      // Text color
+```
+
+## Accessibility
+
+- Uses semantic elements for proper structure
+- Remove button includes accessible label
+- Keyboard accessible remove action
+- Focus indicator on interactive elements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-tag",
-  "version": "0.148.0",
+  "version": "0.148.2",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,9 +10,9 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.148.0",
-    "@xsolla/xui-icons": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0"
+    "@xsolla/xui-core": "0.148.2",
+    "@xsolla/xui-icons": "0.148.2",
+    "@xsolla/xui-primitives-core": "0.148.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",