@xsolla/xui-switch 0.149.1 → 0.151.0

package/README.md

@@ -1,257 +1,104 @@
 # Switch
 
-A cross-platform React switch component for toggling between on and off states. Provides a visual alternative to checkboxes for boolean settings.
+A cross-platform toggle for binary on/off settings; a visual alternative to a checkbox.
 
 ## Installation
 
 ```bash
 npm install @xsolla/xui-switch
-# or
-yarn add @xsolla/xui-switch
 ```
 
-## Demo
-
-### Basic Switch
+## Imports
 
 ```tsx
-import * as React from 'react';
 import { Switch } from '@xsolla/xui-switch';
-
-export default function BasicSwitch() {
-  const [enabled, setEnabled] = React.useState(false);
-
-  return (
-    <Switch
-      checked={enabled}
-      onValueChange={setEnabled}
-      label="Enable notifications"
-    />
-  );
-}
+import type { SwitchProps } from '@xsolla/xui-switch';
 ```
 
-### Switch with Description
+## Quick start
 
 ```tsx
-import * as React from 'react';
-import { Switch } from '@xsolla/xui-switch';
-
-export default function SwitchWithDescription() {
-  const [darkMode, setDarkMode] = React.useState(false);
+const [enabled, setEnabled] = useState(false);
 
-  return (
-    <Switch
-      checked={darkMode}
-      onValueChange={setDarkMode}
-      label="Dark Mode"
-      description="Enable dark theme across the application"
-    />
-  );
-}
+<Switch
+  checked={enabled}
+  onValueChange={setEnabled}
+  label="Enable notifications"
+/>;
 ```
 
-### Label Position
+## API Reference
 
-```tsx
-import * as React from 'react';
-import { Switch } from '@xsolla/xui-switch';
+### `<Switch>`
 
-export default function SwitchLabelPosition() {
-  const [left, setLeft] = React.useState(false);
-  const [right, setRight] = React.useState(false);
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `checked` | `boolean` | `false` | Whether the switch is on. |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Size of the switch. |
+| `state` | `'default' \| 'hover' \| 'disable' \| 'error'` | `'default'` | Visual state. |
+| `disabled` | `boolean` | `false` | Disable the switch. |
+| `label` | `string` | — | Label text shown next to the switch. |
+| `labelPosition` | `'left' \| 'right'` | `'right'` | Position of the label. |
+| `description` | `string` | — | Description text below the label. |
+| `errorLabel` | `string` | — | Error message shown when `state === 'error'`. |
+| `onValueChange` | `(value: boolean) => void` | — | Fired when toggled. |
+| `ariaLabel` | `string` | — | Accessible label for screen readers. |
+| `ariaLabelledBy` | `string` | — | ID of an element that labels the switch. |
+
+Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
 
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <Switch
-        label="Label on the right (default)"
-        labelPosition="right"
-        checked={right}
-        onValueChange={setRight}
-      />
-      <Switch
-        label="Label on the left"
-        labelPosition="left"
-        checked={left}
-        onValueChange={setLeft}
-      />
-    </div>
-  );
-}
-```
+## Examples
 
-### Switch Sizes
+### With description
 
 ```tsx
-import * as React from 'react';
-import { Switch } from '@xsolla/xui-switch';
-
-export default function SwitchSizes() {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <Switch size="sm" label="Small switch" checked />
-      <Switch size="md" label="Medium switch (default)" checked />
-      <Switch size="lg" label="Large switch" checked />
-      <Switch size="xl" label="Extra large switch" checked />
-    </div>
-  );
-}
-```
-
-## Anatomy
-
-Import the component and use it directly:
-
-```jsx
-import { Switch } from '@xsolla/xui-switch';
+const [darkMode, setDarkMode] = useState(false);
 
 <Switch
-  checked={isEnabled}           // Whether switch is on
-  onValueChange={handleToggle}  // Toggle handler
-  label="Setting label"         // Label text
-  labelPosition="right"         // "left" | "right" (default: "right")
-  description="Help text"       // Description below label
-  errorLabel="Error text"       // Error message
-  state="default"               // Visual state
-  size="md"                      // Size variant
-/>
+  checked={darkMode}
+  onValueChange={setDarkMode}
+  label="Dark mode"
+  description="Enable dark theme across the application"
+/>;
 ```
 
