@snack-uikit/toggles 0.7.1-preview-104ad22c.0

package/README.md

@@ -0,0 +1,169 @@
+# Checkbox, Radio, Switch и Favorite
+Компоненты, реализующие переключатели.
+
+## Installation
+`npm i @snack-uikit/toggles`
+
+[Changelog](../../../CHANGELOG.md)
+
+## хук useToggleGroup
+Хук для элементов внутри группы переключателей.
+
+### Аргументы
+
+#### **`value: string`**
+
+Уникальное значение для элемента в группе
+
+```tsx
+  function ToggleCard(props: ToggleCardProps) {
+    const { isChecked, handleClick, multipleSelection } = useToggleGroup(props.id);
+
+    return (
+      <Card {...props} checked={isChecked} onClick={handleClick} multipleSelection={multipleSelection}/>
+    );
+  }
+```
+
+### Примеры:
+
+#### ToggleGroup
+```typescript jsx
+
+  const [value, setValue] = useState<string | undefined>(undefined);
+
+  function ToggleCard(props: ToggleCardProps) {
+    const { isChecked, handleClick, multipleSelection } = useToggleGroup(id);
+
+    return (
+      <Card {...props} checked={isChecked} onClick={handleClick} multipleSelection={multipleSelection}/>
+    );
+  }
+
+  // ITEMS -some array with ToggleCardProps
+  
+  ...
+
+  <ToggleGroup selectionMode={ToggleGroup.selectionModes.Single} value={value} onChange={setValue}>
+    {ITEMS.map(props => (
+      <ToggleCard key={props.id} {...props} />
+    ))}
+  </ToggleGroup>
+...
+
+return (
+  <>
+    {items.map(({ checked, setChecked, data }) =>
+      <CustomRadioButton
+        // повторяет нативное поведение радиогруппы: по клику можно выбрать, но нельзя снять выбор
+        onClick={() => setChecked(true)}
+        checked={checked}
+        data={data}
+      />
+    )}
+  </>
+);
+```
+
+
+```
+
+
+[//]: DOCUMENTATION_SECTION_START
+[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
+## 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"` | Size.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"` | Size.M | Размер |
+| inputRef | `RefObject<HTMLInputElement>` | - |  |
+| showIcon | `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 по-умолчанию |
+| onChange | `(checked: boolean) => void` | - | Колбек смены значения |
+| onClick | `MouseEventHandler<HTMLInputElement>` | - | Колбек клика |
+| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек потери фокуса |
+| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек приобретения фокуса |
+| className | `string` | - | CSS-класс |
+| size | enum Size: `"s"`, `"m"` | Size.M | Размер |
+| inputRef | `RefObject<HTMLInputElement>` | - |  |
+| icon | enum FavoriteIcon: `"star"`, `"heart"` | FavoriteIcon.Heart | Иконка |
+## ToggleGroup
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| children* | `ReactNode` | - | Вложенный контент |
+| defaultValue | `string \| string[]` | - | Начальное состояние |
+| value | `string \| string[]` | - | Controlled состояние |
+| onChange | `((value: string) => void) \| ((value: string[]) => void)` | - | Controlled обработчик измения состояния |
+| selectionMode | enum SelectionMode: `"single"`, `"multiple"` | SelectionMode.Single | Режим выбора |
+## useToggleGroup
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| value* | `string` | - |  |
+
+
+[//]: DOCUMENTATION_SECTION_END

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import { Size } from '../../constants';
+import { ToggleProps } from '../../types';
+export type CheckboxProps = ToggleProps & {
+    /** Состояние частичного выбора */
+    indeterminate?: boolean;
+    /** Состояние частичного выбора по-умолчанию */
+    indeterminateDefault?: boolean;
+};
+export declare function Checkbox({ inputRef, indeterminate: indeterminateProp, indeterminateDefault, onChange: onChangeProp, 'data-test-id': dataTestId, size, ...restProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Checkbox {
+    var sizes: typeof Size;
+}

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,41 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import mergeRefs from 'merge-refs';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { CheckSVG, MinusSVG } from '@snack-uikit/icons';
+import { Size } from '../../constants';
+import { getIconSize, getVisualStateAttributes } from '../../utils';
+import { TogglePrivate } from '../TogglePrivate';
+import styles from './styles.module.css';
+export function Checkbox(_a) {
+    var { inputRef, indeterminate: indeterminateProp, indeterminateDefault, onChange: onChangeProp, 'data-test-id': dataTestId, size = Size.M } = _a, restProps = __rest(_a, ["inputRef", "indeterminate", "indeterminateDefault", "onChange", 'data-test-id', "size"]);
+    const localRef = useRef(null);
+    const ref = mergeRefs(localRef, inputRef);
+    const [indeterminate, setIndeterminate] = useUncontrolledProp(indeterminateProp, indeterminateDefault);
+    const onChange = useCallback((checked) => {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(checked);
+        setIndeterminate(false);
+    }, [onChangeProp, setIndeterminate]);
+    useEffect(() => {
+        if (localRef.current) {
+            localRef.current.indeterminate = Boolean(indeterminate);
+        }
+    }, [localRef, indeterminate]);
+    const iconSize = useMemo(() => getIconSize(size), [size]);
+    return (_jsx(TogglePrivate, Object.assign({}, restProps, { size: size, onChange: onChange, "data-test-id": dataTestId, ref: ref, render: function Checkbox(visualState) {
+            const data = getVisualStateAttributes(Object.assign(Object.assign({}, visualState), { indeterminate: Boolean(indeterminate) }));
+            return (_jsxs("div", Object.assign({ className: styles.container }, data, { children: [_jsx("div", Object.assign({ className: styles.box }, data)), _jsx("div", Object.assign({ className: styles.icon }, data, { children: indeterminate ? _jsx(MinusSVG, { size: iconSize }) : _jsx(CheckSVG, { size: iconSize }) }))] })));
+        } })));
+}
+Checkbox.sizes = Size;

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/dist/components/Checkbox/index.js

@@ -0,0 +1 @@
+export * from './Checkbox';

package/dist/components/Checkbox/styles.module.css

@@ -0,0 +1,86 @@
+.container{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+.container[data-size=s]{
+  width:var(--size-toggles-s-container, 16px);
+  height:var(--size-toggles-s-container, 16px);
+  border-radius:var(--radius-toggles-s-box-checkbox, 6px);
+  border-width:var(--border-width-toggles-single, 2px);
+}
+.container[data-size=m]{
+  width:var(--size-toggles-m-container, 24px);
+  height:var(--size-toggles-m-container, 24px);
+  border-radius:var(--radius-toggles-m-box-checkbox, 8px);
+  border-width:var(--border-width-toggles-single, 2px);
+}
+.container[data-focusvisible=true]{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+}
+.container[data-focusvisible=true][data-size=s]{
+  outline-offset:var(--border-width-state-focus-s, 2px);
+}
+
+.box{
+  box-sizing:border-box;
+  background-color:var(--sys-neutral-background1-level, #f9f9f9);
+  border-color:var(--sys-neutral-decor-default, #dedede);
+  border-style:solid;
+}
+.box[data-checked=false][data-focusvisible=true], .box[data-checked=false][data-hover=true]{
+  background-color:var(--sys-neutral-background2-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
+}
+.box[data-checked=false][data-disabled=true]{
+  background-color:var(--sys-neutral-background1-level, #f9f9f9);
+  border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
+}
+.box[data-indeterminate=true], .box[data-checked=true]{
+  background-color:var(--sys-primary-accent-default, #794ed3);
+  border-color:var(--sys-primary-accent-default, #794ed3);
+}
+.box[data-indeterminate=true][data-focusvisible=true], .box[data-indeterminate=true][data-hover=true], .box[data-checked=true][data-focusvisible=true], .box[data-checked=true][data-hover=true]{
+  background-color:var(--sys-primary-accent-hovered, #6851a6);
+  border-color:var(--sys-primary-accent-hovered, #6851a6);
+}
+.box[data-indeterminate=true][data-disabled=true], .box[data-checked=true][data-disabled=true]{
+  background-color:var(--sys-neutral-decor-disabled, #e7e7e7);
+  border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
+}
+.box[data-size=s]{
+  width:var(--size-toggles-s-container, 16px);
+  height:var(--size-toggles-s-container, 16px);
+  border-width:var(--border-width-toggles-single, 2px);
+  border-radius:var(--radius-toggles-s-box-checkbox, 6px);
+}
+.box[data-size=s] svg{
+  width:var(--dimension-2m, 16px) !important;
+  height:var(--dimension-2m, 16px) !important;
+}
+.box[data-size=m]{
+  width:var(--size-toggles-m-box-checkbox, 20px);
+  height:var(--size-toggles-m-box-checkbox, 20px);
+  border-width:var(--border-width-toggles-single, 2px);
+  border-radius:var(--radius-toggles-m-box-checkbox, 8px);
+}
+.box[data-size=m] svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+
+.icon{
+  position:absolute;
+  top:0;
+  left:0;
+  display:none;
+  width:100%;
+  height:100%;
+  color:var(--sys-primary-on-accent, #fdfbff);
+}
+.icon[data-indeterminate=true], .icon[data-checked=true]{
+  display:block;
+}

package/dist/components/Favorite/Favorite.d.ts

@@ -0,0 +1,10 @@
+import { FavoriteIcon, Size } from '../../constants';
+import { ToggleProps } from '../../types';
+export type FavoriteProps = Omit<ToggleProps, 'disabled'> & {
+    /** Иконка */
+    icon?: FavoriteIcon;
+};
+export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Favorite {
+    var sizes: typeof Size;
+}

package/dist/components/Favorite/Favorite.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { HeartFilledSVG, HeartSVG, StarFilledSVG, StarSVG } from '@snack-uikit/icons';
+import { FavoriteIcon, Size } from '../../constants';
+import { getIconSize, getVisualStateAttributes } from '../../utils';
+import { TogglePrivate } from '../TogglePrivate';
+import styles from './styles.module.css';
+const CHECKED_ICONS = {
+    [FavoriteIcon.Star]: StarFilledSVG,
+    [FavoriteIcon.Heart]: HeartFilledSVG,
+};
+const UNCHECKED_ICONS = {
+    [FavoriteIcon.Star]: StarSVG,
+    [FavoriteIcon.Heart]: HeartSVG,
+};
+export function Favorite(_a) {
+    var { inputRef, 'data-test-id': dataTestId, size = Size.M, icon = FavoriteIcon.Heart } = _a, restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon"]);
+    const iconSize = useMemo(() => getIconSize(size), [size]);
+    return (_jsx(TogglePrivate, Object.assign({}, restProps, { "data-test-id": dataTestId, ref: inputRef, size: size, render: function Favorite(visualState) {
+            const Icon = visualState.checked ? CHECKED_ICONS[icon] : UNCHECKED_ICONS[icon];
+            const data = getVisualStateAttributes(Object.assign(Object.assign({}, visualState), { icon }));
+            return (_jsx("div", Object.assign({ className: styles.container }, data, { children: _jsx(Icon, Object.assign({ className: styles.icon }, data, { size: iconSize })) })));
+        } })));
+}
+Favorite.sizes = Size;

package/dist/components/Favorite/index.d.ts

@@ -0,0 +1 @@
+export * from './Favorite';

package/dist/components/Favorite/index.js

@@ -0,0 +1 @@
+export * from './Favorite';

package/dist/components/Favorite/styles.module.css

@@ -0,0 +1,47 @@
+.container{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  outline-color:var(--sys-available-complementary, #131313);
+}
+.container[data-size=s]{
+  width:var(--size-toggles-s-container, 16px);
+  height:var(--size-toggles-s-container, 16px);
+  border-radius:var(--radius-toggles-s-box-checkbox, 6px);
+}
+.container[data-size=m]{
+  width:var(--size-toggles-m-container, 24px);
+  height:var(--size-toggles-m-container, 24px);
+  border-radius:var(--radius-toggles-m-box-checkbox, 8px);
+}
+.container[data-focusvisible=true]{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+}
+.container[data-focusvisible=true][data-size=s]{
+  outline-offset:var(--border-width-state-focus-s, 2px);
+}
+.container[data-checked=true]{
+  outline-color:var(--sys-available-complementary, #131313);
+}
+
+.icon{
+  color:var(--sys-neutral-text-light, #898989);
+}
+.icon[data-hover=true]{
+  color:var(--sys-neutral-text-support, #565656);
+}
+.icon[data-icon=star][data-checked=true]{
+  color:var(--sys-yellow-accent-default, #feb528);
+}
+.icon[data-icon=star][data-checked=true][data-focusvisible=true], .icon[data-icon=star][data-checked=true][data-hover=true]{
+  color:var(--sys-yellow-accent-hovered, #d69542);
+}
+.icon[data-icon=heart][data-checked=true]{
+  color:var(--sys-red-accent-default, #d93f2f);
+}
+.icon[data-icon=heart][data-checked=true][data-focusvisible=true], .icon[data-icon=heart][data-checked=true][data-hover=true]{
+  color:var(--sys-red-accent-hovered, #b9443a);
+}

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,7 @@
+import { Size } from '../../constants';
+import { ToggleProps } from '../../types';
+export type RadioProps = ToggleProps;
+export declare function Radio({ inputRef, 'data-test-id': dataTestId, ...restProps }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Radio {
+    var sizes: typeof Size;
+}

package/dist/components/Radio/Radio.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Mode, Size } from '../../constants';
+import { getVisualStateAttributes } from '../../utils';
+import { TogglePrivate } from '../TogglePrivate';
+import styles from './styles.module.css';
+export function Radio(_a) {
+    var { inputRef, 'data-test-id': dataTestId } = _a, restProps = __rest(_a, ["inputRef", 'data-test-id']);
+    return (_jsx(TogglePrivate, Object.assign({}, restProps, { "data-test-id": dataTestId, mode: Mode.Radio, ref: inputRef, render: function Radio(visualState) {
+            const data = getVisualStateAttributes(visualState);
+            return (_jsx("div", Object.assign({ className: styles.container }, data, { children: _jsx("div", Object.assign({ className: styles.box }, data, { children: _jsx("div", Object.assign({ className: styles.flag }, data)) })) })));
+        } })));
+}
+Radio.sizes = Size;

package/dist/components/Radio/index.d.ts

@@ -0,0 +1 @@
+export * from './Radio';

package/dist/components/Radio/index.js

@@ -0,0 +1 @@
+export * from './Radio';

package/dist/components/Radio/styles.module.css

@@ -0,0 +1,90 @@
+.container{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+.container[data-size=s]{
+  width:var(--size-toggles-s-container, 16px);
+  height:var(--size-toggles-s-container, 16px);
+  border-radius:var(--radius-toggles-s-box-radio, 16px);
+  border-width:var(--border-width-toggles-single, 2px);
+}
+.container[data-size=m]{
+  width:var(--size-toggles-m-container, 24px);
+  height:var(--size-toggles-m-container, 24px);
+  border-radius:var(--radius-toggles-m-box-radio, 16px);
+  border-width:var(--border-width-toggles-single, 2px);
+}
+.container[data-focusvisible=true]{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+}
+.container[data-focusvisible=true][data-size=s]{
+  outline-offset:var(--border-width-state-focus-s, 2px);
+}
+
+.box{
+  position:relative;
+  box-sizing:border-box;
+  background-color:var(--sys-neutral-background1-level, #f9f9f9);
+  border-color:var(--sys-neutral-decor-default, #dedede);
+  border-style:solid;
+}
+.box[data-size=s]{
+  width:var(--size-toggles-s-box-radio, 16px);
+  height:var(--size-toggles-s-box-radio, 16px);
+  border-width:var(--border-width-toggles-single, 2px);
+  border-radius:var(--radius-toggles-s-box-radio, 16px);
+}
+.box[data-size=m]{
+  width:var(--size-toggles-m-box-radio, 20px);
+  height:var(--size-toggles-m-box-radio, 20px);
+  border-width:var(--border-width-toggles-single, 2px);
+  border-radius:var(--radius-toggles-m-box-radio, 16px);
+}
+.box[data-focusvisible=true], .box[data-hover=true]{
+  background-color:var(--sys-neutral-background2-level, #fdfdfd);
+  border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
+}
+.box[data-disabled=true]{
+  background-color:var(--sys-neutral-background1-level, #f9f9f9);
+  border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
+}
+.box[data-checked=true]{
+  border-color:var(--sys-primary-accent-default, #794ed3);
+}
+.box[data-checked=true][data-focusvisible=true], .box[data-checked=true][data-hover=true]{
+  border-color:var(--sys-primary-accent-hovered, #6851a6);
+}
+.box[data-checked=true][data-disabled=true]{
+  border-color:var(--sys-neutral-decor-disabled, #e7e7e7);
+}
+
+.flag{
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+.flag[data-hover=true]{
+  background-color:var(--sys-primary-accent-hovered, #6851a6);
+}
+.flag[data-disabled=true]{
+  background-color:var(--sys-neutral-text-disabled, #9e9e9e);
+}
+.flag[data-checked=false]{
+  display:none;
+}
+.flag[data-size=s]{
+  border-radius:var(--radius-toggles-s-box-radio, 16px);
+  width:var(--size-toggles-s-flag-radio, 8px);
+  height:var(--size-toggles-s-flag-radio, 8px);
+}
+.flag[data-size=m]{
+  border-radius:var(--radius-toggles-m-box-radio, 16px);
+  width:var(--size-toggles-m-flag-radio, 12px);
+  height:var(--size-toggles-m-flag-radio, 12px);
+}

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,10 @@
+import { Size } from '../../constants';
+import { ToggleProps } from '../../types';
+export type SwitchProps = ToggleProps & {
+    /** Показывать ли иконку в переключателе */
+    showIcon?: boolean;
+};
+export declare function Switch({ inputRef, 'data-test-id': dataTestId, showIcon, size, ...restProps }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Switch {
+    var sizes: typeof Size;
+}

package/dist/components/Switch/Switch.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CheckSVG, CrossSVG } from '@snack-uikit/icons';
+import { Size } from '../../constants';
+import { getIconSize, getVisualStateAttributes } from '../../utils';
+import { TogglePrivate } from '../TogglePrivate';
+import styles from './styles.module.css';
+export function Switch(_a) {
+    var { inputRef, 'data-test-id': dataTestId, showIcon, size = Size.M } = _a, restProps = __rest(_a, ["inputRef", 'data-test-id', "showIcon", "size"]);
+    const iconSize = useMemo(() => getIconSize(size), [size]);
+    return (_jsx(TogglePrivate, Object.assign({}, restProps, { size: size, "data-test-id": dataTestId, ref: inputRef, render: function Switch(visualState) {
+            const data = getVisualStateAttributes(visualState);
+            return (_jsxs("div", Object.assign({ className: styles.container }, data, { children: [_jsx("div", Object.assign({ className: styles.box }, data)), _jsxs("div", Object.assign({ className: styles.containerFlag }, data, { children: [_jsx("div", Object.assign({ className: styles.flag }, data)), showIcon && (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: styles.flag_icon_off }, data, { children: _jsx(CrossSVG, { size: iconSize }) })), _jsx("div", Object.assign({ className: styles.flag_icon_on }, data, { children: _jsx(CheckSVG, { size: iconSize }) }))] }))] }))] })));
+        } })));
+}
+Switch.sizes = Size;

package/dist/components/Switch/index.d.ts

@@ -0,0 +1 @@
+export * from './Switch';

package/dist/components/Switch/index.js

@@ -0,0 +1 @@
+export * from './Switch';