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

package/dist/text/text.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = exports.ALIGNS = exports.defaultHeights = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../styling/colors");
+const fonts_1 = require("../styling/fonts");
+const bind_1 = __importDefault(require("classnames/bind"));
+const text_m_scss_1 = __importDefault(require("./text.m.scss"));
+const cx = bind_1.default.bind(text_m_scss_1.default);
+exports.defaultHeights = {
+    12: 16,
+    14: 20,
+    16: 24,
+    20: 28,
+    24: 32,
+    32: 40,
+    48: 60,
+    64: 80,
+};
+exports.ALIGNS = new Set(['left', 'center', 'right', 'justify']);
+/**
+ * Блок с возможностью быстрой стилизации текста по дизайн-гайдам.
+ * @deprecated
+ * @param props Свойства.
+ * @return Элемент.
+ */
+exports.Text = (0, react_1.memo)((0, react_1.forwardRef)(function Text({ children, element: Container = 'span', size, 
+// по гайдам дизайн-системы устанавливаем высоту по умолчанию
+lineHeight = size ? exports.defaultHeights[size] : undefined, 
+// не устанавливаем значения по умолчанию, чтобы компонент вел себя предсказуемо
+align, color, nowrap, truncate, weight, }, ref) {
+    const needLineClamp = typeof truncate === 'number' && truncate > 0;
+    return ((0, jsx_runtime_1.jsx)(Container, { ref: ref, className: cx([
+            // styling
+            size && (0, fonts_1.size)(size),
+            lineHeight && (0, fonts_1.lineHeight)(lineHeight),
+            color && (0, colors_1.color)(color),
+            weight && (0, fonts_1.weight)(weight),
+            // text
+            align && exports.ALIGNS.has(align) && `align-${align}`,
+            nowrap && 'nowrap',
+            truncate === true && 'truncate',
+            needLineClamp && 'line-clamp',
+        ]), style: needLineClamp ? { WebkitLineClamp: truncate } : {}, children: children }));
+}));
+//# sourceMappingURL=text.js.map

package/dist/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/text/text.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAyC;AAEzC,8CAAwD;AACxD,4CAM0B;AAC1B,2DAAyC;AACzC,gEAAoC;AAEpC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,qBAAO,CAAC,CAAC;AAEvB,QAAA,cAAc,GAAuC;IAChE,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACP,CAAC;AAEW,QAAA,MAAM,GAAG,IAAI,GAAG,CAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;AAE7E;;;;;GAKG;AACU,QAAA,IAAI,GAAG,IAAA,YAAI,EACtB,IAAA,kBAAU,EAAiB,SAAS,IAAI,CACtC,EACE,QAAQ,EACR,OAAO,EAAE,SAAS,GAAG,MAAM,EAC3B,IAAI;AAEJ,6DAA6D;AAC7D,UAAU,GAAG,IAAI,CAAC,CAAC,CAAC,sBAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;AAEpD,gFAAgF;AAChF,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,EACR,MAAM,GACP,EACD,GAAG;IAEH,MAAM,aAAa,GAAG,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,GAAG,CAAC,CAAC;IAEnE,OAAO,CACL,uBAAC,SAAS,IACR,GAAG,EAAE,GAAU,EACf,SAAS,EAAE,EAAE,CAAC;YACZ,UAAU;YACV,IAAI,IAAI,IAAA,YAAS,EAAC,IAAI,CAAC;YACvB,UAAU,IAAI,IAAA,kBAAe,EAAC,UAAU,CAAC;YACzC,KAAK,IAAI,IAAA,cAAU,EAAC,KAAK,CAAC;YAC1B,MAAM,IAAI,IAAA,cAAW,EAAC,MAAM,CAAC;YAE7B,OAAO;YACP,KAAK,IAAI,cAAM,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,SAAS,KAAK,EAAE;YAC9C,MAAM,IAAI,QAAQ;YAClB,QAAQ,KAAK,IAAI,IAAI,UAAU;YAC/B,aAAa,IAAI,YAAY;SAC9B,CAAC,EACF,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,EACzD,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC,CAAC,CACH,CAAC"}

