@snack-uikit/toggles 0.13.23 → 0.13.24

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.13.24 (2026-01-19)</small>
+
+* chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))
+* chore(FF-6693): tune test configs ([d194f4d](https://github.com/cloud-ru-tech/snack-uikit/commit/d194f4d))
+* docs(FF-7788): readme update ([e3142b8](https://github.com/cloud-ru-tech/snack-uikit/commit/e3142b8))
+
+
+
+
+
 ## <small>0.13.23 (2025-11-28)</small>
 
 ### Only dependencies have been changed
@@ -151,7 +161,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## 0.13.4 (2025-01-20)
 
-**Note:** Version bump only for package @snack-uikit/toggles
+### Only dependencies have been changed
+* [@snack-uikit/icons@0.27.5](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/utils@4.0.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/utils/CHANGELOG.md)
 
 ## 0.13.3 (2024-12-26)
 

package/README.md

@@ -1,71 +1,217 @@
 # Checkbox, Radio, Switch и Favorite
-Компоненты, реализующие переключатели.
 
 ## Installation
 `npm i @snack-uikit/toggles`
 
 [Changelog](../../../CHANGELOG.md)
 
-## хук useToggleGroup
-Хук для элементов внутри группы переключателей.
+## Description
 
-### Аргументы
+- Пакет `@snack-uikit/toggles` предоставляет набор компонентов для реализации различных типов переключателей в интерфейсе.
+- Компоненты поддерживают контролируемый и неконтролируемый режимы работы, состояния disabled, различные размеры и интеграцию с формами через стандартные HTML-атрибуты.
+- Все компоненты переключателей построены на единой архитектуре и обеспечивают согласованное поведение и визуальный стиль.
 
-#### **`value: string`**
+## Checkbox
+
+### Description
 
-Уникальное значение для элемента в группе
+- `Checkbox` — компонент чекбокса для множественного выбора опций в формах, списках и фильтрах.
+- Поддерживает стандартные состояния: выбран (`checked`), не выбран и частично выбран (`indeterminate`), что удобно для иерархических списков, где родительский элемент может быть частично выбран при выборе только части дочерних элементов.
+- Работает в контролируемом и неконтролируемом режимах, поддерживает размеры `s` и `m`, состояние `disabled` и все стандартные HTML-атрибуты для интеграции с формами.
+- Figma: [`Checkbox`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=2%3A4&mode=design).
+
+### Example
 
 ```tsx
-  function ToggleCard(props: ToggleCardProps) {
-    const { isChecked, handleClick, multipleSelection } = useToggleGroup(props.id);
+import { useState } from 'react';
+import { Checkbox } from '@snack-uikit/toggles';
+
+function Example() {
+  const [checked, setChecked] = useState(false);
+  const [indeterminate, setIndeterminate] = useState(false);
 
-    return (
-      <Card {...props} checked={isChecked} onClick={handleClick} multipleSelection={multipleSelection}/>
-    );
-  }
+  return (
+    <>
+      <Checkbox
+        checked={checked}
+        onChange={setChecked}
+        size="m"
+      />
+      <Checkbox
+        indeterminate={indeterminate}
+        onChange={() => setIndeterminate(false)}
+        size="s"
+      />
+    </>
+  );
+}
 ```
 
-### Примеры:
+## Radio
 
-#### ToggleGroup
-```typescript jsx
+### Description
 
-  const [value, setValue] = useState<string | undefined>(undefined);
+- `Radio` — компонент радиокнопки для выбора одной опции из группы взаимоисключающих вариантов.
+- Используется в радиогруппах, где выбор одного элемента автоматически снимает выбор с других элементов группы.
+- Поддерживает размеры `s` и `m`, состояние `disabled`, работает в контролируемом и неконтролируемом режимах и интегрируется с нативными HTML-радиогруппами через атрибут `name`.
+- Figma: [`Radio`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=2%3A4&mode=design).
 
-  function ToggleCard(props: ToggleCardProps) {
-    const { isChecked, handleClick, multipleSelection } = useToggleGroup(id);
+### Example
 
-    return (
-      <Card {...props} checked={isChecked} onClick={handleClick} multipleSelection={multipleSelection}/>
-    );
-  }
+```tsx
+import { useState } from 'react';
+import { Radio } from '@snack-uikit/toggles';
 
-  // ITEMS -some array with ToggleCardProps
-  
-  // ...
+function Example() {
+  const [value, setValue] = useState('option1');
 
   return (
-    <ToggleGroup selectionMode='single' value={value} onChange={setValue}>
-      {ITEMS.map(props => (
-        <ToggleCard key={props.id} {...props} />
-      ))}
-    </ToggleGroup>
+    <>
+      <Radio
+        name="options"
+        value="option1"
+        checked={value === 'option1'}
+        onChange={() => setValue('option1')}
+        size="m"
+      />
+      <Radio
+        name="options"
+        value="option2"
+        checked={value === 'option2'}
+        onChange={() => setValue('option2')}
+        size="m"
+      />
+    </>
   );
+}
+```
+
+## Switch
 
-// ...
+### Description
 
-return (
-  <>
-    {items.map(({ checked, setChecked, data }) =>
-      <CustomRadioButton
-        // повторяет нативное поведение радиогруппы: по клику можно выбрать, но нельзя снять выбор
-        onClick={() => setChecked(true)}
-        checked={checked}
-        data={data}
+- `Switch` — компонент переключателя для быстрого включения/выключения опций, настроек и функций интерфейса.
+- Визуально отличается от чекбокса и радиокнопки: представляет собой ползунок, который перемещается между двумя позициями (включено/выключено).
+- Поддерживает опциональное отображение иконок (`showIcon`) в состояниях включено/выключено и состояние загрузки (`loading`) с индикатором спиннера.
+- Работает в контролируемом и неконтролируемом режимах, поддерживает размеры `s` и `m`, состояние `disabled`.
+- Figma: [`Switch`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=2%3A4&mode=design).
+
+### Example
+
+```tsx
+import { useState } from 'react';
+import { Switch } from '@snack-uikit/toggles';
+
+function Example() {
+  const [enabled, setEnabled] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Switch
+        checked={enabled}
+        onChange={setEnabled}
+        size="m"
       />
-    )}
-  </>
-);
+      <Switch
+        checked={enabled}
+        onChange={setEnabled}
+        showIcon
+        loading={loading}
+        size="m"
+      />
+    </>
+  );
+}
+```
+
+## Favorite
+
+### Description
+
+- `Favorite` — компонент для добавления элементов в избранное или пометки их как любимых через иконку (звезда или сердце).
+- Визуально представляет собой иконку, которая меняет свой вид при переключении состояния: незаполненная иконка для невыбранного состояния и заполненная — для выбранного.
+- Поддерживает два типа иконок: `star` (звезда) и `heart` (сердце), которые можно выбрать через проп `icon`.
+- Работает в контролируемом и неконтролируемом режимах, поддерживает размеры `s` и `m`, состояние `disabled` и обработчик нажатия клавиш клавиатуры (`onKeyUp`).
+- Figma: [`Favorite`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=2%3A4&mode=design).
+
+### Example
+
+```tsx
+import { useState } from 'react';
+import { Favorite } from '@snack-uikit/toggles';
+
+function Example() {
+  const [favorited, setFavorited] = useState(false);
+
+  return (
+    <>
+      <Favorite
+        checked={favorited}
+        onChange={setFavorited}
+        icon="heart"
+        size="m"
+      />
+      <Favorite
+        checked={favorited}
+        onChange={setFavorited}
+        icon="star"
+        size="m"
+      />
+    </>
+  );
+}
+```
+
+## ToggleGroup
+
+### Description
+
+- `ToggleGroup` — компонент-контейнер для управления группами переключателей с единым состоянием выбора.
+- Поддерживает два режима выбора: одиночный (`selectionMode="single"`) для выбора одного элемента из группы и множественный (`selectionMode="multiple"`) для выбора нескольких элементов одновременно.
+- Работает через контекст React, предоставляя дочерним элементам доступ к состоянию группы через хук `useToggleGroup`.
+- Работает в контролируемом и неконтролируемом режимах, позволяя управлять выбранными значениями извне или использовать внутреннее состояние.
+- Используется вместе с хуком `useToggleGroup`, который предоставляет дочерним компонентам информацию о том, выбран ли элемент (`isChecked`), обработчик клика (`handleClick`) и режим множественного выбора (`multipleSelection`).
+
+### Example
+
+```tsx
+import { ToggleGroup, useToggleGroup } from '@snack-uikit/toggles';
+import { useState } from 'react';
+
+function ToggleCard({ id, label }: { id: string; label: string }) {
+  const { isChecked, handleClick } = useToggleGroup({ value: id });
+
+  return (
+    <button
+      onClick={handleClick}
+      style={{
+        padding: '8px 16px',
+        border: isChecked ? '2px solid blue' : '1px solid gray',
+        backgroundColor: isChecked ? 'lightblue' : 'white',
+      }}
+    >
+      {label}
+    </button>
+  );
+}
+
+function Example() {
+  const [value, setValue] = useState<string | undefined>(undefined);
+  const items = [
+    { id: '1', label: 'Первый элемент' },
+    { id: '2', label: 'Второй элемент' },
+    { id: '3', label: 'Третий элемент' },
+  ];
+
+  return (
+    <ToggleGroup selectionMode="single" value={value} onChange={setValue}>
+      {items.map(item => (
+        <ToggleCard key={item.id} id={item.id} label={item.label} />
+      ))}
+    </ToggleGroup>
+  );
+}
 ```
 
 

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toggles",
-  "version": "0.13.23",
+  "version": "0.13.24",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,11 +36,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.27.4",
-    "@snack-uikit/utils": "4.0.0",
+    "@snack-uikit/icons": "0.27.5",
+    "@snack-uikit/utils": "4.0.1",
     "classnames": "2.5.1",
     "merge-refs": "1.3.0",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "91625fbce83c16e08a282388ad11a0ccd8d8efad"
+  "gitHead": "84371bbf91915f650a852df849cd71d416c5b7b2"
 }