@sima-land/ui-nucleons 45.0.0-alpha.7 → 45.0.0-alpha.71

package/text-button/text-button.module.scss

@@ -1,96 +0,0 @@
-@use '../colors';
-@use '../utils';
-@use '../link/link-util';
-
-.root {
-  @include utils.reset-button;
-  @include utils.focus-visible;
-  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/text-field/index.d.ts

@@ -1,69 +0,0 @@
-/// <reference types="react" />
-import { BaseInputProps } from '../base-input-deprecated';
-import { SmallRounds } from '../styling/shapes';
-type Variant = 'desktop' | 'mobile';
-export type DesktopSize = 'xs' | 's' | 'l';
-type Classes = {
-    root?: string;
-    baseInput?: string;
-    blockFocused?: string;
-};
-type IgnoredInputProps = 'size' | 'onClick' | 'onInput' | 'onChange' | 'onKeyDown' | 'onKeyUp' | 'onSelect';
-export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, IgnoredInputProps> {
-    /** Ярлык. */
-    label?: string;
-    /** Свойства BaseInput. */
-    baseInputProps?: BaseInputProps;
-    /** Подпись снизу. */
-    caption?: React.ReactNode;
-    /** CSS-классы. */
-    classes?: Classes;
-    /** Дополнительная верстка после текста. */
-    endAdornment?: React.ReactNode;
-    /** Показывать ли поле как ошибочное. */
-    failed?: boolean;
-    /** Показывать ли поле как сфокусированное (влияет только на оформление). */
-    focused?: boolean;
-    /** Нужно ли выводить textarea вместо input. */
-    multiline?: boolean;
-    /** Сработает при изменении значения. */
-    onChange?: BaseInputProps['onChange'];
-    /** Сработает при клике. */
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    /** Сработает при событии "input". */
-    onInput?: BaseInputProps['onInput'];
-    /** Сработает при событии "keydown". */
-    onKeyDown?: BaseInputProps['onKeyDown'];
-    /** Сработает при событии "keyup". */
-    onKeyUp?: BaseInputProps['onKeyUp'];
-    /** Placeholder, который выводится после введенного значения. */
-    restPlaceholder?: BaseInputProps['restPlaceholder'];
-    /** Задает скругления. */
-    rounds?: 'none' | keyof typeof SmallRounds;
-    /** Размеры поля для variant = "desktop". */
-    size?: DesktopSize;
-    /** Дополнительная верстка до текста. */
-    startAdornment?: React.ReactNode;
-    /** Вариант отображения. */
-    variant?: Variant;
-    /** Свойства элемента-блока. */
-    blockProps?: Omit<React.HTMLProps<HTMLDivElement>, 'onClick'>;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-export declare const HEIGHTS: {
-    readonly xs: 32;
-    readonly s: 40;
-    readonly l: 56;
-};
-export declare const DEFAULTS: {
-    readonly size: "xs" | "s" | "l";
-};
-/**
- * Компонент текстового поля.
- * @deprecated На адаптивных страницах следует использовать Input или Textarea.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement | undefined>>;
-export {};

package/text-field/index.js

@@ -1,79 +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", { "data-testid": dataTestId, className: cx('root', className, classes.root), style: style, children: [(0, jsx_runtime_1.jsxs)("div", { ...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, { display: 'flex', alignItems: 'center', marginRight: 4, children: startAdornment })), (0, jsx_runtime_1.jsxs)("div", { 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", { className: cx('input-wrapper'), children: (0, jsx_runtime_1.jsx)(base_input_deprecated_1.BaseInput, { ...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, { 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 }))] }));
-});
-//# sourceMappingURL=index.js.map

package/text-field/index.js.map

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

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,61 +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.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({ 
-// 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', ...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 === 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, { ...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 === null || baseInputProps === void 0 ? void 0 : baseInputProps.className), style: {
-                ...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;
-//# sourceMappingURL=index.js.map

package/textarea/index.js.map

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

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,24 +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;
-//# sourceMappingURL=index.js.map

package/timer/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/timer/index.tsx"],"names":[],"mappings":";;;;AAAA,iCAA4C;AAE5C,mCAA2D;AAa3D;;;;GAIG;AACI,MAAM,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,sBAAc,EAAE,OAAO,GAAG,IAAI,EAAc,EAAE,EAAE;IACrF,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,CAAC;AAdW,QAAA,KAAK,SAchB"}

package/timer/types.d.ts

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

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,37 +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;
-//# sourceMappingURL=utils.js.map