[DS][RadioButton] Выравнивание публичного API

design-tokens/input/tokens.json

@@ -4038,15 +4038,15 @@
         "height": "{dimension.size.700}",
         "background": "{color.bg.surface.default.default}",
         "checkedBackground": "{color.bg.neutral.strong.default}",
-        "checkedHoverBackground": "{color.bg.neutral.strong.hover}",
+        "checkedHoverBackground": "{color.bg.neutral.strong.active}",
         "disabledBackground": "{color.bg.surface.canvas.hover}",
         "filledBackground": "{color.bg.surface.default.default}",
         "borderColor": "{color.border.neutral.strong}",
         "hoverBorderColor": "{color.border.neutral.bold.default}",
-        "focusBorderColor": "{color.border.neutral.strong}",
+        "focusBorderColor": "{color.border.brand.strong}",
         "checkedBorderColor": "{color.border.neutral.bold.default}",
-        "checkedHoverBorderColor": "{color.border.neutral.bold.default}",
-        "checkedFocusBorderColor": "{color.border.neutral.bold.default}",
+        "checkedHoverBorderColor": "{color.bg.neutral.strong.active}",
+        "checkedFocusBorderColor": "{color.border.brand.strong}",
         "checkedDisabledBorderColor": "{color.border.neutral.strong}",
         "invalidBorderColor": "{color.border.status.danger.strong}",
         "shadow": "{effects.elevation.none}",