package/dist/text/types.d.ts

@@ -0,0 +1,28 @@
+import type { CSSProperties, ElementType, ReactNode, RefAttributes } from 'react';
+import type { Token } from '../colors';
+import type { LineHeight, Size, Weight } from '../styling/fonts';
+export type Align = 'left' | 'center' | 'right' | 'justify';
+export interface TextProps {
+    /** Направление. */
+    align?: Align;
+    /** Содержимое. */
+    children?: ReactNode;
+    /** Ключ цвета из дизайн системы. */
+    color?: Token;
+    /** Элемент, который будет использован как обертка. */
+    element?: string | ElementType<{
+        className: string;
+        style: CSSProperties;
+        children?: ReactNode;
+    } & RefAttributes<any>>;
+    /** Межстрочный интервал. */
+    lineHeight?: LineHeight;
+    /** Нужно ли добавить стиль "white-space: nowrap". */
+    nowrap?: boolean;
+    /** Размер. */
+    size?: Size;
+    /** Нужно ли обрезать текст многоточием в одну строку. */
+    truncate?: boolean | number;
+    /** Начертание. */
+    weight?: Weight;
+}

package/dist/text/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/text/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/text/types.ts"],"names":[],"mappings":""}

package/dist/text-button/index.d.ts

@@ -0,0 +1,2 @@
+export type { TextButtonSize, TextButtonColor, TextButtonProps, TextButtonAsAnchorProps, TextButtonAsButtonProps, } from './types';
+export { TextButton } from './text-button';

package/dist/text-button/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextButton = void 0;
+var text_button_1 = require("./text-button");
+Object.defineProperty(exports, "TextButton", { enumerable: true, get: function () { return text_button_1.TextButton; } });
+//# sourceMappingURL=index.js.map

package/dist/text-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/text-button/index.ts"],"names":[],"mappings":";;;AAOA,6CAA2C;AAAlC,yGAAA,UAAU,OAAA"}

package/dist/text-button/text-button.d.ts

