@sima-land/ui-nucleons 45.0.0-alpha.5 → 45.0.0-alpha.51

package/text-field/index.js

@@ -1,78 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextField = exports.DEFAULTS = exports.HEIGHTS = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const lodash_1 = require("lodash");
-const box_1 = require("../box");
-const base_input_deprecated_1 = require("../base-input-deprecated");
-const shapes_1 = require("../styling/shapes");
-const bind_1 = __importDefault(require("classnames/bind"));
-const text_field_module_scss_1 = __importDefault(require("./text-field.module.scss"));
-const sizes_1 = require("../styling/sizes");
-const cx = bind_1.default.bind(text_field_module_scss_1.default);
-exports.HEIGHTS = { xs: 32, s: 40, l: 56 };
-exports.DEFAULTS = { size: 'l' };
-/**
- * Вернет true если переданное значение будет выведено при установке в input.
- * @param value Значение.
- * @return Будет ли выведено значение.
- */
-const isVisible = (value) => !(0, lodash_1.isNil)(value) && `${value}` !== '';
-/**
- * Получив данные визуальных модификаторов, возвращает строку с css-классами.
- * @param modifiers Данные визуальных модификаторов.
- * @return Строка с css-классами.
- */
-const modifiersToClasses = ({ disabled, failed, focused, variant, }) => cx(disabled && 'disabled', failed && 'failed', focused && 'focused', variant && `variant-${variant}`);
-/**
- * Компонент текстового поля.
- * @deprecated На адаптивных страницах следует использовать Input или Textarea.
- * @param props Свойства.
- * @return Элемент.
- */
-exports.TextField = (0, react_1.forwardRef)(function TextField({ autoFocus, caption, classes = {}, defaultValue, disabled, endAdornment, failed, focused: asFocused, label, onClick, onBlur, onChange, onFocus, onInput, onKeyDown, onKeyUp, placeholder, readOnly, rounds = 'all', size = exports.DEFAULTS.size, startAdornment, value, variant = 'desktop', multiline, baseInputProps = {}, className, restPlaceholder, style, blockProps, 'data-testid': dataTestId, type, name, autoComplete, id, }, ref) {
-    const [hasValue, toggleHasValue] = (0, react_1.useState)(isVisible(value) || isVisible(defaultValue));
-    const [reallyFocused, toggleFocused] = (0, react_1.useState)(autoFocus);
-    const focused = reallyFocused || Boolean(asFocused);
-    const baseInputRef = (0, react_1.useRef)();
-    const isDesktop = variant === 'desktop';
-    const isMobile = variant === 'mobile';
-    const isLargeDesktop = isDesktop && size === 'l';
-    const withLabel = (isLargeDesktop || isMobile) && Boolean(label);
-    const labelAsPlaceholder = !(focused || hasValue);
-    const commonModifyClasses = modifiersToClasses({
-        disabled,
-        failed,
-        focused,
-        variant,
-    });
-    (0, react_1.useImperativeHandle)(ref, () => baseInputRef.current);
-    (0, react_1.useEffect)(() => { var _a; return toggleHasValue(Boolean((_a = baseInputRef.current) === null || _a === void 0 ? void 0 : _a.value)); });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-testid": dataTestId, className: cx('root', className, classes.root), style: style }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({}, blockProps, { "data-testid": 'text-field:block', className: cx('reset', 'input-block', commonModifyClasses, size && `size-${size}`, focused && classes.blockFocused, multiline && 'multiline', withLabel && 'with-label', variant === 'desktop' && rounds !== 'none' && shapes_1.SmallRounds[rounds], blockProps === null || blockProps === void 0 ? void 0 : blockProps.className), onClick: event => {
-                    const input = baseInputRef.current;
-                    onClick === null || onClick === void 0 ? void 0 : onClick(event);
-                    input &&
-                        !disabled &&
-                        !event.defaultPrevented &&
-                        input !== document.activeElement &&
-                        input.focus();
-                } }, { children: [!multiline && Boolean(startAdornment) && ((0, jsx_runtime_1.jsx)(box_1.Box, Object.assign({ display: 'flex', alignItems: 'center', marginRight: 4 }, { children: startAdornment }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: cx('main-column') }, { children: [withLabel && ((0, jsx_runtime_1.jsx)("label", { className: cx('label', commonModifyClasses, hasValue && 'filled', labelAsPlaceholder && 'as-placeholder'), htmlFor: id, children: label, "data-testid": 'text-field:label' })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('input-wrapper') }, { children: (0, jsx_runtime_1.jsx)(base_input_deprecated_1.BaseInput, Object.assign({}, baseInputProps, { type: type, id: id, name: name, autoComplete: autoComplete, "data-testid": 'text-field:field', multiline: multiline, ref: baseInputRef, placeholder: withLabel && labelAsPlaceholder ? undefined : placeholder, restPlaceholder: withLabel && labelAsPlaceholder ? undefined : restPlaceholder, autoFocus: autoFocus, className: cx('base-input', commonModifyClasses, classes.baseInput, size && `size-${size}`), defaultValue: defaultValue, value: value, readOnly: readOnly, disabled: disabled, onFocus: (event) => {
-                                        onFocus && onFocus(event);
-                                        toggleHasValue(Boolean(event.target.value));
-                                        toggleFocused(true);
-                                    }, onBlur: (event) => {
-                                        onBlur && onBlur(event);
-                                        toggleHasValue(Boolean(event.target.value));
-                                        toggleFocused(false);
-                                    }, onInput: (event) => {
-                                        onInput === null || onInput === void 0 ? void 0 : onInput(event);
-                                        toggleHasValue(Boolean(event.target.value));
-                                    }, onChange: (event) => {
-                                        onChange === null || onChange === void 0 ? void 0 : onChange(event);
-                                        toggleHasValue(Boolean(event.target.value));
-                                    }, onKeyDown: onKeyDown, onKeyUp: onKeyUp })) }))] })), !multiline && Boolean(endAdornment) && ((0, jsx_runtime_1.jsx)(box_1.Box, Object.assign({ display: 'flex', alignItems: 'center', marginLeft: 4 }, { children: endAdornment })))] })), Boolean(caption) && ((0, jsx_runtime_1.jsx)("div", { className: cx('caption', (0, sizes_1.marginTop)(isMobile ? 1 : 2), failed && 'failed'), children: caption }))] })));
-});

