@xsolla/xui-radio 0.148.0 → 0.148.1

package/README.md

@@ -0,0 +1,198 @@
+# 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
+```
+
+## 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
+  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
+/>
+```
+
+## 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 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.148.0",
+  "version": "0.148.1",
   "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.148.0",
-    "@xsolla/xui-primitives-core": "0.148.0"
+    "@xsolla/xui-core": "0.148.1",
+    "@xsolla/xui-primitives-core": "0.148.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",