@@ -0,0 +1,8 @@
+import type { TextButtonProps } from './types';
+import type { ReactElement } from 'react';
+/**
+ * Текстовая кнопка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function TextButton({ size, color, children, className, startIcon: StartIcon, endIcon: EndIcon, buttonRef, anchorRef, underline, disabled, iconGutter, 'data-testid': testId, ...restProps }: TextButtonProps): ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/text-button/text-button.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextButton = TextButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bind_1 = __importDefault(require("classnames/bind"));
+const text_button_m_scss_1 = __importDefault(require("./text-button.m.scss"));
+const cx = bind_1.default.bind(text_button_m_scss_1.default);
+/**
+ * Текстовая кнопка.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function TextButton({ size = 'm', color = 'basic-blue', children, className, startIcon: StartIcon, endIcon: EndIcon, buttonRef, anchorRef, underline, disabled, iconGutter = 8, 'data-testid': testId = 'text-button', ...restProps }) {
+    const rooClassName = cx('root', color && color !== 'unset' && `color-${color}`, size && size !== 'unset' && `size-${size}`, typeof iconGutter === 'number' && `icon-gutter-${iconGutter}`, underline && 'underline', disabled && 'disabled', className);
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [StartIcon && (0, jsx_runtime_1.jsx)(StartIcon, { className: cx('icon-start') }), children, EndIcon && (0, jsx_runtime_1.jsx)(EndIcon, { className: cx('icon-end') })] }));
+    let result;
+    switch (restProps.as) {
+        case 'anchor': {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { as, ...anchorProps } = restProps;
+            result = ((0, jsx_runtime_1.jsx)("a", { ...anchorProps, ref: anchorRef, className: rooClassName, "data-testid": testId, children: content }));
+            break;
+        }
+        case 'button':
+        default: {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { as, ...buttonProps } = restProps;
+            result = ((0, jsx_runtime_1.jsx)("button", { ...buttonProps, ref: buttonRef, className: rooClassName, disabled: disabled, "data-testid": testId, children: content }));
+            break;
+        }
+    }
+    return result;
+}
+//# sourceMappingURL=text-button.js.map

package/dist/text-button/text-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-button.js","sourceRoot":"","sources":["../../src/text-button/text-button.tsx"],"names":[],"mappings":";;;;;AAYA,gCAqEC;;AA/ED,2DAAyC;AACzC,8EAA0C;AAE1C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,4BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,UAAU,CAAC,EACzB,IAAI,GAAG,GAAG,EACV,KAAK,GAAG,YAAY,EACpB,QAAQ,EACR,SAAS,EACT,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,SAAS,EACT,SAAS,EACT,SAAS,EACT,QAAQ,EACR,UAAU,GAAG,CAAC,EACd,aAAa,EAAE,MAAM,GAAG,aAAa,EACrC,GAAG,SAAS,EACI;IAChB,MAAM,YAAY,GAAG,EAAE,CACrB,MAAM,EACN,KAAK,IAAI,KAAK,KAAK,OAAO,IAAI,SAAS,KAAK,EAAE,EAC9C,IAAI,IAAI,IAAI,KAAK,OAAO,IAAI,QAAQ,IAAI,EAAE,EAC1C,OAAO,UAAU,KAAK,QAAQ,IAAI,eAAe,UAAU,EAAE,EAC7D,SAAS,IAAI,WAAW,EACxB,QAAQ,IAAI,UAAU,EACtB,SAAS,CACV,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,6DACG,SAAS,IAAI,uBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,GAAI,EACvD,QAAQ,EACR,OAAO,IAAI,uBAAC,OAAO,IAAC,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,GAAI,IACjD,CACJ,CAAC;IAEF,IAAI,MAAoB,CAAC;IAEzB,QAAQ,SAAS,CAAC,EAAE,EAAE,CAAC;QACrB,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,6DAA6D;YAC7D,MAAM,EAAE,EAAE,EAAE,GAAG,WAAW,EAAE,GAAG,SAAS,CAAC;YAEzC,MAAM,GAAG,CACP,iCAAO,WAAW,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,iBAAe,MAAM,YAC7E,OAAO,GACN,CACL,CAAC;YACF,MAAM;QACR,CAAC;QAED,KAAK,QAAQ,CAAC;QACd,OAAO,CAAC,CAAC,CAAC;YACR,6DAA6D;YAC7D,MAAM,EAAE,EAAE,EAAE,GAAG,WAAW,EAAE,GAAG,SAAS,CAAC;YAEzC,MAAM,GAAG,CACP,sCACM,WAAW,EACf,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,YAAY,EACvB,QAAQ,EAAE,QAAQ,iBACL,MAAM,YAElB,OAAO,GACD,CACV,CAAC;YACF,MAAM;QACR,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/dist/text-button/text-button.m.scss

@@ -0,0 +1,99 @@
+@use '../colors';
+@use '../utils';
+@use '../link/link-util';
+
+.root {
+  @include utils.reset-button;
+  @include utils.focus-visible;
+}
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  font-weight: 600;
+  white-space: nowrap;
+  background: transparent;
+  padding: 0;
+  border: 0;
+  // ВАЖНО: не надо указывать здесь сброс margin так как его сложно перебить при сборке стилей
+}
+
+.root,
+.root:link,
+.root:visited,
+.root:hover,
+.root:active {
+  cursor: default;
+  text-decoration: none;
+  border-bottom-color: transparent;
+  &.underline {
+    box-shadow: inset 0 -1px 0 0 currentColor;
+  }
+}
+
+.root:hover {
+  cursor: pointer;
+}
+
+.size-s {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.size-m {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.icon-gutter-4 {
+  --text-button-icon-gutter: 4px;
+}
+
+.icon-gutter-8 {
+  --text-button-icon-gutter: 8px;
+}
+
+// ниже двойные классы для высокой специфичности в монолите
+.root.disabled {
+  color: colors.$basic-gray24;
+  pointer-events: none;
+}
+
+.root:not(.disabled).color-basic-blue {
+  @include link-util.color('basic-blue');
+}
+
+.root:not(.disabled).color-basic-gray87 {
+  @include link-util.color('basic-gray87');
+}
+
+.root:not(.disabled).color-basic-gray38 {
+  @include link-util.color('basic-gray38');
+}
+
+.root:not(.disabled).color-basic-white {
+  @include link-util.color('basic-white');
+}
+
+.root:not(.disabled).color-additional-red {
+  @include link-util.color('additional-red');
+}
+
+.root:not(.disabled).color-additional-teal {
+  @include link-util.color('additional-teal');
+}
+
+// иконки
+.icon-start,
+.icon-end {
+  flex-shrink: 0;
+  fill: currentColor;
+}
+
+.icon-start {
+  margin-right: var(--text-button-icon-gutter);
+}
+
+.icon-end {
+  margin-left: var(--text-button-icon-gutter);
+}

package/dist/text-button/types.d.ts

@@ -0,0 +1,40 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, CSSProperties, ComponentType, Ref, SVGAttributes } from 'react';
+import type { LinkColor } from '../link';
+import type { WithTestId } from '../types';
+export type TextButtonSize = 's' | 'm';
+export type TextButtonColor = LinkColor;
+export interface TextButtonStyle extends CSSProperties {
+    '--text-button-icon-gutter'?: string;
+}
+interface CommonProps extends WithTestId {
+    /** Размер. */
+    size?: TextButtonSize | 'unset';
+    /** Цвет. */
+    color?: TextButtonColor | 'unset';
+    /** Иконка перед текстом. */
+    startIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
+    /** Иконка после текста. */
+    endIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
+    /** Ref для элемента button. Будет заполнен только при appearance: 'button'. */
+    buttonRef?: Ref<HTMLButtonElement>;
+    /** Ref для элемента a. Будет заполнен только при appearance: 'link'. */
+    anchorRef?: Ref<HTMLAnchorElement>;
+    /** Нужно ли выводить подчеркивание. */
+    underline?: boolean;
+    /** Отключенное состояние. */
+    disabled?: boolean;
+    /** Отступ от иконок. */
+    iconGutter?: 4 | 8 | 'unset';
+    /** Стили. */
+    style?: TextButtonStyle;
+}
+export type TextButtonAsButtonProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof CommonProps> & {
+    /** Какой элемент выводить в качестве текстовой кнопки. */
+    as?: 'button';
+};
+export type TextButtonAsAnchorProps = CommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CommonProps> & {
+    /** Какой элемент выводить в качестве текстовой кнопки. */
+    as: 'anchor';
+};
+export type TextButtonProps = TextButtonAsButtonProps | TextButtonAsAnchorProps;
+export {};

