1.0.1 • Published 2 weeks ago

@snack-uikit/toggles

Licence

Apache-2.0

Version

1.0.1

Deps

Size

158 kB

Vulns

Weekly

Stars

Summary Dependency Versions

Checkbox, Radio, Switch и Favorite

Installation

npm i @snack-uikit/toggles

Changelog

Description

Пакет @snack-uikit/toggles предоставляет набор компонентов для реализации различных типов переключателей в интерфейсе.
Компоненты поддерживают контролируемый и неконтролируемый режимы работы, состояния disabled, различные размеры и интеграцию с формами через стандартные HTML-атрибуты.
Все компоненты переключателей построены на единой архитектуре и обеспечивают согласованное поведение и визуальный стиль.

Checkbox

Description

Checkbox — компонент чекбокса для множественного выбора опций в формах, списках и фильтрах.
Поддерживает стандартные состояния: выбран (checked), не выбран и частично выбран (indeterminate), что удобно для иерархических списков, где родительский элемент может быть частично выбран при выборе только части дочерних элементов.
Работает в контролируемом и неконтролируемом режимах, поддерживает размеры s и m, состояние disabled и все стандартные HTML-атрибуты для интеграции с формами.
Figma: Checkbox.

Example

import { useState } from 'react';
import { Checkbox } from '@snack-uikit/toggles';

function Example() {
  const [checked, setChecked] = useState(false);
  const [indeterminate, setIndeterminate] = useState(false);

  return (
    <>
      <Checkbox
        checked={checked}
        onChange={setChecked}
        size="m"
      />
      <Checkbox
        indeterminate={indeterminate}
        onChange={() => setIndeterminate(false)}
        size="s"
      />
    </>
  );
}

Radio

Description

Radio — компонент радиокнопки для выбора одной опции из группы взаимоисключающих вариантов.
Используется в радиогруппах, где выбор одного элемента автоматически снимает выбор с других элементов группы.
Поддерживает размеры s и m, состояние disabled, работает в контролируемом и неконтролируемом режимах и интегрируется с нативными HTML-радиогруппами через атрибут name.
Figma: Radio.

Example

import { useState } from 'react';
import { Radio } from '@snack-uikit/toggles';

function Example() {
  const [value, setValue] = useState('option1');

  return (
    <>
      <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

Switch — компонент переключателя для быстрого включения/выключения опций, настроек и функций интерфейса.
Визуально отличается от чекбокса и радиокнопки: представляет собой ползунок, который перемещается между двумя позициями (включено/выключено).
Поддерживает опциональное отображение иконок (showIcon) в состояниях включено/выключено и состояние загрузки (loading) с индикатором спиннера.
Работает в контролируемом и неконтролируемом режимах, поддерживает размеры s и m, состояние disabled.
Figma: Switch.

Example

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.

Example

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

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>
  );
}

Checkbox

Props

name	type	default value	description
id	`string`	-	HTML-аттрибут id
name	`string`	-	HTML-аттрибут name
value	`string`	-	HTML-аттрибут value
tabIndex	`number`	-	HTML-аттрибут tab-index
autofocus	`boolean`	-	HTML-аттрибут autofocus
checked	`boolean`	-	HTML-аттрибут checked
defaultChecked	`boolean`	-	HTML-аттрибут checked по-умолчанию
disabled	`boolean`	-	HTML-аттрибут disabled
onChange	`(checked: boolean) => void`	-	Колбек смены значения
onClick	`MouseEventHandler<HTMLInputElement>`	-	Колбек клика
onBlur	`FocusEventHandler<HTMLInputElement>`	-	Колбек потери фокуса
onFocus	`FocusEventHandler<HTMLInputElement>`	-	Колбек приобретения фокуса
className	`string`	-	CSS-класс
size	enum Size: `"s"`, `"m"`	m	Размер
inputRef	`RefObject<HTMLInputElement>`	-
indeterminate	`boolean`	-	Состояние частичного выбора
indeterminateDefault	`boolean`	-	Состояние частичного выбора по-умолчанию

