@xsolla/xui-supporting-text 0.148.0 → 0.148.2

package/README.md

@@ -0,0 +1,243 @@
+# Supporting Text
+
+A cross-platform React component for displaying supporting text around form fields, including labels, helper text, descriptions, and error messages with proper accessibility.
+
+## Installation
+
+```bash
+npm install @xsolla/xui-supporting-text
+# or
+yarn add @xsolla/xui-supporting-text
+```
+
+## Demo
+
+### All Variants
+
+```tsx
+import * as React from 'react';
+import { SupportingText } from '@xsolla/xui-supporting-text';
+
+export default function AllVariants() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <SupportingText variant="label">Label text</SupportingText>
+      <SupportingText variant="helper">Helper text with guidance</SupportingText>
+      <SupportingText variant="description">Description text for context</SupportingText>
+      <SupportingText variant="error">Error message</SupportingText>
+    </div>
+  );
+}
+```
+
+### Different Sizes
+
+```tsx
+import * as React from 'react';
+import { SupportingText } from '@xsolla/xui-supporting-text';
+
+export default function Sizes() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <SupportingText size="xs">Extra small</SupportingText>
+      <SupportingText size="sm">Small</SupportingText>
+      <SupportingText size="md">Medium</SupportingText>
+      <SupportingText size="lg">Large</SupportingText>
+      <SupportingText size="xl">Extra large</SupportingText>
+    </div>
+  );
+}
+```
+
+### With Icon
+
+```tsx
+import * as React from 'react';
+import { SupportingText } from '@xsolla/xui-supporting-text';
+import { Info } from '@xsolla/xui-icons-base';
+
+export default function WithIcon() {
+  return (
+    <SupportingText variant="helper" icon={<Info />} showIcon>
+      Click here for more information
+    </SupportingText>
+  );
+}
+```
+
+## Anatomy
+
+```jsx
+import { SupportingText } from '@xsolla/xui-supporting-text';
+
+<SupportingText
+  variant="helper"          // label, helper, description, error
+  size="md"                  // xs, s, m, l, xl
+  icon={<Icon />}           // Optional icon
+  showIcon={true}           // Show icon
+  id="field-hint"           // ID for aria-describedby
+  aria-label="Hint"         // Accessible label
+>
+  Helper text content
+</SupportingText>
+```
+
+## Examples
+
+### Form Field with Label and Error
+
+```tsx
+import * as React from 'react';
+import { SupportingText } from '@xsolla/xui-supporting-text';
+import { Input } from '@xsolla/xui-input';
+
+export default function FormField() {
+  const [email, setEmail] = React.useState('');
+  const [error, setError] = React.useState('');
+
+  const validate = (value: string) => {
+    if (value && !value.includes('@')) {
+      setError('Please enter a valid email address');
+    } else {
+      setError('');
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+      <SupportingText variant="label" id="email-label">
+        Email address
+      </SupportingText>
+      <Input
+        value={email}
+        onChangeText={(text) => {
+          setEmail(text);
+          validate(text);
+        }}
+        aria-labelledby="email-label"
+        aria-describedby={error ? 'email-error' : 'email-hint'}
+        error={!!error}
+      />
+      {error ? (
+        <SupportingText variant="error" id="email-error">
+          {error}
+        </SupportingText>
+      ) : (
+        <SupportingText variant="helper" id="email-hint">
+          We'll never share your email
+        </SupportingText>
+      )}
+    </div>
+  );
+}
+```
+
+### Password Requirements
+
+```tsx
+import * as React from 'react';
+import { SupportingText } from '@xsolla/xui-supporting-text';
+import { InputPassword } from '@xsolla/xui-input-password';
+
+export default function PasswordField() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+      <SupportingText variant="label">Password</SupportingText>
+      <InputPassword extraSee />
+      <SupportingText variant="description" size="sm">
+        Password must contain at least 8 characters, including uppercase, lowercase, and numbers.
+      </SupportingText>
+    </div>
+  );
+}
+```
+
+### Character Count Helper
+
+```tsx
+import * as React from 'react';
+import { SupportingText } from '@xsolla/xui-supporting-text';
+import { Textarea } from '@xsolla/xui-textarea';
+
+export default function CharacterCount() {
+  const [text, setText] = React.useState('');
+  const maxLength = 280;
+  const isOverLimit = text.length > maxLength;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+      <SupportingText variant="label">Bio</SupportingText>
+      <Textarea
+        value={text}
+        onChangeText={setText}
+        placeholder="Tell us about yourself"
+      />
+      <SupportingText
+        variant={isOverLimit ? 'error' : 'helper'}
+        size="sm"
+      >
+        {text.length}/{maxLength} characters
+      </SupportingText>
+    </div>
+  );
+}
+```
+
+### Field Group with Description
+
+```tsx
+import * as React from 'react';
+import { SupportingText } from '@xsolla/xui-supporting-text';
+import { Checkbox } from '@xsolla/xui-checkbox';
+
+export default function FieldGroup() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <SupportingText variant="label">Notification preferences</SupportingText>
+      <SupportingText variant="description" size="sm">
+        Choose how you'd like to receive updates from us
+      </SupportingText>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 8 }}>
+        <Checkbox label="Email notifications" />
+        <Checkbox label="Push notifications" />
+        <Checkbox label="SMS notifications" />
+      </div>
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SupportingText
+
+**SupportingTextProps:**
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| children | `ReactNode` | - | Text content to display. |
+| variant | `"label" \| "helper" \| "description" \| "error"` | `"helper"` | Visual variant. |
+| size | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Text size. |
+| icon | `ReactNode` | - | Icon to display after text. |
+| showIcon | `boolean` | `false` | Whether to show the icon. |
+| id | `string` | - | HTML id for accessibility linking. |
+| aria-label | `string` | - | Accessible label. |
+| aria-describedby | `string` | - | ID of element this text describes. |
+| testID | `string` | - | Test identifier. |
+
+## Variants
+
+| Variant | Color | Use Case |
+| :------ | :---- | :------- |
+| `label` | Primary | Field labels |
+| `helper` | Tertiary | Guidance and hints |
+| `description` | Tertiary | Additional context |
+| `error` | Alert | Validation errors |
+
+## Accessibility Features
+
+- **Error variant**: Uses `role="alert"` for immediate announcement
+- **Live regions**: Error messages use `aria-live="polite"`
+- **ID linking**: Use `id` with `aria-describedby` on form fields
+- **Color contrast**: Appropriate colors for all variants
+- **Icon handling**: Icons are hidden from screen readers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-supporting-text",
-  "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",