package/dist/text-button/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/text-button/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/text-button/types.ts"],"names":[],"mappings":""}

package/dist/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export type { TextareaProps } from './types';
+export { Textarea } from './textarea';

package/dist/textarea/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
+var textarea_1 = require("./textarea");
+Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return textarea_1.Textarea; } });
+//# sourceMappingURL=index.js.map

package/dist/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/textarea/index.ts"],"names":[],"mappings":";;;AACA,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA"}

package/dist/textarea/textarea.d.ts

@@ -0,0 +1,7 @@
+import type { TextareaProps } from './types';
+/**
+ * Текстовая область.
+ * @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): import("react/jsx-runtime").JSX.Element;

package/dist/textarea/textarea.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = Textarea;
+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_m_scss_1 = __importDefault(require("./textarea.m.scss"));
+const cx = bind_1.default.bind(textarea_m_scss_1.default);
+/**
+ * Текстовая область.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Textarea({ 
+// 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 = 2, value, 
+// FieldBlock props
+label, failed, caption, blockProps, 'data-testid': testId = 'textarea', ...restProps }) {
+    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?.onMouseDown);
+    (0, react_1.useImperativeHandle)(textareaRef, () => ref.current);
+    return ((0, jsx_runtime_1.jsx)(field_block_1.FieldBlock, { ...restProps, rootProps: {
+            ...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: {
+            ...blockProps,
+            onMouseDown: handleMouseDown,
+        }, main: (0, jsx_runtime_1.jsx)(base_input_1.BaseInput, { ...baseInputProps, textareaRef: ref, multiline: true, className: cx('textarea', baseInputProps?.className), style: {
+                '--base-input-placeholder-color': (0, utils_1.definePlaceholderColor)({ failed, disabled }),
+                ...baseInputProps?.style,
+            }, 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?.(event);
+                updateFilled(event);
+                setFocused(true);
+            }, onBlur: event => {
+                onBlur?.(event);
+                updateFilled(event);
+                setFocused(false);
+            }, onInput: event => {
+                onInput?.(event);
+                updateFilled(event);
+            }, onChange: event => {
+                onChange?.(event);
+                updateFilled(event);
+            } }), mainProps: { className: cx('main') } }));
+}
+//# sourceMappingURL=textarea.js.map

package/dist/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../src/textarea/textarea.tsx"],"names":[],"mappings":"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"}

package/dist/textarea/types.d.ts

@@ -0,0 +1,15 @@
+import type { Ref, TextareaHTMLAttributes } from 'react';
+import type { FieldBlockProps } from '../field-block';
+import type { BaseInputAsTextareaProps } from '../base-input';
+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?: Omit<BaseInputAsTextareaProps, 'multiline'>;
+    /** Стили корневого элемента. */
+    style?: Required<FieldBlockProps>['rootProps']['style'];
+    /** CSS-класс корневого элемента. */
+    className?: Required<FieldBlockProps>['rootProps']['className'];
+}
+export {};