package/text-field/text-field.module.scss

@@ -1,205 +0,0 @@
-@use '../colors';
-
-.reset {
-  margin: 0;
-  border: 0;
-  padding: 0;
-  outline: 0;
-  box-sizing: border-box;
-  font: inherit;
-}
-
-// В селекторе указан input потому что в основном проекте присутствуют стили,
-// которые переопределяют отступы для input. Иначе не хватает специфичности.
-input.reset {
-  padding: 0;
-}
-
-.root {
-  display: inline-block;
-}
-
-.input-block {
-  display: flex;
-  min-width: 56px; // минимальная ширина по договоренности с дизайнерами
-  max-width: 100%;
-  padding: 0 12px;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: nowrap;
-  overflow: hidden;
-  &.with-label {
-    .input-wrapper {
-      padding-top: 16px;
-    }
-  }
-
-  // variant: desktop
-  &.variant-desktop {
-    background-color: #fff;
-    border: 1px solid colors.$basic-gray12;
-    &.disabled {
-      border-color: colors.$basic-gray12;
-      background-color: colors.$basic-gray2;
-    }
-    &.focused:not(.disabled):not(.failed) {
-      border-color: colors.$basic-blue;
-    }
-    &.disabled {
-      border-color: colors.$basic-gray12;
-    }
-    &:not(.multiline) {
-      &.size-xs {
-        font-size: 14px;
-        height: 32px;
-      }
-      &.size-s {
-        height: 40px;
-      }
-      &.size-m {
-        height: 48px;
-      }
-      &.size-l {
-        height: 56px;
-        padding: 0 16px;
-      }
-    }
-    &.multiline {
-      align-items: flex-start;
-      min-height: 128px;
-      padding: 14px 16px; // 14px с учетом обводки
-      &.with-label {
-        padding: 7px 16px; // 7px с учетом обводки
-      }
-    }
-  }
-
-  // variant: mobile
-  &.variant-mobile {
-    padding: 0;
-    border: 0;
-    box-shadow: inset 0 -1px colors.$basic-gray12;
-    .main-column {
-      height: 100%;
-      justify-content: center;
-    }
-    &.with-label .main-column {
-      justify-content: flex-start;
-    }
-    &.focused:not(.disabled) {
-      box-shadow: inset 0 -1px colors.$basic-blue;
-    }
-    &.failed:not(:disabled) {
-      box-shadow: inset 0 -1px colors.$additional-deep-red;
-    }
-    &:not(.multiline) {
-      height: 48px;
-    }
-    &.multiline {
-      height: auto;
-      min-height: 48px;
-      .main-column {
-        padding-bottom: 8px;
-      }
-      &:not(.with-label) .main-column {
-        padding-top: 8px;
-      }
-    }
-  }
-
-  // чтобы startAdornment/endAdornment подхватили цвет
-  color: colors.$basic-gray87;
-  &.disabled {
-    color: colors.$basic-gray24;
-  }
-}
-
-.main-column {
-  position: relative;
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-.input-wrapper {
-  display: flex;
-}
-
-.label {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  font-size: 12px;
-  line-height: 16px;
-  transition: transform 0.2s ease, font-size 0.2s ease, top 0.2s ease;
-  transform-origin: left bottom;
-  white-space: nowrap;
-  overflow: hidden;
-  color: colors.$basic-gray38;
-  &.disabled {
-    color: colors.$basic-gray24;
-  }
-  &.as-placeholder {
-    font-size: 16px;
-    line-height: 24px;
-    &.variant-desktop {
-      top: 8px;
-    }
-    &.variant-mobile {
-      top: 12px;
-    }
-  }
-  &.variant-mobile {
-    &.focused:not(.failed) {
-      color: colors.$basic-blue;
-    }
-    &.failed.focused,
-    &.failed.filled {
-      color: colors.$additional-deep-red;
-    }
-  }
-  &.variant-desktop {
-    &.failed:not(.focused):not(.filled) {
-      color: colors.$additional-deep-red;
-    }
-  }
-}
-
-// hotfix: storybook добавляет стили в порядке наименования компонентов (не сходится с порядком в webpack)
-.input-wrapper .base-input {
-  font-size: 16px;
-  line-height: 24px;
-  color: colors.$basic-gray87;
-  --placeholder-color: #{colors.$basic-gray38};
-  background-color: transparent;
-  width: 0;
-  flex-grow: 1;
-  &.disabled {
-    color: colors.$basic-gray24;
-    --placeholder-color: #{colors.$basic-gray24};
-    -webkit-text-fill-color: colors.$basic-gray24; //fix safari disabled
-  }
-  &.size-xs {
-    font-size: 14px;
-    line-height: 20px;
-  }
-  &.variant-mobile:not(:focus) {
-    text-overflow: ellipsis;
-  }
-  &.variant-desktop.failed {
-    color: colors.$additional-deep-red;
-    --placeholder-color: #{colors.$additional-deep-red};
-  }
-}
-
-.caption {
-  font-size: 12px;
-  line-height: 16px;
-  color: colors.$basic-gray38;
-  &.failed {
-    color: colors.$additional-deep-red;
-  }
-}

package/textarea/index.d.ts

@@ -1,21 +0,0 @@
-import { TextareaHTMLAttributes, Ref } from 'react';
-import { BaseInputAsTextareaProps } from '../base-input';
-import { FieldBlockProps } from '../field-block';
-type HTMLTextareaProps = Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'autoComplete' | 'autoFocus' | 'defaultValue' | 'disabled' | 'id' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'placeholder' | 'readOnly' | 'required' | 'rows' | 'value'>;
-export interface TextareaProps extends HTMLTextareaProps, FieldBlockProps {
-    /** Ref элемента textarea. */
-    textareaRef?: Ref<HTMLTextAreaElement>;
-    /** Свойства BaseInputProps. */
-    baseInputProps?: BaseInputAsTextareaProps;
-    /** Стили корневого элемента. */
-    style?: Required<FieldBlockProps>['rootProps']['style'];
-    /** CSS-класс корневого элемента. */
-    className?: Required<FieldBlockProps>['rootProps']['className'];
-}
-/**
- * Текстовая область.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function Textarea({ textareaRef, baseInputProps, style, className, autoComplete, autoFocus, defaultValue, disabled, id, name, onBlur, onChange, onFocus, onInput, placeholder, readOnly, required, rows, value, label, failed, caption, blockProps, 'data-testid': testId, ...restProps }: TextareaProps): JSX.Element;
-export {};

package/textarea/index.js

@@ -1,63 +0,0 @@
-"use strict";
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textarea = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const base_input_1 = require("../base-input");
-const field_block_1 = require("../field-block");
-const utils_1 = require("../input/utils");
-const bind_1 = __importDefault(require("classnames/bind"));
-const textarea_module_scss_1 = __importDefault(require("./textarea.module.scss"));
-const cx = bind_1.default.bind(textarea_module_scss_1.default);
-/**
- * Текстовая область.
- * @param props Свойства.
- * @return Элемент.
- */
-function Textarea(_a) {
-    var { 
-    // specific Textarea props
-    textareaRef, baseInputProps, 
-    // root props
-    style, className, 
-    // textarea element props (popular)
-    autoComplete, autoFocus, defaultValue, disabled, id, name, onBlur, onChange, onFocus, onInput, placeholder, readOnly, required, rows = 4, value, 
-    // FieldBlock props
-    label, failed, caption, blockProps, 'data-testid': testId = 'textarea' } = _a, restProps = __rest(_a, ["textareaRef", "baseInputProps", "style", "className", "autoComplete", "autoFocus", "defaultValue", "disabled", "id", "name", "onBlur", "onChange", "onFocus", "onInput", "placeholder", "readOnly", "required", "rows", "value", "label", "failed", "caption", "blockProps", 'data-testid']);
-    const ref = (0, react_1.useRef)(null);
-    const [filled, updateFilled] = (0, utils_1.useFilledState)(ref, { value, defaultValue });
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    const handleMouseDown = (0, utils_1.useFieldMouseDown)(ref, blockProps === null || blockProps === void 0 ? void 0 : blockProps.onMouseDown);
-    (0, react_1.useImperativeHandle)(textareaRef, () => ref.current);
-    return ((0, jsx_runtime_1.jsx)(field_block_1.FieldBlock, Object.assign({}, restProps, { rootProps: Object.assign(Object.assign({}, restProps.rootProps), { style,
-            className }), "data-testid": testId, caption: caption, disabled: disabled, failed: failed, fixedHeight: false, focused: focused, label: label, labelAsPlaceholder: !focused && !filled, labelProps: { htmlFor: id }, size: 'l', blockProps: Object.assign(Object.assign({}, blockProps), { onMouseDown: handleMouseDown }), main: (0, jsx_runtime_1.jsx)(base_input_1.BaseInput, Object.assign({}, baseInputProps, { textareaRef: ref, multiline: true, className: cx('textarea', baseInputProps === null || baseInputProps === void 0 ? void 0 : baseInputProps.className), style: Object.assign(Object.assign({}, baseInputProps === null || baseInputProps === void 0 ? void 0 : baseInputProps.style), { '--placeholder-color': (0, utils_1.definePlaceholderColor)({ failed, disabled }) }), autoComplete: autoComplete, autoFocus: autoFocus, defaultValue: defaultValue, disabled: disabled, id: id, name: name, placeholder: placeholder, readOnly: readOnly, required: required, rows: rows, value: value, onFocus: (event) => {
-                onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-                updateFilled(event);
-                setFocused(true);
-            }, onBlur: (event) => {
-                onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-                updateFilled(event);
-                setFocused(false);
-            }, onInput: (event) => {
-                onInput === null || onInput === void 0 ? void 0 : onInput(event);
-                updateFilled(event);
-            }, onChange: (event) => {
-                onChange === null || onChange === void 0 ? void 0 : onChange(event);
-                updateFilled(event);
-            } })), mainProps: { className: cx('main') } })));
-}
-exports.Textarea = Textarea;

package/timer/index.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import { Distance } from './types';
-export interface TimerProps {
-    /** Дата и время события. */
-    date: string;
-    /** Должна отформатировать данные об оставшемся времени для вывода. */
-    format?: (d: Distance) => React.ReactNode;
-    /** Частота обновления таймера в миллисекундах. */
-    timeout?: number;
-}
-/**
- * Компонент для вывода оставшегося времени до целевой временной отметки.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Timer: ({ date, format, timeout }: TimerProps) => JSX.Element;

package/timer/index.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Timer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const utils_1 = require("./utils");
-/**
- * Компонент для вывода оставшегося времени до целевой временной отметки.
- * @param props Свойства.
- * @return Элемент.
- */
-const Timer = ({ date, format = utils_1.formatDistance, timeout = 1000 }) => {
-    const [distance, setDistance] = (0, react_1.useState)((0, utils_1.getDistanceToNow)(date));
-    (0, react_1.useEffect)(() => {
-        const timerId = setInterval(() => {
-            setDistance((0, utils_1.getDistanceToNow)(date));
-        }, timeout);
-        setDistance((0, utils_1.getDistanceToNow)(date));
-        return () => clearInterval(timerId);
-    }, [timeout]);
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: format(distance) });
-};
-exports.Timer = Timer;