@@ -4084,8 +4084,8 @@
       },
       "icon": {
         "size": "{dimension.size.350}",
-        "checkedColor": "{color.fg.on.fill.default}",
-        "checkedHoverColor": "{color.fg.on.fill.hover}",
+        "checkedColor": "{color.fg.inverse.default}",
+        "checkedHoverColor": "{color.fg.inverse.active}",
         "disabledColor": "{color.fg.muted}",
         "sm": { "size": "{dimension.size.200}" },
         "lg": { "size": "{dimension.size.450}" }

src/components/RadioButton/RadioButton.md

@@ -0,0 +1,59 @@
+# RadioButton
+
+Управляемая радиокнопка с необязательными label и caption для выбора одного
+варианта.
+
+## Использование
+
+```tsx
+import { useState } from 'react'
+import { RadioButton } from '@cdek-it/react-native-ui-kit'
+
+export function Example() {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <RadioButton
+      checked={checked}
+      label='Доставка курьером'
+      onPress={() => setChecked(true)}
+    />
+  )
+}
+```
+
+## Props
+
+- `checked` — выбран ли вариант. По умолчанию `false`. Отображение меняется
+  только после обновления prop потребителем
+- `onPress` — необязательный нативный обработчик нажатия. Потребитель выбирает
+  вариант и снимает выбор с остальных. Повторное нажатие также вызывает
+  обработчик, но компонент не переключает checked самостоятельно
+- `disabled` — блокирует взаимодействие. По умолчанию `false`
+- `state` — оформление `default | danger`. По умолчанию `default`
+- `label` — текст справа от круга. Без него отображается только круг
+- `caption` — подпись под label. Без label не отображается
+
+Пользовательский `style` объединяется с внутренним и поддерживает
+callback-форму.
+
+Полный контракт — [RadioButtonProps](./RadioButton.tsx).
+
+## Доступность
+
+Вся строка — один элемент с ролью radio и состояниями checked и disabled. Label
+задаёт доступное имя, caption — подсказку. Их можно переопределить через
+`accessibilityLabel` и `accessibilityHint`.
+
+Без label передайте доступное имя через `accessibilityLabel` или свяжите
+радиокнопку с внешним текстом через `accessibilityLabelledBy` на Android. При
+использовании accessibilityLabelledBy автоматическое имя из label не задаётся.
+Родителю группы вариантов задайте `accessibilityRole='radiogroup'`. Ошибку
+группы показывайте одним сообщением, передавая `state='danger'` всем вариантам.
+
+Текст переносится и масштабируется с системным шрифтом. Не помещайте RadioButton
+внутрь другого интерактивного элемента: строка уже обрабатывает нажатия.
+
+## Макет
+
+[RadioButton в Figma](https://www.figma.com/design/Q1BWgZ7zoV5UzlBOnjW0cM/UI-Kit--DS--v2.1?node-id=17-13535)

src/components/RadioButton/RadioButton.styles.ts

@@ -0,0 +1,102 @@
+import { StyleSheet } from 'react-native-unistyles'
+
+export const styles = StyleSheet.create(
+  ({ components: { radiobutton }, semantic, fonts }) => ({
+    root: (multilineText: boolean) => ({
+      flexDirection: 'row',
+      alignItems: multilineText ? 'flex-start' : 'center',
+      alignSelf: 'flex-start',
+      flexShrink: 1,
+      gap: semantic.dimension.space[300],
+      padding: semantic.dimension.space[300],
+      minWidth: 44,
+      minHeight: 44,
+    }),
+    visual: (firstLineHeight: number) => ({
+      marginTop: Math.max(0, (firstLineHeight - radiobutton.root.height) / 2),
+    }),
+    circle: (
+      checked: boolean,
+      active: boolean,
+      disabled: boolean,
+      focused: boolean,
+      danger: boolean
+    ) => ({
+      width: radiobutton.root.width,
+      height: radiobutton.root.height,
+      flexShrink: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: semantic.dimension.borderRadius.max,
+      borderWidth: semantic.dimension.borderWidth[100],
+      borderColor: disabled
+        ? checked
+          ? radiobutton.root.checkedDisabledBorderColor
+          : radiobutton.root.borderColor
+        : danger
+          ? radiobutton.root.invalidBorderColor
+          : focused
+            ? checked
+              ? radiobutton.root.checkedFocusBorderColor
+              : radiobutton.root.focusBorderColor
+            : active
+              ? checked
+                ? radiobutton.root.checkedHoverBorderColor
+                : radiobutton.root.hoverBorderColor
+              : checked
+                ? radiobutton.root.checkedBorderColor
+                : radiobutton.root.borderColor,
+      backgroundColor: disabled
+        ? radiobutton.root.disabledBackground
+        : checked
+          ? active
+            ? radiobutton.root.checkedHoverBackground
+            : radiobutton.root.checkedBackground
+          : radiobutton.root.background,
+      transitionProperty: ['borderColor', 'backgroundColor'],
+      transitionDuration: radiobutton.root.transitionDuration,
+    }),
+    center: (checked: boolean, active: boolean, disabled: boolean) => ({
+      width: radiobutton.icon.size,
+      height: radiobutton.icon.size,
+      borderRadius: semantic.dimension.borderRadius.max,
+      opacity: checked ? 1 : 0,
+      backgroundColor: disabled
+        ? radiobutton.icon.disabledColor
+        : active
+          ? radiobutton.icon.checkedHoverColor
+          : radiobutton.icon.checkedColor,
+      transitionProperty: ['opacity', 'backgroundColor'],
+      transitionDuration: radiobutton.root.transitionDuration,
+    }),
+    ring: (danger: boolean) => ({
+      position: 'absolute',
+      inset:
+        -radiobutton.root.focusRing.width - semantic.dimension.borderWidth[100],
+      borderRadius: semantic.dimension.borderRadius.max,
+      borderWidth: radiobutton.root.focusRing.width,
+      borderColor: danger
+        ? semantic.colorScheme.color.border.status.danger.focus
+        : radiobutton.root.focusRing.color,
+    }),
+    content: (firstLineHeight: number) => ({
+      flexShrink: 1,
+      paddingTop:
+        firstLineHeight > 0
+          ? Math.max(0, (radiobutton.root.height - firstLineHeight) / 2)
+          : 0,
+    }),
+    label: {
+      fontSize: fonts.fontSize[200],
+      lineHeight: fonts.lineHeight[400],
+      letterSpacing: fonts.letterSpacing[500],
+      color: semantic.colorScheme.color.fg.default,
+    },
+    caption: {
+      fontSize: fonts.fontSize[200],
+      lineHeight: fonts.lineHeight[300],
+      letterSpacing: fonts.letterSpacing[200],
+      color: semantic.colorScheme.color.fg.muted,
+    },
+  })
+)