package/dist/textarea/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/textarea/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/textarea/types.ts"],"names":[],"mappings":""}

package/dist/timer/index.d.ts

@@ -0,0 +1,2 @@
+export type { TimeDistance, TimerProps } from './types';
+export { Timer } from './timer';

package/dist/timer/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timer = void 0;
+var timer_1 = require("./timer");
+Object.defineProperty(exports, "Timer", { enumerable: true, get: function () { return timer_1.Timer; } });
+//# sourceMappingURL=index.js.map

package/dist/timer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/timer/index.ts"],"names":[],"mappings":";;;AACA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA"}

package/dist/timer/timer.d.ts

@@ -0,0 +1,7 @@
+import type { TimerProps } from './types';
+/**
+ * Таймер - выводит оставшееся время до заданной временной отметки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Timer({ date, format, timeout }: TimerProps): import("react/jsx-runtime").JSX.Element;

package/dist/timer/timer.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timer = Timer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+/**
+ * Таймер - выводит оставшееся время до заданной временной отметки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function 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) });
+}
+//# sourceMappingURL=timer.js.map

package/dist/timer/timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timer.js","sourceRoot":"","sources":["../../src/timer/timer.tsx"],"names":[],"mappings":";;AASA,sBAcC;;AAtBD,iCAA4C;AAC5C,mCAA2D;AAE3D;;;;GAIG;AACH,SAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,sBAAc,EAAE,OAAO,GAAG,IAAI,EAAc;IACjF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAA,wBAAgB,EAAC,IAAI,CAAC,CAAC,CAAC;IAEjE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;YAC/B,WAAW,CAAC,IAAA,wBAAgB,EAAC,IAAI,CAAC,CAAC,CAAC;QACtC,CAAC,EAAE,OAAO,CAAC,CAAC;QAEZ,WAAW,CAAC,IAAA,wBAAgB,EAAC,IAAI,CAAC,CAAC,CAAC;QAEpC,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,2DAAG,MAAM,CAAC,QAAQ,CAAC,GAAI,CAAC;AACjC,CAAC"}

package/dist/timer/types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export interface TimeDistance {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+export interface TimerProps {
+    /** Дата и время события. */
+    date: string;
+    /** Должна отформатировать данные об оставшемся времени для вывода. */
+    format?: (distance: TimeDistance) => ReactNode;
+    /** Частота обновления таймера в миллисекундах. */
+    timeout?: number;
+}