package/timer/types.d.ts

@@ -1,6 +0,0 @@
-export interface Distance {
-    days: number;
-    hours: number;
-    minutes: number;
-    seconds: number;
-}

package/timer/types.js

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

package/timer/utils.d.ts

@@ -1,13 +0,0 @@
-import { Distance } from './types';
-/**
- * Форматирует оставшееся время в виде "дни:часы:минуты:секунды".
- * @param distance Оставшееся время.
- * @return Отформатированное время.
- */
-export declare const formatDistance: ({ days, hours, minutes, seconds }: Distance) => string;
-/**
- * Возвращает объект с данными об оставшемся времени от текущего момента.
- * @param dateString Строка с датой в формате ISO.
- * @return Оставшееся время.
- */
-export declare const getDistanceToNow: (dateString: string) => Distance;

package/timer/utils.js

@@ -1,36 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDistanceToNow = exports.formatDistance = void 0;
-const formatDistanceToNowStrict_1 = __importDefault(require("date-fns/formatDistanceToNowStrict"));
-const isAfter_1 = __importDefault(require("date-fns/isAfter"));
-const isValid_1 = __importDefault(require("date-fns/isValid"));
-const parseISO_1 = __importDefault(require("date-fns/parseISO"));
-const UNITS = ['day', 'hour', 'minute', 'second'];
-/**
- * Форматирует оставшееся время в виде "дни:часы:минуты:секунды".
- * @param distance Оставшееся время.
- * @return Отформатированное время.
- */
-const formatDistance = ({ days, hours, minutes, seconds }) => [days, ...[hours % 24, minutes % 60, seconds % 60].map(s => `${s}`.padStart(2, '0'))].join(':');
-exports.formatDistance = formatDistance;
-/**
- * Возвращает объект с данными об оставшемся времени от текущего момента.
- * @param dateString Строка с датой в формате ISO.
- * @return Оставшееся время.
- */
-const getDistanceToNow = (dateString) => {
-    const date = (0, parseISO_1.default)(dateString);
-    let result = { days: 0, hours: 0, minutes: 0, seconds: 0 };
-    if ((0, isValid_1.default)(date) && !(0, isAfter_1.default)(new Date(), date)) {
-        const [days, hours, minutes, seconds] = UNITS.map(unit => parseInt((0, formatDistanceToNowStrict_1.default)(date, {
-            unit,
-            roundingMethod: 'floor',
-        }).replace(/\D/g, '')));
-        result = { days, hours, minutes, seconds };
-    }
-    return result;
-};
-exports.getDistanceToNow = getDistanceToNow;