Switch

Props

name	type	default value	description
id	`string`	-	HTML-аттрибут id
name	`string`	-	HTML-аттрибут name
value	`string`	-	HTML-аттрибут value
tabIndex	`number`	-	HTML-аттрибут tab-index
autofocus	`boolean`	-	HTML-аттрибут autofocus
checked	`boolean`	-	HTML-аттрибут checked
defaultChecked	`boolean`	-	HTML-аттрибут checked по-умолчанию
disabled	`boolean`	-	HTML-аттрибут disabled
onChange	`(checked: boolean) => void`	-	Колбек смены значения
onClick	`MouseEventHandler<HTMLInputElement>`	-	Колбек клика
onBlur	`FocusEventHandler<HTMLInputElement>`	-	Колбек потери фокуса
onFocus	`FocusEventHandler<HTMLInputElement>`	-	Колбек приобретения фокуса
className	`string`	-	CSS-класс
size	enum Size: `"s"`, `"m"`	m	Размер
inputRef	`RefObject<HTMLInputElement>`	-
showIcon	`boolean`	-	Показывать ли иконку в переключателе
loading	`boolean`	-

Radio

Props

name	type	default value	description
id	`string`	-	HTML-аттрибут id
name	`string`	-	HTML-аттрибут name
value	`string`	-	HTML-аттрибут value
tabIndex	`number`	-	HTML-аттрибут tab-index
autofocus	`boolean`	-	HTML-аттрибут autofocus
checked	`boolean`	-	HTML-аттрибут checked
defaultChecked	`boolean`	-	HTML-аттрибут checked по-умолчанию
disabled	`boolean`	-	HTML-аттрибут disabled
onChange	`(checked: boolean) => void`	-	Колбек смены значения
onClick	`MouseEventHandler<HTMLInputElement>`	-	Колбек клика
onBlur	`FocusEventHandler<HTMLInputElement>`	-	Колбек потери фокуса
onFocus	`FocusEventHandler<HTMLInputElement>`	-	Колбек приобретения фокуса
className	`string`	-	CSS-класс
size	enum Size: `"s"`, `"m"`	-	Размер
inputRef	`RefObject<HTMLInputElement>`	-

Favorite

Props

name	type	default value	description
id	`string`	-	HTML-аттрибут id
name	`string`	-	HTML-аттрибут name
value	`string`	-	HTML-аттрибут value
tabIndex	`number`	-	HTML-аттрибут tab-index
autofocus	`boolean`	-	HTML-аттрибут autofocus
checked	`boolean`	-	HTML-аттрибут checked
defaultChecked	`boolean`	-	HTML-аттрибут checked по-умолчанию
disabled	`boolean`	-	HTML-аттрибут disabled
onChange	`(checked: boolean) => void`	-	Колбек смены значения
onClick	`MouseEventHandler<HTMLInputElement>`	-	Колбек клика
onBlur	`FocusEventHandler<HTMLInputElement>`	-	Колбек потери фокуса
onFocus	`FocusEventHandler<HTMLInputElement>`	-	Колбек приобретения фокуса
className	`string`	-	CSS-класс
size	enum Size: `"s"`, `"m"`	m	Размер
inputRef	`RefObject<HTMLInputElement>`	-
icon	enum FavoriteIcon: `"star"`, `"heart"`	heart	Иконка
onKeyUp	`KeyboardEventHandler<HTMLDivElement>`	-	Колбек нажатия клавиши клавиатуры

ToggleGroup

Props

name	type	default value	description
defaultValue	`string \| string[]`	-	Начальное состояние
value	`string \| string[]`	-	Controlled состояние
onChange	`((value: string) => void) \| ((value: string[]) => void)`	-	Controlled обработчик измения состояния
selectionMode	"single" \| "multiple"	single	Режим выбора

useToggleGroup

Props

name	type	default value	description
value*	`string`	-