@xsolla/xui-link 0.148.0 → 0.148.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +194 -0
  2. package/package.json +3 -3
package/README.md ADDED
@@ -0,0 +1,194 @@
1
+ # Link
2
+
3
+ A cross-platform React link component that provides accessible navigation with customizable styling. Supports external links with proper security attributes.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @xsolla/xui-link
9
+ # or
10
+ yarn add @xsolla/xui-link
11
+ ```
12
+
13
+ ## Demo
14
+
15
+ ### Basic Link
16
+
17
+ ```tsx
18
+ import * as React from 'react';
19
+ import { Link } from '@xsolla/xui-link';
20
+
21
+ export default function BasicLink() {
22
+ return (
23
+ <Link href="https://example.com">
24
+ Visit Example
25
+ </Link>
26
+ );
27
+ }
28
+ ```
29
+
30
+ ### With Click Handler
31
+
32
+ ```tsx
33
+ import * as React from 'react';
34
+ import { Link } from '@xsolla/xui-link';
35
+
36
+ export default function ClickableLink() {
37
+ return (
38
+ <Link onClick={() => console.log('Link clicked')}>
39
+ Click me
40
+ </Link>
41
+ );
42
+ }
43
+ ```
44
+
45
+ ### External Link
46
+
47
+ ```tsx
48
+ import * as React from 'react';
49
+ import { Link } from '@xsolla/xui-link';
50
+
51
+ export default function ExternalLink() {
52
+ return (
53
+ <Link
54
+ href="https://external-site.com"
55
+ target="_blank"
56
+ >
57
+ Open in new tab
58
+ </Link>
59
+ );
60
+ }
61
+ ```
62
+
63
+ ### Underlined Link
64
+
65
+ ```tsx
66
+ import * as React from 'react';
67
+ import { Link } from '@xsolla/xui-link';
68
+
69
+ export default function UnderlinedLink() {
70
+ return (
71
+ <Link href="/about" underline={true}>
72
+ About Us
73
+ </Link>
74
+ );
75
+ }
76
+ ```
77
+
78
+ ## Anatomy
79
+
80
+ ```jsx
81
+ import { Link } from '@xsolla/xui-link';
82
+
83
+ <Link
84
+ href="/path" // Link URL
85
+ onClick={handleClick} // Click handler
86
+ target="_blank" // Link target
87
+ rel="noopener" // Link relationship
88
+ size="md" // Size variant
89
+ underline={false} // Show underline
90
+ disabled={false} // Disabled state
91
+ color="#007bff" // Custom text color
92
+ >
93
+ Link Text
94
+ </Link>
95
+ ```
96
+
97
+ ## Examples
98
+
99
+ ### Link Sizes
100
+
101
+ ```tsx
102
+ import * as React from 'react';
103
+ import { Link } from '@xsolla/xui-link';
104
+
105
+ export default function LinkSizes() {
106
+ return (
107
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
108
+ <Link size="sm" href="#">Small Link</Link>
109
+ <Link size="md" href="#">Medium Link</Link>
110
+ <Link size="lg" href="#">Large Link</Link>
111
+ </div>
112
+ );
113
+ }
114
+ ```
115
+
116
+ ### Disabled Link
117
+
118
+ ```tsx
119
+ import * as React from 'react';
120
+ import { Link } from '@xsolla/xui-link';
121
+
122
+ export default function DisabledLink() {
123
+ return (
124
+ <Link href="/disabled" disabled={true}>
125
+ Disabled Link
126
+ </Link>
127
+ );
128
+ }
129
+ ```
130
+
131
+ ### Custom Colored Link
132
+
133
+ ```tsx
134
+ import * as React from 'react';
135
+ import { Link } from '@xsolla/xui-link';
136
+
137
+ export default function ColoredLink() {
138
+ return (
139
+ <Link href="/custom" color="#ff6600">
140
+ Custom Colored Link
141
+ </Link>
142
+ );
143
+ }
144
+ ```
145
+
146
+ ### Inline Links
147
+
148
+ ```tsx
149
+ import * as React from 'react';
150
+ import { Link } from '@xsolla/xui-link';
151
+
152
+ export default function InlineLinks() {
153
+ return (
154
+ <p>
155
+ Read our <Link href="/terms">Terms of Service</Link> and{' '}
156
+ <Link href="/privacy">Privacy Policy</Link> for more information.
157
+ </p>
158
+ );
159
+ }
160
+ ```
161
+
162
+ ## API Reference
163
+
164
+ ### Link
165
+
166
+ **Link Props:**
167
+
168
+ | Prop | Type | Default | Description |
169
+ | :--- | :--- | :------ | :---------- |
170
+ | children | `ReactNode` | - | **Required.** Link content. |
171
+ | href | `string` | - | Link URL. |
172
+ | onClick | `() => void` | - | Click handler. |
173
+ | target | `string` | - | Link target (e.g., "_blank"). |
174
+ | rel | `string` | - | Link relationship attribute. |
175
+ | size | `"sm" \| "md" \| "lg"` | `"md"` | Size variant. |
176
+ | underline | `boolean` | `false` | Show text underline. |
177
+ | disabled | `boolean` | `false` | Disabled state. |
178
+ | color | `string` | Theme link color | Custom text color. |
179
+ | testID | `string` | - | Test identifier. |
180
+
181
+ ## Behavior
182
+
183
+ - External links (`target="_blank"`) automatically add `rel="noopener noreferrer"`
184
+ - Disabled links prevent navigation and show reduced cursor
185
+ - Click handler prevents default navigation when provided
186
+ - Hover state reduces opacity
187
+
188
+ ## Accessibility
189
+
190
+ - Uses native `<a>` element for semantic HTML
191
+ - `role="link"` explicitly set
192
+ - `tabIndex="-1"` when disabled
193
+ - Focus styles with visible outline
194
+ - Disabled links not focusable
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-link",
3
- "version": "0.148.0",
3
+ "version": "0.148.1",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
10
10
  "build:native": "PLATFORM=native tsup"
11
11
  },
12
12
  "dependencies": {
13
- "@xsolla/xui-core": "0.148.0",
14
- "@xsolla/xui-primitives-core": "0.148.0"
13
+ "@xsolla/xui-core": "0.148.1",
14
+ "@xsolla/xui-primitives-core": "0.148.1"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0"