@xsolla/xui-status 0.174.3 → 0.176.0

package/README.md

@@ -2,6 +2,61 @@
 
 A cross-platform React status indicator that pairs a coloured dot with an optional inline label.
 
+<!-- BEGIN:xui-mcp-instructions:status -->
+Use to visually and textually label of transactions, purchases, etc.
+
+### When to use
+
+When you need to communicate the state or outcome of an item (transaction, payment, order, account, system health)
+
+When a compact, color-coded indicator helps users quickly assess status in tables, lists, cards, or detail views
+
+When the state maps to one of the defined palettes — Success, Warning, Alert, Neutral, or Default
+
+### When not to use
+
+When the element should trigger an action on click — use a Button or interactive Chip instead
+- When you need to show a count or quantity — use a Badge or counter instead
+- When the element represents a removable selection or filter — use a Tag instead
+- When the meaning requires more than a short label — use regular descriptive text instead
+
+### Content guidelines
+
+Keep labels short — one or two words — and use the same vocabulary for the same state across the whole product.
+
+Map each palette to a consistent meaning: Success for positive or completed states, Warning for states needing attention, Alert for failures or critical states, Neutral for inactive or muted states, and Default for a generic state.
+
+Do not invent new color meanings or reuse a palette for an unrelated state.
+
+Never let color carry the meaning by itself — always keep the text label, or, for the dot-only variant, provide an equivalent accessible name.
+
+Use consistent casing for labels across all sizes and palettes.
+
+### Behaviour guidelines
+
+Status is display-only — it presents state and does not respond to clicks or hold interactive behavior.
+
+Label: true shows the dot (or colored text) together with its label; Label: false shows the dot only, so use it only where context already makes the meaning obvious.
+
+Label type — Primary colors the text itself in the palette color, while Dot color keeps the text neutral and carries the meaning through a colored dot; pick one approach and apply it consistently within a view.
+
+Size — M [16], L [18], and S [14] scale the text and dot together; match the size to the surrounding content density.
+
+Keep the palette set consistent within a single screen so the same color always means the same thing.
+
+### Accessibility
+
+Never rely on color alone to convey state — always pair it with text or an equivalent text alternative.
+
+The dot-only variant (Label: false) must expose its meaning through an accessible label or tooltip, not just the dot color.
+
+Ensure the text and dot meet contrast requirements against their background across every palette.
+
+Use consistent, descriptive wording so the state is unambiguous when announced by a screen reader.
+
+As a non-interactive element, Status should not be focusable; expose its meaning through its text content or accessible name instead.
+<!-- END:xui-mcp-instructions:status -->
+
 ## Installation
 
 ```bash

package/package.json

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