@xsolla/xui-textarea 0.148.0 → 0.148.2

package/README.md

@@ -0,0 +1,221 @@
+# Textarea
+
+A cross-platform React textarea component for multi-line text input. Includes error state and validation message support.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-textarea
+# or
+yarn add @xsolla/xui-textarea
+```
+
+## Demo
+
+### Basic Textarea
+
+```tsx
+import * as React from 'react';
+import { TextArea } from '@xsolla/xui-textarea';
+
+export default function BasicTextarea() {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <TextArea
+      value={value}
+      onChangeText={setValue}
+      placeholder="Enter your message..."
+    />
+  );
+}
+```
+
+### Textarea Sizes
+
+```tsx
+import * as React from 'react';
+import { TextArea } from '@xsolla/xui-textarea';
+
+export default function TextareaSizes() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <TextArea size="xs" placeholder="Extra Small" />
+      <TextArea size="sm" placeholder="Small" />
+      <TextArea size="md" placeholder="Medium (default)" />
+      <TextArea size="lg" placeholder="Large" />
+      <TextArea size="xl" placeholder="Extra Large" />
+    </div>
+  );
+}
+```
+
+### Textarea with Error
+
+```tsx
+import * as React from 'react';
+import { TextArea } from '@xsolla/xui-textarea';
+
+export default function TextareaWithError() {
+  const [value, setValue] = React.useState('');
+  const maxLength = 100;
+
+  return (
+    <TextArea
+      value={value}
+      onChangeText={setValue}
+      placeholder="Enter description..."
+      errorMessage={value.length > maxLength ? `Maximum ${maxLength} characters allowed` : ''}
+    />
+  );
+}
+```
+
+## Anatomy
+
+Import the component and use it directly:
+
+```jsx
+import { TextArea } from '@xsolla/xui-textarea';
+
+<TextArea
+  value={text}                 // Controlled value
+  onChangeText={setText}       // Value change handler
+  placeholder="Placeholder"    // Placeholder text
+  size="md"                     // Size variant
+  disabled={false}             // Disabled state
+  errorMessage="Error text"    // Error message below textarea
+/>
+```
+
+## Examples
+
+### Comment Form
+
+```tsx
+import * as React from 'react';
+import { TextArea } from '@xsolla/xui-textarea';
+import { Button } from '@xsolla/xui-button';
+
+export default function CommentForm() {
+  const [comment, setComment] = React.useState('');
+
+  const handleSubmit = () => {
+    console.log('Comment:', comment);
+    setComment('');
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <TextArea
+        value={comment}
+        onChangeText={setComment}
+        placeholder="Write a comment..."
+        size="md"
+      />
+      <Button onPress={handleSubmit} disabled={!comment.trim()}>
+        Post Comment
+      </Button>
+    </div>
+  );
+}
+```
+
+### Disabled Textarea
+
+```tsx
+import * as React from 'react';
+import { TextArea } from '@xsolla/xui-textarea';
+
+export default function DisabledTextarea() {
+  return (
+    <TextArea
+      value="This content cannot be edited"
+      disabled
+      placeholder="Disabled textarea"
+    />
+  );
+}
+```
+
+### Character Counter
+
+```tsx
+import * as React from 'react';
+import { TextArea } from '@xsolla/xui-textarea';
+
+export default function TextareaWithCounter() {
+  const [value, setValue] = React.useState('');
+  const maxLength = 500;
+
+  return (
+    <div>
+      <TextArea
+        value={value}
+        onChangeText={setValue}
+        placeholder="Enter your bio..."
+        errorMessage={value.length > maxLength ? 'Character limit exceeded' : ''}
+      />
+      <div style={{ textAlign: 'right', fontSize: 12, color: value.length > maxLength ? 'red' : 'gray' }}>
+        {value.length}/{maxLength}
+      </div>
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### TextArea
+
+A multi-line text input component.
+
+**TextArea Props:**
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| value | `string` | - | The controlled value of the textarea. |
+| placeholder | `string` | - | Placeholder text when empty. |
+| onChangeText | `(text: string) => void` | - | Callback when text changes. |
+| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Size of the textarea. |
+| disabled | `boolean` | `false` | Whether the textarea is disabled. |
+| errorMessage | `string` | - | Error message displayed below. |
+| aria-label | `string` | - | Accessible label. |
+| aria-describedby | `string` | - | ID of description element. |
+| id | `string` | - | HTML id attribute. |
+| testID | `string` | - | Test identifier. |
+
+**Padding by Size:**
+
+| Size | Padding |
+| :--- | :------ |
+| xl | 16px |
+| lg | 14px |
+| md | 12px |
+| sm | 10px |
+| xs | 10px |
+
+## Theming
+
+TextArea uses the design system theme for colors:
+
+```typescript
+// Colors accessed via theme
+theme.colors.control.input.bg            // Background color
+theme.colors.control.input.bgFocus       // Focus background
+theme.colors.control.input.border        // Border color
+theme.colors.control.input.borderFocus   // Focus border
+theme.colors.control.input.borderError   // Error border
+theme.colors.control.input.text          // Text color
+theme.colors.control.input.placeholder   // Placeholder color
+theme.colors.content.error               // Error message color
+```
+
+## Accessibility
+
+- Uses native `<textarea>` element
+- `aria-invalid` set when error message present
+- `aria-disabled` for disabled state
+- `aria-describedby` links to error message
+- Error message has `role="alert"` for announcements
+- Focus indicator follows WCAG guidelines

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-textarea",
-  "version": "0.148.0",
+  "version": "0.148.2",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,8 +13,8 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0"
+    "@xsolla/xui-core": "0.148.2",
+    "@xsolla/xui-primitives-core": "0.148.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",