@xsolla/xui-textarea 0.99.0 → 0.100.0

package/README.md

@@ -1,35 +1,227 @@
-# @xsolla/xui-textarea
+---
+title: Textarea
+subtitle: A multi-line text input.
+description: A cross-platform React textarea component for multi-line text input with validation support.
+---
 
-Accessible multi-line text input rendered as a native `<textarea>` element.
+# 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
 ```
 
-## Usage
+## 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
-  placeholder="Enter a description"
-  value={text}
-  onChangeText={setText}
-  errorMessage="This field is required"
+  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
 />
 ```
 
-## Props
+## 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` | — | Controlled value |
-| `placeholder` | `string` | — | Placeholder text |
-| `onChangeText` | `(text: string) => void` | — | Called with the new string value on change |
-| `size` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | Textarea size |
-| `disabled` | `boolean` | `false` | Disables the textarea |
-| `errorMessage` | `string` | — | Error text displayed below; also sets invalid state |
+| :--- | :--- | :------ | :---------- |
+| 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.99.0",
+  "version": "0.100.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.99.0",
-    "@xsolla/xui-primitives-core": "0.99.0"
+    "@xsolla/xui-core": "0.100.0",
+    "@xsolla/xui-primitives-core": "0.100.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",