@cloud-ru/ds-toggles 1.0.0

package/dist/cjs/types.d.ts

@@ -0,0 +1,57 @@
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
+import { FAVOURITE_ICON, MODE, SELECTION_MODE, SIZE } from './constants';
+export type DataAttributes = Record<`data-${string}`, string | boolean>;
+export type Size = ValueOf<typeof SIZE>;
+export type Mode = ValueOf<typeof MODE>;
+export type SelectionMode = ValueOf<typeof SELECTION_MODE>;
+export type FavouriteIcon = ValueOf<typeof FAVOURITE_ICON>;
+export type InputVisualState = {
+    focusVisible: boolean;
+    disabled: boolean;
+    checked: boolean;
+    hover: boolean;
+    size: Size;
+};
+type TogglePropsBase = WithSupportProps<{
+    /** Размер */
+    size?: Size;
+    /** Колбек рендера компонента */
+    render: (visualState: InputVisualState) => ReactNode;
+    /** HTML-аттрибут id */
+    id?: string;
+    /** Режим работы */
+    mode?: Mode;
+    /** HTML-аттрибут value */
+    value?: string;
+    /** HTML-аттрибут name */
+    name?: string;
+    /** HTML-аттрибут tab-index */
+    tabIndex?: number;
+    /** HTML-аттрибут autofocus */
+    autofocus?: boolean;
+    /** HTML-аттрибут checked */
+    checked?: boolean;
+    /** HTML-аттрибут checked по-умолчанию */
+    defaultChecked?: boolean;
+    /** HTML-аттрибут disabled */
+    disabled?: boolean;
+    /** Колбек смены значения */
+    onChange?: (checked: boolean) => void;
+    /** Колбек клика */
+    onClick?: MouseEventHandler<HTMLInputElement>;
+    /** Колбек потери фокуса */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /** Колбек приобретения фокуса */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    /** Колбек нажатия клавиши клавиатуры */
+    onKeyUp?: KeyboardEventHandler<HTMLDivElement>;
+    /** CSS-класс */
+    className?: string;
+}>;
+export type ToggleProps = WithSupportProps<Pick<TogglePropsBase, 'id' | 'name' | 'value' | 'tabIndex' | 'autofocus' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'onClick' | 'onBlur' | 'onFocus' | 'className' | 'size'> & {
+    inputRef?: RefObject<HTMLInputElement>;
+    /** Состояние загрузки */
+    loading?: boolean;
+}>;
+export {};

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/utils.d.ts

@@ -0,0 +1,3 @@
+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/cjs/utils.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVisualStateAttributes = getVisualStateAttributes;
+exports.getIconSize = getIconSize;
+const constants_1 = require("./constants");
+function getVisualStateAttributes(state) {
+    return Object.entries(state).reduce(function (result, [name, value]) {
+        result[`data-${name.toLowerCase()}`] = value;
+        return result;
+    }, {});
+}
+function getIconSize(size) {
+    switch (size) {
+        case constants_1.SIZE.XS: {
+            return 16;
+        }
+        case constants_1.SIZE.S:
+        default: {
+            return 24;
+        }
+    }
+}

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