package/toggle/index.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { CheckboxInputProps } from '../types';
-export type ToggleProps = CheckboxInputProps;
-/**
- * Компонент стилизованного переключателя (input[type=checkbox]).
- */
-export declare const Toggle: import("react").ForwardRefExoticComponent<CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/toggle/index.js

@@ -1,32 +0,0 @@
-"use strict";
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toggle = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const bind_1 = __importDefault(require("classnames/bind"));
-const toggle_module_scss_1 = __importDefault(require("./toggle.module.scss"));
-const cx = bind_1.default.bind(toggle_module_scss_1.default);
-/**
- * Компонент стилизованного переключателя (input[type=checkbox]).
- */
-exports.Toggle = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, style, 'data-testid': testId = 'toggle' } = _a, 
-    // input props
-    restProps = __rest(_a, ["className", "style", 'data-testid']);
-    return ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: cx('root', className), style: style }, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, restProps, { className: cx('input'), ref: ref, type: 'checkbox', "data-testid": testId })), (0, jsx_runtime_1.jsx)("span", { className: cx('switch') })] })));
-});
-exports.Toggle.displayName = 'Toggle';

package/toggle/toggle.module.scss

@@ -1,61 +0,0 @@
-@use '../colors';
-
-.root {
-  position: relative;
-  display: inline-block;
-  cursor: pointer;
-  user-select: none;
-  vertical-align: -2px;
-}
-
-.input {
-  position: absolute;
-  display: block;
-  opacity: 0;
-  padding: 0;
-  margin: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-  &:not(:checked) + .switch {
-    --toggle-slider-position: 2px;
-  }
-  &:checked + .switch {
-    --toggle-slider-position: calc(100% - 22px);
-  }
-  &:not(:checked):not(:disabled) + .switch {
-    --toggle-primary-color: #{colors.$basic-gray12};
-  }
-  &:checked:not(:disabled) + .switch {
-    --toggle-primary-color: #{colors.$basic-blue};
-  }
-  &:not(:checked):disabled + .switch {
-    --toggle-primary-color: #{colors.$basic-gray4};
-  }
-  &:checked:disabled + .switch {
-    --toggle-primary-color: #{colors.$basic-gray24};
-  }
-}
-
-.switch {
-  position: relative;
-  display: block;
-  width: 44px;
-  height: 24px;
-  border-radius: 12px;
-  background: var(--toggle-primary-color);
-  transition: background 0.16s ease-in-out;
-  &::after {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: var(--toggle-slider-position);
-    display: block;
-    width: 20px;
-    height: 20px;
-    background: #fff;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-    border-radius: 50%;
-    transition: left 0.32s ease-in-out;
-  }
-}

