@xsolla/xui-link 0.99.0 → 0.101.0

package/README.md

@@ -1,34 +1,194 @@
-# @xsolla/xui-link
+# Link
 
-A styled anchor component with support for disabled state, underline, and secure external link handling.
+A cross-platform React link component that provides accessible navigation with customizable styling. Supports external links with proper security attributes.
 
 ## Installation
 
 ```bash
+npm install @xsolla/xui-link
+# or
 yarn add @xsolla/xui-link
 ```
 
-## Usage
+## Demo
+
+### Basic Link
+
+```tsx
+import * as React from 'react';
+import { Link } from '@xsolla/xui-link';
+
+export default function BasicLink() {
+  return (
+    <Link href="https://example.com">
+      Visit Example
+    </Link>
+  );
+}
+```
+
+### With Click Handler
 
 ```tsx
-import { Link } from "@xsolla/xui-link";
+import * as React from 'react';
+import { Link } from '@xsolla/xui-link';
 
-<Link href="https://xsolla.com" target="_blank">
-  Visit Xsolla
+export default function ClickableLink() {
+  return (
+    <Link onClick={() => console.log('Link clicked')}>
+      Click me
+    </Link>
+  );
+}
+```
+
+### External Link
+
+```tsx
+import * as React from 'react';
+import { Link } from '@xsolla/xui-link';
+
+export default function ExternalLink() {
+  return (
+    <Link
+      href="https://external-site.com"
+      target="_blank"
+    >
+      Open in new tab
+    </Link>
+  );
+}
+```
+
+### Underlined Link
+
+```tsx
+import * as React from 'react';
+import { Link } from '@xsolla/xui-link';
+
+export default function UnderlinedLink() {
+  return (
+    <Link href="/about" underline={true}>
+      About Us
+    </Link>
+  );
+}
+```
+
+## Anatomy
+
+```jsx
+import { Link } from '@xsolla/xui-link';
+
+<Link
+  href="/path"               // Link URL
+  onClick={handleClick}      // Click handler
+  target="_blank"            // Link target
+  rel="noopener"             // Link relationship
+  size="md"                  // Size variant
+  underline={false}          // Show underline
+  disabled={false}           // Disabled state
+  color="#007bff"            // Custom text color
+>
+  Link Text
 </Link>
 ```
 
-## Props
+## Examples
+
+### Link Sizes
+
+```tsx
+import * as React from 'react';
+import { Link } from '@xsolla/xui-link';
+
+export default function LinkSizes() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <Link size="sm" href="#">Small Link</Link>
+      <Link size="md" href="#">Medium Link</Link>
+      <Link size="lg" href="#">Large Link</Link>
+    </div>
+  );
+}
+```
+
+### Disabled Link
+
+```tsx
+import * as React from 'react';
+import { Link } from '@xsolla/xui-link';
+
+export default function DisabledLink() {
+  return (
+    <Link href="/disabled" disabled={true}>
+      Disabled Link
+    </Link>
+  );
+}
+```
+
+### Custom Colored Link
+
+```tsx
+import * as React from 'react';
+import { Link } from '@xsolla/xui-link';
+
+export default function ColoredLink() {
+  return (
+    <Link href="/custom" color="#ff6600">
+      Custom Colored Link
+    </Link>
+  );
+}
+```
+
+### Inline Links
+
+```tsx
+import * as React from 'react';
+import { Link } from '@xsolla/xui-link';
+
+export default function InlineLinks() {
+  return (
+    <p>
+      Read our <Link href="/terms">Terms of Service</Link> and{' '}
+      <Link href="/privacy">Privacy Policy</Link> for more information.
+    </p>
+  );
+}
+```
+
+## API Reference
 
 ### Link
 
+**Link Props:**
+
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `href` | `string` | — | URL or path for the link |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Font size variant |
-| `disabled` | `boolean` | `false` | Prevents navigation and applies disabled styling |
-| `underline` | `boolean` | `false` | Adds text underline decoration |
-| `onClick` | `() => void` | — | Click handler; prevents default navigation when provided |
-| `target` | `string` | — | Anchor `target` attribute (e.g. `"_blank"`) |
-| `rel` | `string` | — | Anchor `rel` attribute; `noopener noreferrer` is merged automatically for `target="_blank"` |
-| `color` | `string` | — | Overrides the default link colour |
+| :--- | :--- | :------ | :---------- |
+| children | `ReactNode` | - | **Required.** Link content. |
+| href | `string` | - | Link URL. |
+| onClick | `() => void` | - | Click handler. |
+| target | `string` | - | Link target (e.g., "_blank"). |
+| rel | `string` | - | Link relationship attribute. |
+| size | `"sm" \| "md" \| "lg"` | `"md"` | Size variant. |
+| underline | `boolean` | `false` | Show text underline. |
+| disabled | `boolean` | `false` | Disabled state. |
+| color | `string` | Theme link color | Custom text color. |
+| testID | `string` | - | Test identifier. |
+
+## Behavior
+
+- External links (`target="_blank"`) automatically add `rel="noopener noreferrer"`
+- Disabled links prevent navigation and show reduced cursor
+- Click handler prevents default navigation when provided
+- Hover state reduces opacity
+
+## Accessibility
+
+- Uses native `<a>` element for semantic HTML
+- `role="link"` explicitly set
+- `tabIndex="-1"` when disabled
+- Focus styles with visible outline
+- Disabled links not focusable

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-link",
-  "version": "0.99.0",
+  "version": "0.101.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.101.0",
+    "@xsolla/xui-primitives-core": "0.101.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0"