@@ -0,0 +1,8 @@
+import { ToggleProps } from '../../types.js';
+export type CheckboxProps = ToggleProps & {
+    /** Состояние частичного выбора */
+    indeterminate?: boolean;
+    /** Состояние частичного выбора по-умолчанию */
+    indeterminateDefault?: boolean;
+};
+export declare function Checkbox({ inputRef, checked: checkedProp, defaultChecked, indeterminate: indeterminateProp, indeterminateDefault, onChange: onChangeProp, onBlur, onFocus, disabled, loading, size, className, 'data-test-id': dataTestId, ...otherProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Checkbox/Checkbox.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckSVG, MinusSVG } from '@cloud-ru/ds-icons/interface/system';
+import { LOADER_SIZE, Spinner } from '@cloud-ru/ds-loader';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { MODE, NATIVE_INPUT_SUFFIX, SIZE } from '../../constants.js';
+import { getIconSize, getVisualStateAttributes } from '../../utils.js';
+import styles from './styles.module.css';
+const SPINNER_SIZE_MAP = {
+    [SIZE.XS]: LOADER_SIZE.XS,
+    [SIZE.S]: LOADER_SIZE.S,
+};
+function Icon({ size, checked, indeterminate, loading, }) {
+    if (loading) {
+        return _jsx(Spinner, { size: SPINNER_SIZE_MAP[size] });
+    }
+    const iconSize = getIconSize(size);
+    if (checked) {
+        return _jsx(CheckSVG, { className: styles.icon, size: iconSize });
+    }
+    if (indeterminate) {
+        return _jsx(MinusSVG, { className: styles.icon, size: iconSize });
+    }
+    return null;
+}
+export function Checkbox({ inputRef, checked: checkedProp, defaultChecked, indeterminate: indeterminateProp, indeterminateDefault, onChange: onChangeProp, onBlur, onFocus, disabled = false, loading = false, size = SIZE.S, className, 'data-test-id': dataTestId, ...otherProps }) {
+    const localRef = useRef(null);
+    const ref = mergeRefs(localRef, inputRef);
+    const [indeterminate, setIndeterminate] = useUncontrolledProp(indeterminateProp, indeterminateDefault);
+    const [checked, setChecked] = useUncontrolledProp(checkedProp, Boolean(defaultChecked), onChangeProp);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const onChange = useCallback((checked) => {
+        setChecked?.(checked);
+        setIndeterminate(false);
+    }, [setChecked, setIndeterminate]);
+    useEffect(() => {
+        if (localRef.current) {
+            localRef.current.indeterminate = Boolean(indeterminate);
+        }
+    }, [localRef, indeterminate]);
+    const stateDataAttributes = getVisualStateAttributes({
+        loading,
+        disabled,
+        checked: indeterminate || checked,
+    });
+    return (_jsx("span", { className: cn(styles.root, className), role: MODE.Checkbox, "data-size": size, ...stateDataAttributes, "data-indeterminate": indeterminate || undefined, "data-test-id": dataTestId || undefined, children: _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.framing, ...stateDataAttributes, "data-focusvisible": focusVisible || undefined, children: [_jsx("div", { className: styles.backgroundStateLayer, "data-state": indeterminate || checked ? 'emptyDarkOnAccent' : 'emptyNeutralOnBackground' }), _jsx("div", { className: styles.flag, children: _jsx("div", { className: styles.surface, ...stateDataAttributes, "data-text-opacity": indeterminate || checked || undefined, children: _jsx(Icon, { size: size, loading: Boolean(loading), indeterminate: Boolean(indeterminate), checked: checked }) }) })] }), !loading && (_jsx("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${NATIVE_INPUT_SUFFIX}` : undefined, ref: ref, type: MODE.Checkbox, className: styles.inputPrivate, checked: checked, disabled: disabled, onChange: e => onChange(e.target.checked), onFocus: event => {
+                        setFocusVisible(event.target.matches(':focus-visible'));
+                        onFocus?.(event);
+                    }, onBlur: event => {
+                        setFocusVisible(false);
+                        onBlur?.(event);
+                    } }))] }) }));
+}

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

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

package/dist/esm/components/Checkbox/index.js

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

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

@@ -0,0 +1,223 @@
+@charset "UTF-8";
+.inputPrivate{
+  cursor:pointer;
+  position:absolute;
+  inset:0;
+  width:100%;
+  height:100%;
+  margin:0;
+  padding:0;
+  opacity:0;
+}
+.inputPrivate:disabled{
+  cursor:not-allowed;
+}
+
+.backgroundStateLayer{
+  border-radius:0 !important;
+  visibility:initial;
+}
+
+.framing{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+.framing[data-loading=false]{
+  border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+  border-style:solid;
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.framing[data-loading=false][data-disabled=true]{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.framing[data-loading=false][data-disabled=true][data-checked=true]{
+  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.framing[data-loading=false][data-disabled=false][data-checked=false]{
+  border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.framing[data-loading=false][data-disabled=false][data-checked=true]{
+  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}
+
+.flag{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.surface{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.icon{
+  position:absolute;
+  color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+
+.container{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.root{
+  position:relative;
+  display:inline-flex;
+  flex-direction:row;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  vertical-align:middle;
+}
+.root[data-size=xs] .container{
+  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-primitive-dimension-16, 16px));
+  min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-primitive-dimension-16, 16px));
+}
+.root[data-size=xs] .framing{
+  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
+  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
+  min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
+}
+.root[data-size=xs] .flag{
+  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px)));
+  min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px)));
+}
+.root[data-size=xs] .surface{
+  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-flag-surface-xs, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
+}
+.root[data-size=s] .container{
+  min-width:var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px));
+  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
+}
+.root[data-size=s] .framing{
+  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
+  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
+  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
+  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
+  border-radius:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+}
+.root[data-size=s] .flag{
+  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minWidth, var(--sn-primitive-dimension-20, 20px));
+  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minHeight, var(--sn-primitive-dimension-20, 20px));
+}
+.root[data-size=s] .surface{
+  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-20, 20px));
+  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-20, 20px));
+  border-radius:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-flag-surface-s, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.root[data-loading=false][data-disabled=false] .container{
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyVersionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=inversionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyInversionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=emptyDarkOnAccent], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.root[data-loading=false][data-disabled=false][data-size=xs] .backgroundStateLayer{
+  inset:calc(-1 * var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px))));
+}
+.root[data-loading=false][data-disabled=false][data-size=s] .backgroundStateLayer{
+  inset:calc(-1 * var(--sn-toggles-anatomy-size-s-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px))));
+}
+.root[data-loading=true] .flag{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
+  visibility:hidden;
+}