package/dist/timer/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/timer/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/timer/types.ts"],"names":[],"mappings":""}

package/dist/timer/utils.d.ts

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

package/dist/timer/utils.js

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

package/dist/timer/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/timer/utils.ts"],"names":[],"mappings":";;AAaA,wCAIC;AAOD,4CAmBC;AA1CD,kFAA+E;AAC/E,8CAA2C;AAC3C,8CAA2C;AAC3C,gDAA6C;AAE7C,MAAM,KAAK,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAC;AAE3D;;;;GAIG;AACH,SAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAgB;IAC5E,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,KAAK,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC/F,GAAG,CACJ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,gBAAgB,CAAC,UAAkB;IACjD,MAAM,IAAI,GAAG,IAAA,mBAAQ,EAAC,UAAU,CAAC,CAAC;IAElC,IAAI,MAAM,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IAE3D,IAAI,IAAA,iBAAO,EAAC,IAAI,CAAC,IAAI,CAAC,IAAA,iBAAO,EAAC,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC;QAChD,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACvD,QAAQ,CACN,IAAA,qDAAyB,EAAC,IAAI,EAAE;YAC9B,IAAI;YACJ,cAAc,EAAE,OAAO;SACxB,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,CACF,CAAC;QAEF,MAAM,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;IAC7C,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/dist/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export type { ToggleProps } from './types';
+export { Toggle } from './toggle';

package/dist/toggle/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+var toggle_1 = require("./toggle");
+Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return toggle_1.Toggle; } });
+//# sourceMappingURL=index.js.map

package/dist/toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toggle/index.ts"],"names":[],"mappings":";;;AACA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA"}

package/dist/toggle/toggle.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Тогл - элемент для управления полем с двумя состояниями - включено и отключено.
+ */
+export declare const Toggle: import("react").ForwardRefExoticComponent<import("../types").CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/toggle/toggle.js

@@ -0,0 +1,21 @@
+"use strict";
+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_m_scss_1 = __importDefault(require("./toggle.m.scss"));
+const cx = bind_1.default.bind(toggle_m_scss_1.default);
+/**
+ * Тогл - элемент для управления полем с двумя состояниями - включено и отключено.
+ */
+exports.Toggle = (0, react_1.forwardRef)(function Toggle({ className, style, 'data-testid': testId = 'toggle', 
+// input props
+...restProps }, ref) {
+    return ((0, jsx_runtime_1.jsxs)("label", { className: cx('root', className), style: style, children: [(0, jsx_runtime_1.jsx)("input", { ...restProps, className: cx('input'), ref: ref, type: 'checkbox', "data-testid": testId }), (0, jsx_runtime_1.jsx)("span", { className: cx('switch') })] }));
+});
+exports.Toggle.displayName = 'Toggle';
+//# sourceMappingURL=toggle.js.map

package/dist/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../src/toggle/toggle.tsx"],"names":[],"mappings":";;;;;;;AACA,iCAAmC;AACnC,2DAAyC;AACzC,oEAAqC;AAErC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,uBAAM,CAAC,CAAC;AAEnC;;GAEG;AACU,QAAA,MAAM,GAAG,IAAA,kBAAU,EAAgC,SAAS,MAAM,CAC7E,EACE,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GAAG,QAAQ;AAEhC,cAAc;AACd,GAAG,SAAS,EACb,EACD,GAAG;IAEH,OAAO,CACL,mCAAO,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,aACnD,qCACM,SAAS,EACb,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,EACtB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,iBACF,MAAM,GACnB,EACF,iCAAM,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAI,IAC3B,CACT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}