package/tooltip/index.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-export interface TooltipProps {
-    /** Содержимое. */
-    children?: React.ReactNode;
-    /** CSS-класс корневого элемента. */
-    className?: string;
-    /** Сработает при клике за пределами или на крестик. */
-    onClose?: React.MouseEventHandler<SVGSVGElement>;
-    /** Стили. */
-    style?: React.CSSProperties;
-}
-/**
- * Компонент подсказки.
- * @deprecated Можно использовать `popup`.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLDivElement | null>>;

package/tooltip/index.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Cross"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const tooltip_module_scss_1 = __importDefault(require("./tooltip.module.scss"));
-const cx = bind_1.default.bind(tooltip_module_scss_1.default);
-/**
- * Компонент подсказки.
- * @deprecated Можно использовать `popup`.
- * @param props Свойства.
- * @return Элемент.
- */
-exports.Tooltip = (0, react_1.forwardRef)(({ children, onClose, style, className }, ref) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, style: style, className: cx('root', className), "data-testid": 'tooltip' }, { children: [(0, jsx_runtime_1.jsx)(Cross_1.default, { className: cx('cross'), onClick: onClose, "data-testid": 'tooltip:cross' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('content') }, { children: children }))] }))));

package/tooltip/tooltip.module.scss

@@ -1,49 +0,0 @@
-@use '../colors';
-@import '../styling/shadows.module';
-
-.root {
-  display: inline-flex;
-  position: relative;
-  max-width: 400px;
-  max-height: 536px;
-  padding: 40px 8px;
-  box-sizing: border-box;
-  overflow: hidden;
-  background: colors.$basic-gray4;
-  border-radius: 4px;
-  @extend .shadow-z2;
-}
-
-.cross {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  cursor: pointer;
-}
-
-.content {
-  font-size: 16px;
-  line-height: 24px;
-  padding: 0 32px;
-  max-height: 456px; // 536 (по макетам) - 80 (отступы)
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  // base scrollbar styling for Gecko
-  scrollbar-color: #e0e0e0 transparent;
-  scrollbar-width: thin;
-
-  // base scrollbar styling for IE
-  scrollbar-face-color: #e0e0e0;
-  scrollbar-track-color: #fafafa;
-
-  // scrollbar styling for Webkit/Blink
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-  &::-webkit-scrollbar-thumb {
-    width: 4px;
-    background-color: #e0e0e0;
-    border-radius: 4px;
-  }
-}