package/dist/esm/components/Favourite/Favourite.d.ts

@@ -0,0 +1,9 @@
+import { KeyboardEventHandler } from 'react';
+import { FavouriteIcon, ToggleProps } from '../../types.js';
+export type FavouriteProps = ToggleProps & {
+    /** Вариант иконки: звезда или сердце */
+    icon?: FavouriteIcon;
+    /** Обработчик keyup */
+    onKeyUp?: KeyboardEventHandler<HTMLSpanElement>;
+};
+export declare function Favourite({ inputRef, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, loading, size, className, 'data-test-id': dataTestId, icon, ...otherProps }: FavouriteProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Favourite/Favourite.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HeartFilledSVG, HeartSVG, StarFilledSVG, StarSVG } from '@cloud-ru/ds-icons/interface/system';
+import { LOADER_SIZE, Spinner } from '@cloud-ru/ds-loader';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useState } from 'react';
+import { FAVOURITE_ICON, MODE, NATIVE_INPUT_SUFFIX, SIZE } from '../../constants.js';
+import { getIconSize } from '../../utils.js';
+import styles from './styles.module.css';
+const SPINNER_SIZE_MAP = {
+    [SIZE.XS]: LOADER_SIZE.XS,
+    [SIZE.S]: LOADER_SIZE.S,
+};
+const ICONS = {
+    [FAVOURITE_ICON.Star]: { checked: StarFilledSVG, unchecked: StarSVG },
+    [FAVOURITE_ICON.Heart]: { checked: HeartFilledSVG, unchecked: HeartSVG },
+};
+function Icon({ size, checked, loading, variant, disabled, }) {
+    if (loading) {
+        return _jsx(Spinner, { size: SPINNER_SIZE_MAP[size] });
+    }
+    const iconSize = getIconSize(size);
+    const IconComponent = checked ? ICONS[variant].checked : ICONS[variant].unchecked;
+    return (_jsx(IconComponent, { className: styles.icon, size: iconSize, "data-checked": checked, "data-variant": variant, "data-disabled": disabled || undefined }));
+}
+export function Favourite({ inputRef, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled = false, loading = false, size = SIZE.S, className, 'data-test-id': dataTestId, icon = FAVOURITE_ICON.Heart, ...otherProps }) {
+    const [checked, setChecked] = useUncontrolledProp(checkedProp, Boolean(defaultChecked), onChange);
+    const [focusVisible, setFocusVisible] = useState(false);
+    return (_jsx("span", { className: cn(styles.root, className), role: MODE.Checkbox, "data-size": size, "data-icon": icon, "data-loading": loading, "data-disabled": disabled, "data-checked": checked, "data-focusvisible": focusVisible || undefined, "data-test-id": dataTestId, children: _jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.framing, children: _jsx("div", { className: styles.flag, children: _jsx("div", { className: styles.surface, "data-text-opacity": (!loading && !disabled) || undefined, children: _jsx(Icon, { size: size, checked: checked, variant: icon, loading: loading, disabled: disabled }) }) }) }), !loading && (_jsx("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${NATIVE_INPUT_SUFFIX}` : undefined, ref: inputRef, type: MODE.Checkbox, className: styles.inputPrivate, checked: checked, disabled: disabled, onChange: e => setChecked(e.target.checked), onFocus: event => {
+                        setFocusVisible(event.target.matches(':focus-visible'));
+                        onFocus?.(event);
+                    }, onBlur: event => {
+                        setFocusVisible(false);
+                        onBlur?.(event);
+                    } }))] }) }));
+}

package/dist/esm/components/Favourite/index.d.ts

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

package/dist/esm/components/Favourite/index.js

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

package/dist/esm/components/Favourite/styles.module.css

