@xsolla/xui-radio 0.99.0 → 0.100.0

package/README.md

@@ -1,39 +1,204 @@
-# @xsolla/xui-radio
+---
+title: Radio
+subtitle: A radio button for single selection.
+description: A cross-platform React radio button component for selecting one option from a group.
+---
 
-Accessible radio button with label, description, and error state; integrates with RadioGroup.
+# Radio
+
+A cross-platform React radio button component for selecting one option from a group. Works standalone or with RadioGroup for coordinated selection.
 
 ## Installation
 
 ```bash
+npm install @xsolla/xui-radio
+# or
 yarn add @xsolla/xui-radio
 ```
 
-## Usage
+## Demo
+
+### Basic Radio
+
+```tsx
+import * as React from 'react';
+import { Radio } from '@xsolla/xui-radio';
+
+export default function BasicRadio() {
+  const [selected, setSelected] = React.useState('');
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Radio
+        checked={selected === 'option1'}
+        onPress={() => setSelected('option1')}
+        label="Option 1"
+      />
+      <Radio
+        checked={selected === 'option2'}
+        onPress={() => setSelected('option2')}
+        label="Option 2"
+      />
+      <Radio
+        checked={selected === 'option3'}
+        onPress={() => setSelected('option3')}
+        label="Option 3"
+      />
+    </div>
+  );
+}
+```
+
+### Radio with Description
+
+```tsx
+import * as React from 'react';
+import { Radio } from '@xsolla/xui-radio';
+
+export default function RadioWithDescription() {
+  const [plan, setPlan] = React.useState('basic');
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Radio
+        checked={plan === 'basic'}
+        onPress={() => setPlan('basic')}
+        label="Basic Plan"
+        description="Best for individuals, includes core features"
+      />
+      <Radio
+        checked={plan === 'pro'}
+        onPress={() => setPlan('pro')}
+        label="Pro Plan"
+        description="Best for teams, includes advanced features"
+      />
+      <Radio
+        checked={plan === 'enterprise'}
+        onPress={() => setPlan('enterprise')}
+        label="Enterprise Plan"
+        description="Custom solutions for large organizations"
+      />
+    </div>
+  );
+}
+```
+
+### Radio Sizes
 
 ```tsx
+import * as React from 'react';
+import { Radio } from '@xsolla/xui-radio';
+
+export default function RadioSizes() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Radio size="sm" label="Small radio" checked />
+      <Radio size="md" label="Medium radio (default)" checked />
+      <Radio size="lg" label="Large radio" checked />
+      <Radio size="xl" label="Extra large radio" checked />
+    </div>
+  );
+}
+```
+
+## Anatomy
+
+Import the component and use it directly:
+
+```jsx
 import { Radio } from '@xsolla/xui-radio';
 
 <Radio
-  value="monthly"
-  checked={billing === 'monthly'}
-  label="Monthly billing"
-  description="Billed every month"
-  onPress={() => setBilling('monthly')}
+  checked={isSelected}          // Whether this radio is selected
+  onPress={handleSelect}        // Click/tap handler
+  onValueChange={handleChange}  // Value change handler
+  value="option1"               // Value for RadioGroup context
+  label="Option label"          // Label text
+  description="Help text"       // Description below label
+  errorLabel="Error text"       // Error message
+  state="default"               // Visual state
+  size="md"                      // Size variant
 />
 ```
 
-## Props
+## Examples
+
+### Error State
+
+```tsx
+import * as React from 'react';
+import { Radio } from '@xsolla/xui-radio';
+
+export default function ErrorRadio() {
+  return (
+    <Radio
+      checked={false}
+      state="error"
+      label="Select this option"
+      errorLabel="Please make a selection"
+    />
+  );
+}
+```
+
+### Disabled Radio
+
+```tsx
+import * as React from 'react';
+import { Radio } from '@xsolla/xui-radio';
+
+export default function DisabledRadio() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Radio state="disable" label="Disabled unchecked" />
+      <Radio state="disable" checked label="Disabled checked" />
+    </div>
+  );
+}
+```
+
+## API Reference
 
 ### Radio
 
+A single radio button component.
+
+**Radio Props:**
+
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `checked` | `boolean` | `false` | Whether the radio button is selected |
-| `value` | `string` | — | Value passed to the parent `RadioGroup` |
-| `onPress` | `() => void` | — | Called when the radio button is activated |
-| `label` | `string` | — | Label text displayed next to the button |
-| `description` | `string` | — | Descriptive text shown below the label |
-| `errorLabel` | `string` | — | Error message shown when `state` is `"error"` |
-| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size of the control |
-| `state` | `"default" \| "hover" \| "disable" \| "error"` | `"default"` | Visual state |
-| `disabled` | `boolean` | `false` | Disables the control |
+| :--- | :--- | :------ | :---------- |
+| checked | `boolean` | `false` | Whether the radio button is selected. |
+| value | `string` | - | Value used when within RadioGroup. |
+| size | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size of the radio button. |
+| state | `"default" \| "hover" \| "disable" \| "error"` | `"default"` | Visual state of the radio. |
+| label | `string` | - | Label text displayed next to the radio. |
+| description | `string` | - | Description text below the label. |
+| errorLabel | `string` | - | Error message when state is "error". |
+| onPress | `() => void` | - | Callback when the radio is pressed. |
+| onValueChange | `(value: boolean) => void` | - | Callback when checked state changes. |
+| aria-label | `string` | - | Accessible label for screen readers. |
+| aria-labelledby | `string` | - | ID of element that labels this radio. |
+
+## Theming
+
+Radio uses the design system theme for colors:
+
+```typescript
+// Colors accessed via theme
+theme.colors.control.radio.bg              // Unchecked background
+theme.colors.control.radio.bgChecked       // Checked background
+theme.colors.control.radio.border          // Border color
+theme.colors.control.radio.borderChecked   // Checked border
+theme.colors.control.radio.dot             // Inner dot color
+theme.colors.content.primary               // Label text
+theme.colors.content.secondary             // Description text
+theme.colors.content.error                 // Error text
+```
+
+## Accessibility
+
+- Uses `role="radio"` with proper ARIA attributes
+- `aria-checked` reflects selection state
+- Keyboard support (Space to select)
+- Focus indicator follows WCAG guidelines
+- Works with RadioGroup for proper group semantics

package/package.json

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