-## Examples
-
-### Settings Panel
+### Label positions
 
 ```tsx
-import * as React from 'react';
-import { Switch } from '@xsolla/xui-switch';
-
-export default function SettingsPanel() {
-  const [settings, setSettings] = React.useState({
-    notifications: true,
-    sounds: false,
-    autoUpdate: true,
-    analytics: false,
-  });
-
-  const toggle = (key: string) => (value: boolean) => {
-    setSettings((prev) => ({ ...prev, [key]: value }));
-  };
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
-      <Switch
-        checked={settings.notifications}
-        onValueChange={toggle('notifications')}
-        label="Push Notifications"
-        description="Receive push notifications for important updates"
-      />
-      <Switch
-        checked={settings.sounds}
-        onValueChange={toggle('sounds')}
-        label="Sound Effects"
-        description="Play sounds for actions and alerts"
-      />
-      <Switch
-        checked={settings.autoUpdate}
-        onValueChange={toggle('autoUpdate')}
-        label="Auto Update"
-        description="Automatically download and install updates"
-      />
-      <Switch
-        checked={settings.analytics}
-        onValueChange={toggle('analytics')}
-        label="Usage Analytics"
-        description="Help improve the app by sharing anonymous usage data"
-      />
-    </div>
-  );
-}
+<Switch label="Label on the right" labelPosition="right" />
+<Switch label="Label on the left" labelPosition="left" />
 ```
 
-### Error State
+### Sizes
 
 ```tsx
-import * as React from 'react';
-import { Switch } from '@xsolla/xui-switch';
-
-export default function ErrorSwitch() {
-  return (
-    <Switch
-      checked={false}
-      state="error"
-      label="Required Setting"
-      errorLabel="This setting must be enabled to continue"
-    />
-  );
-}
+<Switch size="sm" label="Small" checked />
+<Switch size="md" label="Medium" checked />
+<Switch size="lg" label="Large" checked />
+<Switch size="xl" label="Extra large" checked />
 ```
 
-### Disabled Switch
+### Error state
 
 ```tsx
-import * as React from 'react';
-import { Switch } from '@xsolla/xui-switch';
-
-export default function DisabledSwitch() {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-      <Switch state="disable" label="Disabled off" />
-      <Switch state="disable" checked label="Disabled on" />
-    </div>
-  );
-}
+<Switch
+  checked={false}
+  state="error"
+  label="Required setting"
+  errorLabel="This setting must be enabled to continue"
+/>
 ```
 
-## API Reference
+### Disabled
 
-### Switch
-
-A toggle switch component.
-
-**Switch Props:**
-
-| Prop | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| checked | `boolean` | `false` | Whether the switch is on. |
-| size | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Size of the switch. |
-| state | `"default" \| "hover" \| "disable" \| "error"` | `"default"` | Visual state. |
-| label | `string` | - | Label text displayed next to switch. |
-| labelPosition | `"left" \| "right"` | `"right"` | Position of the label relative to the switch. |
-| description | `string` | - | Description text below the label. |
-| errorLabel | `string` | - | Error message when state is "error". |
-| onValueChange | `(value: boolean) => void` | - | Callback when toggled. |
-| ariaLabel | `string` | - | Accessible label for screen readers. |
-| ariaLabelledBy | `string` | - | ID of element that labels this switch. |
-
-**Size Configuration:**
-
-| Size | Track Width | Track Height | Knob Size |
-| :--- | :---------- | :----------- | :-------- |
-| sm | 32px | 18px | 14px |
-| md | 40px | 22px | 18px |
-| lg | 48px | 26px | 22px |
-| xl | 56px | 30px | 26px |
-
-## Theming
-
-Switch uses the design system theme for colors:
-
-```typescript
-// Colors accessed via theme
-theme.colors.control.switch.bgOff         // Track background when off
-theme.colors.control.switch.bgOn          // Track background when on
-theme.colors.control.switch.knob          // Knob color
-theme.colors.control.switch.border        // Border color
-theme.colors.content.primary              // Label text
-theme.colors.content.secondary            // Description text
-theme.colors.content.error                // Error text
+```tsx
+<Switch state="disable" label="Disabled off" />
+<Switch state="disable" checked label="Disabled on" />
 ```
 
 ## Accessibility
 
-- Uses `role="switch"` semantic role
-- `aria-checked` reflects on/off state
-- Keyboard support (Space/Enter to toggle)
-- Focus indicator follows WCAG guidelines
-- Label properly associated with control
-- Disabled state announced to assistive technology
+- Uses `role="switch"` and `aria-checked` to reflect state.
+- Space and Enter toggle the switch.
+- `description` and `errorLabel` are linked via `aria-describedby`.
+- Disabled state is announced to assistive technology.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-switch",
-  "version": "0.149.1",
+  "version": "0.151.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.149.1",
-    "@xsolla/xui-primitives-core": "0.149.1"
+    "@xsolla/xui-core": "0.151.0",
+    "@xsolla/xui-primitives-core": "0.151.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",