@@ -0,0 +1,138 @@
+@charset "UTF-8";
+.inputPrivate{
+  cursor:pointer;
+  position:absolute;
+  inset:0;
+  width:100%;
+  height:100%;
+  margin:0;
+  padding:0;
+  opacity:0;
+}
+.inputPrivate:disabled{
+  cursor:not-allowed;
+}
+
+.backgroundStateLayer{
+  border-radius:0 !important;
+  visibility:initial;
+}
+
+.flag{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.framing{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+
+.surface{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.icon{
+  position:absolute;
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.icon[data-checked=true][data-variant=star]{
+  color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
+}
+.icon[data-checked=true][data-variant=heart]{
+  color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.icon[data-checked=true][data-disabled=true]{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+
+.container{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.root{
+  position:relative;
+  display:inline-flex;
+  flex-direction:row;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  vertical-align:middle;
+}
+.root[data-size=xs] .container{
+  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-primitive-dimension-16, 16px));
+  min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-primitive-dimension-16, 16px));
+}
+.root[data-size=xs] .framing{
+  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
+  min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
+  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
+}
+.root[data-size=xs] .flag{
+  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px)));
+  min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px)));
+}
+.root[data-size=xs] .surface{
+  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-16, 16px));
+  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-16, 16px));
+  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-flag-surface-xs, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
+}
+.root[data-size=s] .container{
+  min-width:var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px));
+  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
+}
+.root[data-size=s] .framing{
+  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
+  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
+  border-radius:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
+  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
+}
+.root[data-size=s] .flag{
+  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minWidth, var(--sn-primitive-dimension-20, 20px));
+  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minHeight, var(--sn-primitive-dimension-20, 20px));
+}
+.root[data-size=s] .surface{
+  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-20, 20px));
+  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-20, 20px));
+  border-radius:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-flag-surface-s, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
+}
+.root[data-loading=false][data-disabled=false] .container .framing [data-text-opacity]{
+  opacity:var(--sn-theme-color-material-stateLayer-text-default-opacity, 1);
+}
+@media (hover: hover){
+  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .framing [data-text-opacity]{
+    opacity:var(--sn-theme-color-material-stateLayer-text-hovered-opacity, 0.85);
+  }
+}
+.root[data-loading=false][data-disabled=false] .container{
+}
+.root[data-loading=false][data-disabled=false] .container[data-loading] .framing [data-text-opacity], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .framing [data-text-opacity], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .framing [data-text-opacity]{
+  opacity:var(--sn-theme-color-material-stateLayer-text-pressed-opacity, 0.7);
+}
+.root[data-loading=true] .flag{
+  color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+}
+.root[data-disabled=true] .framing{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.root[data-focusvisible=true] .framing{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+}

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

@@ -0,0 +1,3 @@
+import { ToggleProps } from '../../types.js';
+export type RadioProps = ToggleProps;
+export declare function Radio({ inputRef, 'data-test-id': dataTestId, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, loading, className, size, ...otherProps }: RadioProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Radio/Radio.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LOADER_SIZE, Spinner } from '@cloud-ru/ds-loader';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useState } from 'react';
+import { MODE, NATIVE_INPUT_SUFFIX, SIZE } from '../../constants.js';
+import { getVisualStateAttributes } from '../../utils.js';
+import styles from './styles.module.css';
+const SPINNER_SIZE_MAP = {
+    [SIZE.XS]: LOADER_SIZE.XS,
+    [SIZE.S]: LOADER_SIZE.S,
+};
+export function Radio({ inputRef, 'data-test-id': dataTestId, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled = false, loading = false, className, size = SIZE.S, ...otherProps }) {
+    const [checked, setChecked] = useUncontrolledProp(checkedProp, Boolean(defaultChecked), onChange);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const stateDataAttributes = getVisualStateAttributes({
+        loading,
+        disabled,
+        checked,
+    });
+    return (_jsx("span", { className: cn(styles.root, className), role: MODE.Radio, "data-size": size, ...stateDataAttributes, "data-test-id": dataTestId || undefined, children: _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.framing, ...stateDataAttributes, "data-focusvisible": focusVisible || undefined, children: [_jsx("div", { className: styles.backgroundStateLayer, "data-state": 'emptyNeutralOnBackground' }), _jsx("div", { className: styles.flag, children: loading ? (_jsx(Spinner, { size: SPINNER_SIZE_MAP[size] })) : (_jsx("div", { className: styles.surface, ...stateDataAttributes, "data-text-opacity": checked || undefined })) })] }), !loading && (_jsx("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${NATIVE_INPUT_SUFFIX}` : undefined, ref: inputRef, type: MODE.Radio, className: styles.inputPrivate, checked: checked, disabled: disabled, onChange: e => setChecked(e.target.checked), onFocus: event => {
+                        setFocusVisible(event.target.matches(':focus-visible'));
+                        onFocus?.(event);
+                    }, onBlur: event => {
+                        setFocusVisible(false);
+                        onBlur?.(event);
+                    } }))] }) }));
+}

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

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

package/dist/esm/components/Radio/index.js

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