@xsolla/xui-input-copy 0.99.0 → 0.101.0

package/README.md

@@ -1,39 +1,186 @@
-# @xsolla/xui-input-copy
+# Input Copy
 
-Input field with a copy-to-clipboard button and optional hidden text toggle.
+A cross-platform React input component that includes a copy-to-clipboard button. Supports visibility toggle for sensitive data like API keys or tokens.
 
 ## Installation
 
 ```bash
+npm install @xsolla/xui-input-copy
+# or
 yarn add @xsolla/xui-input-copy
 ```
 
-## Usage
+## Demo
+
+### Basic Input Copy
+
+```tsx
+import * as React from 'react';
+import { InputCopy } from '@xsolla/xui-input-copy';
+
+export default function BasicInputCopy() {
+  return (
+    <InputCopy
+      value="sk_live_abc123xyz"
+      onCopy={(val) => console.log('Copied:', val)}
+    />
+  );
+}
+```
+
+### With Label
+
+```tsx
+import * as React from 'react';
+import { InputCopy } from '@xsolla/xui-input-copy';
+
+export default function LabeledInputCopy() {
+  return (
+    <InputCopy
+      label="API Key"
+      value="sk_live_abc123xyz789"
+      onCopy={(val) => console.log('Copied:', val)}
+    />
+  );
+}
+```
+
+### Secure Text Entry
 
 ```tsx
+import * as React from 'react';
+import { InputCopy } from '@xsolla/xui-input-copy';
+
+export default function SecureInputCopy() {
+  return (
+    <InputCopy
+      label="Secret Token"
+      value="super_secret_token_12345"
+      secureTextEntry={true}
+      onCopy={(val) => console.log('Copied:', val)}
+    />
+  );
+}
+```
+
+### Editable Input Copy
+
+```tsx
+import * as React from 'react';
+import { InputCopy } from '@xsolla/xui-input-copy';
+
+export default function EditableInputCopy() {
+  const [value, setValue] = React.useState('editable-value');
+
+  return (
+    <InputCopy
+      label="Editable Field"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onCopy={(val) => console.log('Copied:', val)}
+    />
+  );
+}
+```
+
+## Anatomy
+
+```jsx
 import { InputCopy } from '@xsolla/xui-input-copy';
 
 <InputCopy
-  label="API key"
-  value="sk-abc123"
-  onCopy={(v) => console.log('Copied:', v)}
+  value="text to copy"         // Value to display and copy
+  onChange={handleChange}      // Change event handler
+  onCopy={handleCopy}          // Callback after copying
+  secureTextEntry={false}      // Hide text like password
+  initialVisible={false}       // Initial visibility (when secure)
+  size="md"                     // Size variant
+  label="Label"                // Label above input
+  disabled={false}             // Disabled state
+  error={false}                // Error state
+  errorMessage="Error"         // Error message text
 />
 ```
 
-## Props
+## Examples
+
+### Input Copy Sizes
+
+```tsx
+import * as React from 'react';
+import { InputCopy } from '@xsolla/xui-input-copy';
+
+export default function InputCopySizes() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <InputCopy size="xs" value="Extra Small" />
+      <InputCopy size="sm" value="Small" />
+      <InputCopy size="md" value="Medium" />
+      <InputCopy size="lg" value="Large" />
+      <InputCopy size="xl" value="Extra Large" />
+    </div>
+  );
+}
+```
+
+### Error State
+
+```tsx
+import * as React from 'react';
+import { InputCopy } from '@xsolla/xui-input-copy';
+
+export default function ErrorInputCopy() {
+  return (
+    <InputCopy
+      label="API Key"
+      value="invalid-key"
+      error={true}
+      errorMessage="Invalid API key format"
+    />
+  );
+}
+```
+
+## API Reference
 
 ### InputCopy
 
+**InputCopy Props:**
+
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `string` | `''` | Controlled value |
-| `onCopy` | `(value: string) => void` | — | Called after value is copied to clipboard |
-| `secureTextEntry` | `boolean` | `false` | Masks the value like a password field |
-| `initialVisible` | `boolean` | `false` | Initial visibility when `secureTextEntry` is `true` |
-| `size` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | Input size |
-| `disabled` | `boolean` | `false` | Disables the input and copy button |
-| `label` | `string` | — | Label displayed above the input |
-| `errorMessage` | `string` | — | Error text displayed below; also sets invalid state |
-| `error` | `boolean` | — | Sets invalid state without a message |
-| `onChange` | `(e: ChangeEvent) => void` | — | Change handler |
-| `onChangeText` | `(text: string) => void` | — | Alternative change handler receiving the string value |
+| :--- | :--- | :------ | :---------- |
+| value | `string` | `""` | Value to display and copy. |
+| onChange | `(e: ChangeEvent) => void` | - | Change event handler. |
+| onChangeText | `(text: string) => void` | - | Text change handler. |
+| onCopy | `(value: string) => void` | - | Callback when value is copied. |
+| secureTextEntry | `boolean` | `false` | Hide text like a password field. |
+| initialVisible | `boolean` | `false` | Initial visibility when secureTextEntry is true. |
+| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Component size. |
+| label | `string` | - | Label above input. |
+| disabled | `boolean` | `false` | Disabled state. |
+| error | `boolean` | `false` | Error state. |
+| errorMessage | `string` | - | Error message text. |
+| placeholder | `string` | - | Placeholder text. |
+| testID | `string` | - | Test identifier. |
+
+## Behavior
+
+- **Copy Button**: Shows checkmark icon briefly (2 seconds) after successful copy
+- **Visibility Toggle**: When `secureTextEntry` is enabled, the eye icon reflects the current state:
+  - Open eye (👁️) = Text is currently **visible** (type="text")
+  - Closed eye (🙈) = Text is currently **hidden** (type="password")
+  - This follows modern design system conventions (Material, Apple, Atlassian, Polaris)
+- Uses browser Clipboard API for copying
+- Error state shows red border and error message
+
+## Accessibility
+
+- Copy button has `aria-label` that changes from "Copy to clipboard" to "Copied" after action
+- Visibility toggle button has appropriate `aria-label`:
+  - "Show text" when text is hidden
+  - "Hide text" when text is visible
+- Toggle button uses `aria-pressed` to indicate current visibility state
+- Error messages linked via `aria-describedby` for screen reader context
+- Labels properly linked via `aria-labelledby` when provided
+- Input has `aria-invalid` when in error state
+- Error messages use `role="alert"` for immediate announcement

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-input-copy",
-  "version": "0.99.0",
+  "version": "0.101.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,11 +13,11 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-button": "0.99.0",
-    "@xsolla/xui-core": "0.99.0",
-    "@xsolla/xui-icons": "0.99.0",
-    "@xsolla/xui-input": "0.99.0",
-    "@xsolla/xui-primitives-core": "0.99.0"
+    "@xsolla/xui-button": "0.101.0",
+    "@xsolla/xui-core": "0.101.0",
+    "@xsolla/xui-icons": "0.101.0",
+    "@xsolla/xui-input": "0.101.0",
+    "@xsolla/xui-primitives-core": "0.101.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",