@xsolla/xui-radio-group 0.99.0 → 0.100.0
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.
- package/README.md +246 -15
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,34 +1,265 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Radio Group
|
|
3
|
+
subtitle: A group of radio buttons with shared state.
|
|
4
|
+
description: A cross-platform React radio group component that manages single selection across multiple radio buttons.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Radio Group
|
|
8
|
+
|
|
9
|
+
A cross-platform React radio group component that manages single selection across multiple radio buttons. Provides context to child Radio components for coordinated selection.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
8
|
-
|
|
14
|
+
npm install @xsolla/xui-radio-group @xsolla/xui-radio
|
|
15
|
+
# or
|
|
16
|
+
yarn add @xsolla/xui-radio-group @xsolla/xui-radio
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Basic Radio Group
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { RadioGroup } from '@xsolla/xui-radio-group';
|
|
26
|
+
import { Radio } from '@xsolla/xui-radio';
|
|
27
|
+
|
|
28
|
+
export default function BasicRadioGroup() {
|
|
29
|
+
const [value, setValue] = React.useState('option1');
|
|
30
|
+
|
|
31
|
+
return (
|
|
32
|
+
<RadioGroup value={value} onChange={setValue}>
|
|
33
|
+
<Radio value="option1" label="Option 1" />
|
|
34
|
+
<Radio value="option2" label="Option 2" />
|
|
35
|
+
<Radio value="option3" label="Option 3" />
|
|
36
|
+
</RadioGroup>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
9
39
|
```
|
|
10
40
|
|
|
11
|
-
|
|
41
|
+
### Horizontal Layout
|
|
12
42
|
|
|
13
43
|
```tsx
|
|
44
|
+
import * as React from 'react';
|
|
45
|
+
import { RadioGroup } from '@xsolla/xui-radio-group';
|
|
46
|
+
import { Radio } from '@xsolla/xui-radio';
|
|
47
|
+
|
|
48
|
+
export default function HorizontalRadioGroup() {
|
|
49
|
+
const [size, setSize] = React.useState('md');
|
|
50
|
+
|
|
51
|
+
return (
|
|
52
|
+
<RadioGroup value={size} onChange={setSize} flexDirection="row" gap={24}>
|
|
53
|
+
<Radio value="sm" label="Small" />
|
|
54
|
+
<Radio value="md" label="Medium" />
|
|
55
|
+
<Radio value="lg" label="Large" />
|
|
56
|
+
</RadioGroup>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Radio Group with Descriptions
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import * as React from 'react';
|
|
65
|
+
import { RadioGroup } from '@xsolla/xui-radio-group';
|
|
66
|
+
import { Radio } from '@xsolla/xui-radio';
|
|
67
|
+
|
|
68
|
+
export default function RadioGroupWithDescriptions() {
|
|
69
|
+
const [plan, setPlan] = React.useState('starter');
|
|
70
|
+
|
|
71
|
+
return (
|
|
72
|
+
<RadioGroup value={plan} onChange={setPlan} gap={16}>
|
|
73
|
+
<Radio
|
|
74
|
+
value="starter"
|
|
75
|
+
label="Starter"
|
|
76
|
+
description="$9/month - Best for personal projects"
|
|
77
|
+
/>
|
|
78
|
+
<Radio
|
|
79
|
+
value="professional"
|
|
80
|
+
label="Professional"
|
|
81
|
+
description="$29/month - Best for small teams"
|
|
82
|
+
/>
|
|
83
|
+
<Radio
|
|
84
|
+
value="enterprise"
|
|
85
|
+
label="Enterprise"
|
|
86
|
+
description="Custom pricing - For large organizations"
|
|
87
|
+
/>
|
|
88
|
+
</RadioGroup>
|
|
89
|
+
);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Disabled Radio Group
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
import * as React from 'react';
|
|
97
|
+
import { RadioGroup } from '@xsolla/xui-radio-group';
|
|
98
|
+
import { Radio } from '@xsolla/xui-radio';
|
|
99
|
+
|
|
100
|
+
export default function DisabledRadioGroup() {
|
|
101
|
+
return (
|
|
102
|
+
<RadioGroup value="option1" disabled>
|
|
103
|
+
<Radio value="option1" label="Option 1" />
|
|
104
|
+
<Radio value="option2" label="Option 2" />
|
|
105
|
+
<Radio value="option3" label="Option 3" />
|
|
106
|
+
</RadioGroup>
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Anatomy
|
|
112
|
+
|
|
113
|
+
Import the components and compose them:
|
|
114
|
+
|
|
115
|
+
```jsx
|
|
14
116
|
import { RadioGroup } from '@xsolla/xui-radio-group';
|
|
15
117
|
import { Radio } from '@xsolla/xui-radio';
|
|
16
118
|
|
|
17
|
-
<RadioGroup
|
|
18
|
-
|
|
19
|
-
|
|
119
|
+
<RadioGroup
|
|
120
|
+
value={selectedValue} // Currently selected value
|
|
121
|
+
onChange={handleChange} // Selection change handler
|
|
122
|
+
size="md" // Size for all child radios
|
|
123
|
+
disabled={false} // Disable all radios
|
|
124
|
+
flexDirection="column" // Layout direction
|
|
125
|
+
gap={12} // Gap between items
|
|
126
|
+
>
|
|
127
|
+
<Radio value="a" label="Option A" />
|
|
128
|
+
<Radio value="b" label="Option B" />
|
|
129
|
+
<Radio value="c" label="Option C" />
|
|
20
130
|
</RadioGroup>
|
|
21
131
|
```
|
|
22
132
|
|
|
23
|
-
##
|
|
133
|
+
## Examples
|
|
134
|
+
|
|
135
|
+
### Form Integration
|
|
136
|
+
|
|
137
|
+
```tsx
|
|
138
|
+
import * as React from 'react';
|
|
139
|
+
import { RadioGroup } from '@xsolla/xui-radio-group';
|
|
140
|
+
import { Radio } from '@xsolla/xui-radio';
|
|
141
|
+
import { Button } from '@xsolla/xui-button';
|
|
142
|
+
|
|
143
|
+
export default function FormRadioGroup() {
|
|
144
|
+
const [shipping, setShipping] = React.useState('');
|
|
145
|
+
const [error, setError] = React.useState('');
|
|
146
|
+
|
|
147
|
+
const handleSubmit = (e: React.FormEvent) => {
|
|
148
|
+
e.preventDefault();
|
|
149
|
+
if (!shipping) {
|
|
150
|
+
setError('Please select a shipping method');
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
console.log('Selected shipping:', shipping);
|
|
154
|
+
};
|
|
155
|
+
|
|
156
|
+
return (
|
|
157
|
+
<form onSubmit={handleSubmit}>
|
|
158
|
+
<h3 id="shipping-label">Select Shipping Method</h3>
|
|
159
|
+
<RadioGroup
|
|
160
|
+
value={shipping}
|
|
161
|
+
onChange={(v) => { setShipping(v); setError(''); }}
|
|
162
|
+
aria-labelledby="shipping-label"
|
|
163
|
+
aria-describedby={error ? 'shipping-error' : undefined}
|
|
164
|
+
>
|
|
165
|
+
<Radio
|
|
166
|
+
value="standard"
|
|
167
|
+
label="Standard Shipping"
|
|
168
|
+
description="5-7 business days - Free"
|
|
169
|
+
/>
|
|
170
|
+
<Radio
|
|
171
|
+
value="express"
|
|
172
|
+
label="Express Shipping"
|
|
173
|
+
description="2-3 business days - $9.99"
|
|
174
|
+
/>
|
|
175
|
+
<Radio
|
|
176
|
+
value="overnight"
|
|
177
|
+
label="Overnight Shipping"
|
|
178
|
+
description="Next business day - $24.99"
|
|
179
|
+
/>
|
|
180
|
+
</RadioGroup>
|
|
181
|
+
{error && <p id="shipping-error" role="alert" style={{ color: 'red' }}>{error}</p>}
|
|
182
|
+
<Button type="submit" style={{ marginTop: 16 }}>Continue</Button>
|
|
183
|
+
</form>
|
|
184
|
+
);
|
|
185
|
+
}
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### Different Sizes
|
|
189
|
+
|
|
190
|
+
```tsx
|
|
191
|
+
import * as React from 'react';
|
|
192
|
+
import { RadioGroup } from '@xsolla/xui-radio-group';
|
|
193
|
+
import { Radio } from '@xsolla/xui-radio';
|
|
194
|
+
|
|
195
|
+
export default function RadioGroupSizes() {
|
|
196
|
+
const [value, setValue] = React.useState('a');
|
|
197
|
+
|
|
198
|
+
return (
|
|
199
|
+
<div style={{ display: 'flex', gap: 48 }}>
|
|
200
|
+
<div>
|
|
201
|
+
<h4>Small</h4>
|
|
202
|
+
<RadioGroup value={value} onChange={setValue} size="sm">
|
|
203
|
+
<Radio value="a" label="Option A" />
|
|
204
|
+
<Radio value="b" label="Option B" />
|
|
205
|
+
</RadioGroup>
|
|
206
|
+
</div>
|
|
207
|
+
<div>
|
|
208
|
+
<h4>Large</h4>
|
|
209
|
+
<RadioGroup value={value} onChange={setValue} size="lg">
|
|
210
|
+
<Radio value="a" label="Option A" />
|
|
211
|
+
<Radio value="b" label="Option B" />
|
|
212
|
+
</RadioGroup>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
);
|
|
216
|
+
}
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
## API Reference
|
|
24
220
|
|
|
25
221
|
### RadioGroup
|
|
26
222
|
|
|
223
|
+
Container component that provides selection context to Radio children.
|
|
224
|
+
|
|
225
|
+
**RadioGroup Props:**
|
|
226
|
+
|
|
27
227
|
| Prop | Type | Default | Description |
|
|
28
|
-
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
|
|
|
33
|
-
|
|
|
34
|
-
|
|
|
228
|
+
| :--- | :--- | :------ | :---------- |
|
|
229
|
+
| children | `ReactNode` | - | **Required.** Radio components to group. |
|
|
230
|
+
| value | `string` | - | Currently selected value. |
|
|
231
|
+
| onChange | `(value: string) => void` | - | Callback when selection changes. |
|
|
232
|
+
| size | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size applied to all child Radio components. |
|
|
233
|
+
| disabled | `boolean` | `false` | Whether all radios are disabled. |
|
|
234
|
+
| flexDirection | `"row" \| "column"` | `"column"` | Layout direction of the group. |
|
|
235
|
+
| gap | `number` | `12` | Gap between radio items in pixels. |
|
|
236
|
+
|
|
237
|
+
### RadioGroup Context
|
|
238
|
+
|
|
239
|
+
RadioGroup provides context to child Radio components:
|
|
240
|
+
|
|
241
|
+
```typescript
|
|
242
|
+
interface RadioGroupContextProps {
|
|
243
|
+
value?: string; // Currently selected value
|
|
244
|
+
onChange?: (value: string) => void; // Selection handler
|
|
245
|
+
size?: "sm" | "md" | "lg" | "xl"; // Size for radios
|
|
246
|
+
disabled?: boolean; // Disabled state
|
|
247
|
+
}
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
Child Radio components automatically:
|
|
251
|
+
- Sync their checked state with the group value
|
|
252
|
+
- Call the group's onChange when selected
|
|
253
|
+
- Inherit size and disabled props from the group
|
|
254
|
+
|
|
255
|
+
## Theming
|
|
256
|
+
|
|
257
|
+
RadioGroup uses flexbox layout with theme-based spacing. Child Radio components use the design system theme for colors.
|
|
258
|
+
|
|
259
|
+
## Accessibility
|
|
260
|
+
|
|
261
|
+
- RadioGroup provides proper grouping semantics
|
|
262
|
+
- Only one radio can be selected at a time
|
|
263
|
+
- Arrow keys navigate between options when focused
|
|
264
|
+
- Tab key moves focus to/from the group
|
|
265
|
+
- Disabled state properly communicated to all children
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-radio-group",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.100.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-core": "0.
|
|
14
|
-
"@xsolla/xui-primitives-core": "0.
|
|
15
|
-
"@xsolla/xui-radio": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.100.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.100.0",
|
|
15
|
+
"@xsolla/xui-radio": "0.100.0"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8.0",
|