@snack-uikit/toggles 0.8.1 → 0.9.1

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.9.1 (2023-12-14)
+
+### Only dependencies have been changed
+* [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
+
+
+
+
+
+# 0.9.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.8.1 (2023-12-06)
 
 ### Only dependencies have been changed

package/README.md

@@ -42,14 +42,17 @@
 
   // ITEMS -some array with ToggleCardProps
   
-  ...
+  // ...
 
-  <ToggleGroup selectionMode={ToggleGroup.selectionModes.Single} value={value} onChange={setValue}>
-    {ITEMS.map(props => (
-      <ToggleCard key={props.id} {...props} />
-    ))}
-  </ToggleGroup>
-...
+  return (
+    <ToggleGroup selectionMode='single' value={value} onChange={setValue}>
+      {ITEMS.map(props => (
+        <ToggleCard key={props.id} {...props} />
+      ))}
+    </ToggleGroup>
+  );
+
+// ...
 
 return (
   <>
@@ -66,9 +69,6 @@ return (
 ```
 
 
-```
-
-
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
 ## Checkbox
@@ -88,7 +88,7 @@ return (
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек потери фокуса |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек приобретения фокуса |
 | className | `string` | - | CSS-класс |
-| size | enum Size: `"s"`, `"m"` | Size.M | Размер |
+| size | enum Size: `"s"`, `"m"` | m | Размер |
 | inputRef | `RefObject<HTMLInputElement>` | - |  |
 | indeterminate | `boolean` | - | Состояние частичного выбора |
 | indeterminateDefault | `boolean` | - | Состояние частичного выбора по-умолчанию |
@@ -109,7 +109,7 @@ return (
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек потери фокуса |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек приобретения фокуса |
 | className | `string` | - | CSS-класс |
-| size | enum Size: `"s"`, `"m"` | Size.M | Размер |
+| size | enum Size: `"s"`, `"m"` | m | Размер |
 | inputRef | `RefObject<HTMLInputElement>` | - |  |
 | showIcon | `boolean` | - | Показывать ли иконку в переключателе |
 ## Radio
@@ -147,9 +147,9 @@ return (
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек потери фокуса |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек приобретения фокуса |
 | className | `string` | - | CSS-класс |
-| size | enum Size: `"s"`, `"m"` | Size.M | Размер |
+| size | enum Size: `"s"`, `"m"` | m | Размер |
 | inputRef | `RefObject<HTMLInputElement>` | - |  |
-| icon | enum FavoriteIcon: `"star"`, `"heart"` | FavoriteIcon.Heart | Иконка |
+| icon | enum FavoriteIcon: `"star"`, `"heart"` | heart | Иконка |
 ## ToggleGroup
 ### Props
 | name | type | default value | description |
@@ -158,7 +158,7 @@ return (
 | defaultValue | `string \| string[]` | - | Начальное состояние |
 | value | `string \| string[]` | - | Controlled состояние |
 | onChange | `((value: string) => void) \| ((value: string[]) => void)` | - | Controlled обработчик измения состояния |
-| selectionMode | enum SelectionMode: `"single"`, `"multiple"` | SelectionMode.Single | Режим выбора |
+| selectionMode | "single" \| "multiple" | single | Режим выбора |
 ## useToggleGroup
 ### Props
 | name | type | default value | description |

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

@@ -1,4 +1,3 @@
-import { Size } from '../../constants';
 import { ToggleProps } from '../../types';
 export type CheckboxProps = ToggleProps & {
     /** Состояние частичного выбора */
@@ -7,6 +6,3 @@ export type CheckboxProps = ToggleProps & {
     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

@@ -14,12 +14,12 @@ 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 { 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"]);
+    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);
@@ -38,4 +38,3 @@ export function Checkbox(_a) {
             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/Favorite/Favorite.d.ts

@@ -1,10 +1,6 @@
-import { FavoriteIcon, Size } from '../../constants';
-import { ToggleProps } from '../../types';
+import { FavoriteIcon, 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

@@ -12,20 +12,20 @@ var __rest = (this && this.__rest) || function (s, e) {
 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 { FAVORITE_ICON, 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,
+    [FAVORITE_ICON.Star]: StarFilledSVG,
+    [FAVORITE_ICON.Heart]: HeartFilledSVG,
 };
 const UNCHECKED_ICONS = {
-    [FavoriteIcon.Star]: StarSVG,
-    [FavoriteIcon.Heart]: HeartSVG,
+    [FAVORITE_ICON.Star]: StarSVG,
+    [FAVORITE_ICON.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"]);
+    var { inputRef, 'data-test-id': dataTestId, size = SIZE.M, icon = FAVORITE_ICON.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];
@@ -33,4 +33,3 @@ export function Favorite(_a) {
             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/Radio/Radio.d.ts

@@ -1,7 +1,3 @@
-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

@@ -10,15 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Mode, Size } from '../../constants';
+import { MODE } 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) {
+    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/Switch/Switch.d.ts

@@ -1,10 +1,6 @@
-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

@@ -12,16 +12,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 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 { 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"]);
+    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/ToggleGroup/ToggleGroup.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { SelectionMode } from '../../constants';
+import { SELECTION_MODE } from '../../constants';
 export type ToggleGroupProps = {
     /** Вложенный контент */
     children: ReactNode;
@@ -11,7 +11,7 @@ export type ToggleGroupProps = {
     /** Controlled обработчик измения состояния */
     onChange?(value: (string | undefined) | string): void;
     /** Режим выбора */
-    selectionMode?: SelectionMode.Single;
+    selectionMode?: typeof SELECTION_MODE.Single;
 } | {
     /** Начальное состояние */
     defaultValue?: string[];
@@ -20,9 +20,6 @@ export type ToggleGroupProps = {
     /** Controlled обработчик измения состояния */
     onChange?(value: (string[] | undefined) | string[]): void;
     /** Режим выбора */
-    selectionMode?: SelectionMode.Multiple;
+    selectionMode?: typeof SELECTION_MODE.Multiple;
 });
 export declare function ToggleGroup({ children, value: valueProp, onChange: onChangeProp, selectionMode, defaultValue, }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace ToggleGroup {
-    var selectionModes: typeof SelectionMode;
-}

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
-import { SelectionMode } from '../../constants';
+import { SELECTION_MODE } from '../../constants';
 import { ToggleGroupContext } from '../../context';
-export function ToggleGroup({ children, value: valueProp, onChange: onChangeProp, selectionMode = SelectionMode.Single, defaultValue, }) {
+export function ToggleGroup({ children, value: valueProp, onChange: onChangeProp, selectionMode = SELECTION_MODE.Single, defaultValue, }) {
     const [value, setValue] = useUncontrolledProp(valueProp, defaultValue, cb => {
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(cb(value));
     });
     const onChange = useCallback((newValue) => {
-        if (selectionMode === SelectionMode.Single) {
+        if (selectionMode === SELECTION_MODE.Single) {
             return setValue((oldValue) => {
                 if (newValue !== oldValue) {
                     return newValue;
@@ -26,6 +26,5 @@ export function ToggleGroup({ children, value: valueProp, onChange: onChangeProp
             return undefined;
         });
     }, [selectionMode, setValue]);
-    return (_jsx(ToggleGroupContext.Provider, Object.assign({ value: { value, onChange, selectionMode } }, { children: children })));
+    return (_jsx(ToggleGroupContext.Provider, { value: { value, onChange, selectionMode }, children: children }));
 }
-ToggleGroup.selectionModes = SelectionMode;

package/dist/components/ToggleGroup/hooks.js

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { SelectionMode } from '../../constants';
+import { SELECTION_MODE } from '../../constants';
 import { useToggleGroupContext } from '../../context';
 export function useToggleGroup({ value: itemValue }) {
     const { value, onChange, selectionMode } = useToggleGroupContext();
@@ -18,6 +18,6 @@ export function useToggleGroup({ value: itemValue }) {
     return {
         isChecked,
         handleClick,
-        multipleSelection: selectionMode === SelectionMode.Multiple,
+        multipleSelection: selectionMode === SELECTION_MODE.Multiple,
     };
 }

package/dist/components/TogglePrivate/TogglePrivate.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
-import { Mode, Size } from '../../constants';
 export declare const TogglePrivate: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {
     className?: string | undefined;
-    size?: Size | undefined;
+    size?: import("../../types").Size | undefined;
     render: (visualState: import("../../types").InputVisualState) => import("react").ReactNode;
-    mode?: Mode | undefined;
+    mode?: import("../../types").Mode | undefined;
     id?: string | undefined;
     value?: string | undefined;
     name?: string | undefined;

package/dist/components/TogglePrivate/TogglePrivate.js

@@ -13,11 +13,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { forwardRef, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
-import { Mode, Size } from '../../constants';
+import { MODE, SIZE } from '../../constants';
 import { getVisualStateAttributes } from '../../utils';
 import styles from './styles.module.css';
 export const TogglePrivate = forwardRef(function TogglePrivate(_a, ref) {
-    var { render, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, className, size = Size.M, mode = Mode.Checkbox, 'data-test-id': testId } = _a, otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", 'data-test-id']);
+    var { render, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, className, size = SIZE.M, mode = MODE.Checkbox, 'data-test-id': testId } = _a, otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", 'data-test-id']);
     const [checked, setChecked] = useUncontrolledProp(checkedProp, Boolean(defaultChecked), onChange);
     const [focusVisible, setFocusVisible] = useState(false);
     const [hover, setHover] = useState(false);

package/dist/constants.d.ts

@@ -1,16 +1,16 @@
-export declare enum Mode {
-    Checkbox = "checkbox",
-    Radio = "radio"
-}
-export declare enum Size {
-    S = "s",
-    M = "m"
-}
-export declare enum FavoriteIcon {
-    Star = "star",
-    Heart = "heart"
-}
-export declare enum SelectionMode {
-    Single = "single",
-    Multiple = "multiple"
-}
+export declare const MODE: {
+    readonly Checkbox: "checkbox";
+    readonly Radio: "radio";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+};
+export declare const FAVORITE_ICON: {
+    readonly Star: "star";
+    readonly Heart: "heart";
+};
+export declare const SELECTION_MODE: {
+    readonly Single: "single";
+    readonly Multiple: "multiple";
+};

package/dist/constants.js

@@ -1,20 +1,16 @@
-export var Mode;
-(function (Mode) {
-    Mode["Checkbox"] = "checkbox";
-    Mode["Radio"] = "radio";
-})(Mode || (Mode = {}));
-export var Size;
-(function (Size) {
-    Size["S"] = "s";
-    Size["M"] = "m";
-})(Size || (Size = {}));
-export var FavoriteIcon;
-(function (FavoriteIcon) {
-    FavoriteIcon["Star"] = "star";
-    FavoriteIcon["Heart"] = "heart";
-})(FavoriteIcon || (FavoriteIcon = {}));
-export var SelectionMode;
-(function (SelectionMode) {
-    SelectionMode["Single"] = "single";
-    SelectionMode["Multiple"] = "multiple";
-})(SelectionMode || (SelectionMode = {}));
+export const MODE = {
+    Checkbox: 'checkbox',
+    Radio: 'radio',
+};
+export const SIZE = {
+    S: 's',
+    M: 'm',
+};
+export const FAVORITE_ICON = {
+    Star: 'star',
+    Heart: 'heart',
+};
+export const SELECTION_MODE = {
+    Single: 'single',
+    Multiple: 'multiple',
+};

package/dist/context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SelectionMode } from './constants';
+import { SelectionMode } from './types';
 type ToggleGroupContextType = {
     value: string | undefined | string[];
     onChange: ((id: string) => void) | undefined;

package/dist/context.js

@@ -1,8 +1,8 @@
 import { createContext, useContext } from 'react';
-import { SelectionMode } from './constants';
+import { SELECTION_MODE } from './constants';
 export const ToggleGroupContext = createContext({
     value: undefined,
     onChange: undefined,
-    selectionMode: SelectionMode.Single,
+    selectionMode: SELECTION_MODE.Single,
 });
 export const useToggleGroupContext = () => useContext(ToggleGroupContext);

package/dist/types.d.ts

@@ -1,6 +1,10 @@
 import { FocusEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
-import { WithSupportProps } from '@snack-uikit/utils';
-import { Mode, Size } from './constants';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
+import { FAVORITE_ICON, MODE, SELECTION_MODE, SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type Mode = ValueOf<typeof MODE>;
+export type SelectionMode = ValueOf<typeof SELECTION_MODE>;
+export type FavoriteIcon = ValueOf<typeof FAVORITE_ICON>;
 export type InputVisualState = {
     focusVisible: boolean;
     disabled: boolean;

package/dist/utils.d.ts

@@ -1,4 +1,3 @@
-import { Size } from './constants';
-import { DataAttributes } from './types';
+import { DataAttributes, Size } from './types';
 export declare function getVisualStateAttributes(state: Record<string, string | boolean>): DataAttributes;
 export declare function getIconSize(size?: Size): 16 | 24;

package/dist/utils.js

@@ -1,4 +1,4 @@
-import { Size } from './constants';
+import { SIZE } from './constants';
 export function getVisualStateAttributes(state) {
     return Object.entries(state).reduce(function (result, [name, value]) {
         result[`data-${name.toLowerCase()}`] = value;
@@ -7,10 +7,10 @@ export function getVisualStateAttributes(state) {
 }
 export function getIconSize(size) {
     switch (size) {
-        case Size.S: {
+        case SIZE.S: {
             return 16;
         }
-        case Size.M:
+        case SIZE.M:
         default: {
             return 24;
         }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toggles",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,11 +32,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/icons": "0.19.1",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
     "merge-refs": "1.2.1",
     "uncontrollable": "8.0.0"
   },
-  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -4,7 +4,7 @@ import { useUncontrolledProp } from 'uncontrollable';
 
 import { CheckSVG, MinusSVG } from '@snack-uikit/icons';
 
-import { Size } from '../../constants';
+import { SIZE } from '../../constants';
 import { ToggleProps } from '../../types';
 import { getIconSize, getVisualStateAttributes } from '../../utils';
 import { TogglePrivate } from '../TogglePrivate';
@@ -23,7 +23,7 @@ export function Checkbox({
   indeterminateDefault,
   onChange: onChangeProp,
   'data-test-id': dataTestId,
-  size = Size.M,
+  size = SIZE.M,
   ...restProps
 }: CheckboxProps) {
   const localRef = useRef<HTMLInputElement>(null);
@@ -68,5 +68,3 @@ export function Checkbox({
     />
   );
 }
-
-Checkbox.sizes = Size;

package/src/components/Favorite/Favorite.tsx

@@ -2,20 +2,20 @@ import { useMemo } from 'react';
 
 import { HeartFilledSVG, HeartSVG, StarFilledSVG, StarSVG } from '@snack-uikit/icons';
 
-import { FavoriteIcon, Size } from '../../constants';
-import { ToggleProps } from '../../types';
+import { FAVORITE_ICON, SIZE } from '../../constants';
+import { FavoriteIcon, ToggleProps } from '../../types';
 import { getIconSize, getVisualStateAttributes } from '../../utils';
 import { TogglePrivate } from '../TogglePrivate';
 import styles from './styles.module.scss';
 
 const CHECKED_ICONS = {
-  [FavoriteIcon.Star]: StarFilledSVG,
-  [FavoriteIcon.Heart]: HeartFilledSVG,
+  [FAVORITE_ICON.Star]: StarFilledSVG,
+  [FAVORITE_ICON.Heart]: HeartFilledSVG,
 };
 
 const UNCHECKED_ICONS = {
-  [FavoriteIcon.Star]: StarSVG,
-  [FavoriteIcon.Heart]: HeartSVG,
+  [FAVORITE_ICON.Star]: StarSVG,
+  [FAVORITE_ICON.Heart]: HeartSVG,
 };
 
 export type FavoriteProps = Omit<ToggleProps, 'disabled'> & {
@@ -26,8 +26,8 @@ export type FavoriteProps = Omit<ToggleProps, 'disabled'> & {
 export function Favorite({
   inputRef,
   'data-test-id': dataTestId,
-  size = Size.M,
-  icon = FavoriteIcon.Heart,
+  size = SIZE.M,
+  icon = FAVORITE_ICON.Heart,
   ...restProps
 }: FavoriteProps) {
   const iconSize = useMemo(() => getIconSize(size), [size]);
@@ -50,5 +50,3 @@ export function Favorite({
     />
   );
 }
-
-Favorite.sizes = Size;

package/src/components/Radio/Radio.tsx

@@ -1,4 +1,4 @@
-import { Mode, Size } from '../../constants';
+import { MODE } from '../../constants';
 import { ToggleProps } from '../../types';
 import { getVisualStateAttributes } from '../../utils';
 import { TogglePrivate } from '../TogglePrivate';
@@ -11,7 +11,7 @@ export function Radio({ inputRef, 'data-test-id': dataTestId, ...restProps }: Ra
     <TogglePrivate
       {...restProps}
       data-test-id={dataTestId}
-      mode={Mode.Radio}
+      mode={MODE.Radio}
       ref={inputRef}
       render={function Radio(visualState) {
         const data = getVisualStateAttributes(visualState);
@@ -26,5 +26,3 @@ export function Radio({ inputRef, 'data-test-id': dataTestId, ...restProps }: Ra
     />
   );
 }
-
-Radio.sizes = Size;

package/src/components/Switch/Switch.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { CheckSVG, CrossSVG } from '@snack-uikit/icons';
 
-import { Size } from '../../constants';
+import { SIZE } from '../../constants';
 import { ToggleProps } from '../../types';
 import { getIconSize, getVisualStateAttributes } from '../../utils';
 import { TogglePrivate } from '../TogglePrivate';
@@ -13,7 +13,7 @@ export type SwitchProps = ToggleProps & {
   showIcon?: boolean;
 };
 
-export function Switch({ inputRef, 'data-test-id': dataTestId, showIcon, size = Size.M, ...restProps }: SwitchProps) {
+export function Switch({ inputRef, 'data-test-id': dataTestId, showIcon, size = SIZE.M, ...restProps }: SwitchProps) {
   const iconSize = useMemo(() => getIconSize(size), [size]);
 
   return (
@@ -46,5 +46,3 @@ export function Switch({ inputRef, 'data-test-id': dataTestId, showIcon, size =
     />
   );
 }
-
-Switch.sizes = Size;

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useCallback } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
-import { SelectionMode } from '../../constants';
+import { SELECTION_MODE } from '../../constants';
 import { ToggleGroupContext } from '../../context';
 
 export type ToggleGroupProps = {
@@ -16,7 +16,7 @@ export type ToggleGroupProps = {
       /** Controlled обработчик измения состояния */
       onChange?(value: (string | undefined) | string): void;
       /** Режим выбора */
-      selectionMode?: SelectionMode.Single;
+      selectionMode?: typeof SELECTION_MODE.Single;
     }
   | {
       /** Начальное состояние */
@@ -26,7 +26,7 @@ export type ToggleGroupProps = {
       /** Controlled обработчик измения состояния */
       onChange?(value: (string[] | undefined) | string[]): void;
       /** Режим выбора */
-      selectionMode?: SelectionMode.Multiple;
+      selectionMode?: typeof SELECTION_MODE.Multiple;
     }
 );
 
@@ -34,7 +34,7 @@ export function ToggleGroup({
   children,
   value: valueProp,
   onChange: onChangeProp,
-  selectionMode = SelectionMode.Single,
+  selectionMode = SELECTION_MODE.Single,
   defaultValue,
 }: ToggleGroupProps) {
   const [value, setValue] = useUncontrolledProp<string | string[] | undefined>(valueProp, defaultValue, cb => {
@@ -43,7 +43,7 @@ export function ToggleGroup({
 
   const onChange = useCallback(
     (newValue: string) => {
-      if (selectionMode === SelectionMode.Single) {
+      if (selectionMode === SELECTION_MODE.Single) {
         return setValue((oldValue: string | undefined) => {
           if (newValue !== oldValue) {
             return newValue;
@@ -72,5 +72,3 @@ export function ToggleGroup({
     <ToggleGroupContext.Provider value={{ value, onChange, selectionMode }}>{children}</ToggleGroupContext.Provider>
   );
 }
-
-ToggleGroup.selectionModes = SelectionMode;

package/src/components/ToggleGroup/hooks.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 
-import { SelectionMode } from '../../constants';
+import { SELECTION_MODE } from '../../constants';
 import { useToggleGroupContext } from '../../context';
 
 type UseToggleGroupProps = {
@@ -29,6 +29,6 @@ export function useToggleGroup({ value: itemValue }: UseToggleGroupProps) {
   return {
     isChecked,
     handleClick,
-    multipleSelection: selectionMode === SelectionMode.Multiple,
+    multipleSelection: selectionMode === SELECTION_MODE.Multiple,
   };
 }

package/src/components/TogglePrivate/TogglePrivate.tsx

@@ -2,7 +2,7 @@ import cn from 'classnames';
 import { forwardRef, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
-import { Mode, Size } from '../../constants';
+import { MODE, SIZE } from '../../constants';
 import { TogglePrivateProps } from '../../types';
 import { getVisualStateAttributes } from '../../utils';
 import styles from './styles.module.scss';
@@ -17,8 +17,8 @@ export const TogglePrivate = forwardRef<HTMLInputElement, TogglePrivateProps>(fu
     onFocus,
     disabled,
     className,
-    size = Size.M,
-    mode = Mode.Checkbox,
+    size = SIZE.M,
+    mode = MODE.Checkbox,
     'data-test-id': testId,
     ...otherProps
   },

package/src/constants.ts

@@ -1,19 +1,19 @@
-export enum Mode {
-  Checkbox = 'checkbox',
-  Radio = 'radio',
-}
+export const MODE = {
+  Checkbox: 'checkbox',
+  Radio: 'radio',
+} as const;
 
-export enum Size {
-  S = 's',
-  M = 'm',
-}
+export const SIZE = {
+  S: 's',
+  M: 'm',
+} as const;
 
-export enum FavoriteIcon {
-  Star = 'star',
-  Heart = 'heart',
-}
+export const FAVORITE_ICON = {
+  Star: 'star',
+  Heart: 'heart',
+} as const;
 
-export enum SelectionMode {
-  Single = 'single',
-  Multiple = 'multiple',
-}
+export const SELECTION_MODE = {
+  Single: 'single',
+  Multiple: 'multiple',
+} as const;

package/src/context.ts

@@ -1,6 +1,7 @@
 import { createContext, useContext } from 'react';
 
-import { SelectionMode } from './constants';
+import { SELECTION_MODE } from './constants';
+import { SelectionMode } from './types';
 
 type ToggleGroupContextType = {
   value: string | undefined | string[];
@@ -11,7 +12,7 @@ type ToggleGroupContextType = {
 export const ToggleGroupContext = createContext<ToggleGroupContextType>({
   value: undefined,
   onChange: undefined,
-  selectionMode: SelectionMode.Single,
+  selectionMode: SELECTION_MODE.Single,
 });
 
 export const useToggleGroupContext = () => useContext(ToggleGroupContext);

package/src/types.ts

@@ -1,8 +1,13 @@
 import { FocusEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
 
-import { WithSupportProps } from '@snack-uikit/utils';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 
-import { Mode, Size } from './constants';
+import { FAVORITE_ICON, MODE, SELECTION_MODE, SIZE } from './constants';
+
+export type Size = ValueOf<typeof SIZE>;
+export type Mode = ValueOf<typeof MODE>;
+export type SelectionMode = ValueOf<typeof SELECTION_MODE>;
+export type FavoriteIcon = ValueOf<typeof FAVORITE_ICON>;
 
 export type InputVisualState = {
   focusVisible: boolean;

package/src/utils.ts

@@ -1,5 +1,5 @@
-import { Size } from './constants';
-import { DataAttributes } from './types';
+import { SIZE } from './constants';
+import { DataAttributes, Size } from './types';
 
 export function getVisualStateAttributes(state: Record<string, string | boolean>) {
   return Object.entries(state).reduce<DataAttributes>(function (result, [name, value]) {
@@ -10,10 +10,10 @@ export function getVisualStateAttributes(state: Record<string, string | boolean>
 
 export function getIconSize(size?: Size) {
   switch (size) {
-    case Size.S: {
+    case SIZE.S: {
       return 16;
     }
-    case Size.M:
+    case SIZE.M:
     default: {
       return 24;
     }