@xsolla/xui-input 0.174.3 → 0.175.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 +46 -0
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -1,6 +1,52 @@
1
1
  # Input
2
2
 
3
3
  A cross-platform text input with label, error, icon, clear and validation support; works on web and React Native via `XUIProvider` themed contexts.
4
+ <!-- BEGIN:xui-mcp-instructions:input -->
5
+ An interactive field that lets users enter, edit, or review information. Inputs communicate what kind of data is expected and help users provide the information needed to complete tasks, make updates, or refine content across the product.
6
+
7
+ ### When to use
8
+
9
+ When you need to collect a short, freeform text value from a user (name, email, search query, etc.)
10
+ - When the expected input fits on a single line
11
+ - As part of a larger form alongside other controls
12
+
13
+ ### When not to use
14
+
15
+ - When the expected input spans multiple lines — use a TextArea instead
16
+ - When the user must pick from a predefined list — use a Select, MultiSelect or Autocomplete instead
17
+ - When the value is numeric with constraints — use a InputPhone or InputRange instead
18
+ - When the value is card number — use a InputPayment instead
19
+ - When the value is time or date — use a InputTime or DatePicker instead
20
+ - When the value is pin code — use a InputPin instead
21
+
22
+ ### Content guidelines
23
+
24
+ Do not use the placeholder as a substitute for a label.
25
+
26
+ Placeholder text should describe the expected format or example value (e.g. *"Enter your email"*, *"DD/MM/YYYY"*), not repeat the label.
27
+
28
+ Error messages should be constructive: explain what is wrong and how to correct it (e.g. *"Email is required"*, not just *"Invalid input"*).
29
+
30
+ Remove button should appear only when the field has a value, giving users a quick way to clear it.
31
+
32
+ Check icon should appear after successful validation to confirm the value is accepted.
33
+
34
+ ### Behavior guidelines
35
+
36
+ Input width — fields should reflect the expected content length; avoid overly wide fields for short values like ZIP code, OTP, or CVV unless the layout requires it.
37
+
38
+ Validation timing — do not show errors before a user has interacted with the field. Validate on blur, on submit, or progressively while typing only when it meaningfully helps.
39
+
40
+ Error state — preserve the user’s entered value, show error text close to the field, and do not rely on color alone to communicate the problem.
41
+
42
+ ### Accessibility
43
+
44
+ Error messages must be linked to the input via `aria-describedby` so screen readers announce them on focus.
45
+
46
+ Never rely on placeholder text alone to communicate the field's purpose — it disappears on input and has low contrast by default.
47
+
48
+ Disabled fields should not receive keyboard focus; consider using a read-only state if the value still needs to be accessible.
49
+ <!-- END:xui-mcp-instructions:input -->
4
50
 
5
51
  ## Installation
6
52
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-input",
3
- "version": "0.174.3",
3
+ "version": "0.175.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -13,9 +13,9 @@
13
13
  "test:coverage": "vitest run --coverage"
14
14
  },
15
15
  "dependencies": {
16
- "@xsolla/xui-core": "0.174.3",
17
- "@xsolla/xui-icons-base": "0.174.3",
18
- "@xsolla/xui-primitives-core": "0.174.3"
16
+ "@xsolla/xui-core": "0.175.0",
17
+ "@xsolla/xui-icons-base": "0.175.0",
18
+ "@xsolla/xui-primitives-core": "0.175.0"
19
19
  },
20
20
  "peerDependencies": {
21
21
  "react": ">=16.8.0",