@alfalab/core-components 42.10.0 → 42.12.0

package/universal-date-input/cssm/mask/utils.js

@@ -0,0 +1,314 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var clamp = require('date-fns/clamp');
+var getDaysInMonth = require('date-fns/getDaysInMonth');
+var consts = require('../consts.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var clamp__default = /*#__PURE__*/_interopDefaultCompat(clamp);
+var getDaysInMonth__default = /*#__PURE__*/_interopDefaultCompat(getDaysInMonth);
+
+function fillMask(len) {
+    return Array(len).fill(/\d/);
+}
+function isDigit(v) {
+    return /\d/.test(v);
+}
+/**
+ *  Делит строку на сегменты по разделителям.
+ *  01.01.2020, 00:00 -> ['01', '01', '2020', '00', '00']
+ */
+function getValueSegments(rawValue, separators) {
+    var separatorCursor = 0;
+    var prevSepIdx = 0;
+    var segments = [];
+    var value = prepareValueForSegmentation(rawValue);
+    while (separatorCursor <= separators.length) {
+        var sepIdx = value.indexOf(separators[separatorCursor], prevSepIdx);
+        if (sepIdx > -1) {
+            segments.push(value.slice(prevSepIdx, sepIdx));
+            prevSepIdx = sepIdx + separators[separatorCursor].length;
+            separatorCursor += 1;
+        }
+        else {
+            var restValue = value.slice(prevSepIdx);
+            if (restValue) {
+                segments.push(restValue);
+            }
+            break;
+        }
+    }
+    return segments;
+}
+/**
+ *  Корректирует значение, если попытались ввести символ внутрь сепаратора.
+ *  Например, 01.01.2020 1- 01.01.2022
+ */
+function prepareValueForSegmentation(value) {
+    if (value.indexOf(' ') !== -1) {
+        if (value.indexOf(consts.DATE_RANGE_SEPARATOR) === -1 &&
+            value.indexOf(consts.DATE_RANGE_SEPARATOR.trim()) !== -1) {
+            return value
+                .replace(/\s/g, '')
+                .split(consts.DATE_RANGE_SEPARATOR.trim())
+                .join(consts.DATE_RANGE_SEPARATOR);
+        }
+        if (value.indexOf(consts.DATE_TIME_SEPARATOR) === -1 &&
+            value.indexOf(consts.DATE_TIME_SEPARATOR.trim()) !== -1) {
+            return value
+                .replace(/\s/g, '')
+                .split(consts.DATE_TIME_SEPARATOR.trim())
+                .join(consts.DATE_TIME_SEPARATOR);
+        }
+    }
+    return value;
+}
+/**
+ *  Переносит лишнее значение сегмента в начало следующего.
+ *  Например, ['00', '000', '1'] -> ['00', '00', '01']
+ */
+function shiftSegmentsData(rawSegments, templateSegments) {
+    var segments = tslib.__spreadArray([], rawSegments, true);
+    templateSegments.forEach(function (item, idx, arr) {
+        var _a;
+        var isLast = idx === arr.length - 1;
+        var currSegment = segments[idx];
+        if (currSegment && item.length < currSegment.length) {
+            var segmentValue = currSegment.slice(0, item.length);
+            var restValue = currSegment.slice(item.length);
+            segments[idx] = segmentValue;
+            if (!isLast) {
+                segments[idx + 1] = restValue + ((_a = segments[idx + 1]) !== null && _a !== void 0 ? _a : '');
+            }
+        }
+    });
+    return segments;
+}
+/**
+ *  Заменяет значение сегмента, в котором стоит каретка.
+ *  Например, data:1, selection: [0.0], segments: ['00', '000', '1'] -> ['10', '00', '1']
+ */
+function replaceSegmentsData(rawSegments, template, selection, data) {
+    var segments = tslib.__spreadArray([], rawSegments, true);
+    var cursorPos = findCursorPlace(rawSegments, template.segments, template.separators, selection);
+    template.segments.forEach(function (templateSegment, idx, arr) {
+        var _a;
+        var isLast = idx === arr.length - 1;
+        var segment = segments[idx];
+        if (segment && templateSegment.length < segment.length) {
+            var segmentIdx = (cursorPos === null || cursorPos === void 0 ? void 0 : cursorPos.beforeNext)
+                ? cursorPos.segmentIdx + 1
+                : cursorPos === null || cursorPos === void 0 ? void 0 : cursorPos.segmentIdx;
+            var offset = (cursorPos === null || cursorPos === void 0 ? void 0 : cursorPos.beforeNext) ? 0 : cursorPos === null || cursorPos === void 0 ? void 0 : cursorPos.offset;
+            if (segmentIdx === idx && offset !== undefined) {
+                var overflowLen = segment.length - templateSegment.length;
+                segments[idx] = (segment.slice(0, offset) +
+                    data +
+                    segment.slice(offset + overflowLen + data.length)).slice(0, templateSegment.length);
+            }
+            else {
+                segments[idx] = segment.slice(0, templateSegment.length);
+                if (!isLast && data) {
+                    var restValue = segment.slice(templateSegment.length);
+                    segments[idx + 1] = restValue + ((_a = segments[idx + 1]) !== null && _a !== void 0 ? _a : '');
+                }
+            }
+        }
+    });
+    return segments;
+}
+/**
+ * Возвращает информацию о каретке(сегмент, сдвиг внутри сегмента)
+ */
+function findCursorPlace(segments, templateSegments, separators, selection) {
+    var _a;
+    var cursorPlace;
+    var segmentIdx = 0;
+    var posStart = 0;
+    while (segments[segmentIdx] !== undefined) {
+        var segment = segments[segmentIdx];
+        var separatorLen = ((_a = separators[segmentIdx]) === null || _a === void 0 ? void 0 : _a.length) || 1;
+        var bound = [posStart, segment.length + posStart + separatorLen];
+        if (selection[0] >= bound[0] && selection[1] < bound[1]) {
+            var offset = selection[0] - bound[0];
+            cursorPlace = {
+                segmentIdx: segmentIdx,
+                offset: offset,
+                beforeNext: offset >= templateSegments[segmentIdx].length,
+            };
+            break;
+        }
+        else {
+            posStart += segment.length + separatorLen;
+            segmentIdx += 1;
+        }
+    }
+    return cursorPlace;
+}
+/**
+ * Возвращает маску по сегментам
+ * segments: ['00', '12'], separators: ['.', '.'] -> [/\d/, /\d/, '.', /\d/, /\d/]
+ */
+function segmentsToPattern(segments, separators) {
+    return segments.reduce(function (mask, segment, idx) {
+        var hasNextSegment = segments[idx + 1] !== undefined;
+        var segmentsLen = segment.length;
+        if (idx > 0 && (segment.length || hasNextSegment)) {
+            mask.push.apply(mask, separators[idx - 1].split(''));
+        }
+        mask.push.apply(mask, fillMask(segmentsLen));
+        return mask;
+    }, []);
+}
+/**
+ * Склеивает сегменты в строку
+ * segments:['00', '00'], separators: ['.', '.'] -> 00.00
+ */
+function segmentsToString(segments, separators) {
+    var str = segments
+        .map(function (p, idx) {
+        var isLast = idx === segments.length - 1;
+        return "".concat(p).concat(separators[idx] && !isLast ? separators[idx] : '');
+    })
+        .join('');
+    return removeSeparatorsFromTail(str);
+}
+/**
+ *  Удаляет разделители с конца строки.
+ *  01.12. -> 01.12
+ */
+function removeSeparatorsFromTail(str) {
+    var strLen = str.length;
+    while (strLen > 0 && /\W/.test(str[strLen - 1])) {
+        strLen -= 1;
+    }
+    return str.slice(0, strLen);
+}
+/**
+ *  Возвращает кол-во разделителей в начале строки.
+ *  countSeparatorsFromHead('..2024') -> 2
+ */
+function countSeparatorsFromHead(str, startFrom) {
+    if (startFrom === void 0) { startFrom = 0; }
+    var cursor = startFrom;
+    while (str[cursor] && /\W/.test(str[cursor])) {
+        cursor += 1;
+    }
+    return cursor - startFrom;
+}
+/**
+ *  Валидация сегментов.
+ *  9.9 -> 09.09
+ */
+function validateSegments(_a) {
+    var dateTemplate = _a.dateTemplate, templateSegments = _a.templateSegments, segments = _a.segments, _b = _a.selection, from = _b[0], to = _b[1], min = _a.min, max = _a.max;
+    var parsedDate = segmentsToObj(segments, templateSegments);
+    var dateSegments = Object.entries(parsedDate);
+    var validatedDateSegments = {};
+    var paddedZeroes = 0;
+    dateSegments.forEach(function (_a) {
+        var segmentName = _a[0], _b = _a[1], segmentValue = _b === void 0 ? '' : _b;
+        var maxSegmentValue = consts.DATE_MAX_VALUES[segmentName];
+        var _c = padWithZeroesUntilValid(segmentValue, "".concat(maxSegmentValue)), validatedSegmentValue = _c.validatedSegmentValue, prefixedZeroesCount = _c.prefixedZeroesCount;
+        paddedZeroes += prefixedZeroesCount;
+        validatedDateSegments[segmentName] = validatedSegmentValue;
+    });
+    minMaxValidation(validatedDateSegments, min, max);
+    var validatedDateString = toDateString(validatedDateSegments, dateTemplate);
+    return {
+        validatedDateString: validatedDateString,
+        updatedSelection: [from + paddedZeroes, to + paddedZeroes],
+    };
+}
+/**
+ *  Валидация сегментов с учетом границ min, max.
+ *  35.02 -> 29.02, 01.01.0001 -> 01.01.1900
+ */
+function minMaxValidation(segments, min, max) {
+    var _a, _b, _c;
+    var dayFilled = ((_a = segments.day) === null || _a === void 0 ? void 0 : _a.length) === 2;
+    var monthFilled = ((_b = segments.month) === null || _b === void 0 ? void 0 : _b.length) === 2;
+    var yearFilled = ((_c = segments.year) === null || _c === void 0 ? void 0 : _c.length) === 4;
+    if (dayFilled && segments.day === '00')
+        segments.day = '01';
+    if (monthFilled && segments.month === '00')
+        segments.month = '01';
+    if (yearFilled && Number(segments.year) < min.getFullYear()) {
+        segments.year = min.getFullYear().toString();
+    }
+    if (dayFilled && monthFilled) {
+        // Если не введен год, берем 2000-й високосный год, иначе 29.02 невозможно будет указать
+        var filledYear = yearFilled ? segments.year : '2000';
+        var maxDays = getDaysInMonth__default.default(new Date("".concat(filledYear, "-").concat(segments.month, "-01")));
+        if (Number(segments.day) > maxDays) {
+            segments.day = maxDays.toString();
+        }
+    }
+    if (dayFilled && monthFilled && yearFilled) {
+        var date = clamp__default.default(new Date("".concat(segments.year, "-").concat(segments.month, "-").concat(segments.day)), {
+            start: min,
+            end: max,
+        });
+        segments.day = date.getDate().toString().padStart(2, '0');
+        segments.month = (date.getMonth() + 1).toString().padStart(2, '0');
+        segments.year = date.getFullYear().toString();
+    }
+}
+function padWithZeroesUntilValid(segmentValue, paddedMaxValue, prefixedZeroesCount) {
+    if (prefixedZeroesCount === void 0) { prefixedZeroesCount = 0; }
+    if (Number(segmentValue.padEnd(paddedMaxValue.length, '0')) <= Number(paddedMaxValue)) {
+        return { validatedSegmentValue: segmentValue, prefixedZeroesCount: prefixedZeroesCount };
+    }
+    if (segmentValue.endsWith('0')) {
+        // 01.90 => 01.09|
+        return padWithZeroesUntilValid("0".concat(segmentValue.slice(0, paddedMaxValue.length - 1)), paddedMaxValue, prefixedZeroesCount + 1);
+    }
+    if (segmentValue.length < paddedMaxValue.length) {
+        // 01| => Type 9 => 01.90|
+        return padWithZeroesUntilValid("".concat(segmentValue.slice(0, paddedMaxValue.length - 1), "0"), paddedMaxValue, prefixedZeroesCount);
+    }
+    // 01.1|=> Type 9 => 01.12|
+    return { validatedSegmentValue: paddedMaxValue, prefixedZeroesCount: prefixedZeroesCount };
+}
+/**
+ *  Превращает объект с сегментами в строку
+ */
+function toDateString(_a, dateTemplate) {
+    var day = _a.day, month = _a.month, year = _a.year, hours = _a.hours, minutes = _a.minutes;
+    return dateTemplate
+        .replace(/d+/g, day !== null && day !== void 0 ? day : '')
+        .replace(/MM+/g, month !== null && month !== void 0 ? month : '')
+        .replace(/y+/g, year !== null && year !== void 0 ? year : '')
+        .replace(/H+/g, hours !== null && hours !== void 0 ? hours : '')
+        .replace(/m+/g, minutes !== null && minutes !== void 0 ? minutes : '');
+}
+function parseDateRangeString(dateRange, maxLen) {
+    return dateRange.split(consts.DATE_RANGE_SEPARATOR).map(function (date) { return date.slice(0, maxLen); });
+}
+function segmentsToObj(segments, templateSegments) {
+    return {
+        day: segments[templateSegments.indexOf('dd')],
+        month: segments[templateSegments.indexOf('MM')],
+        year: segments[templateSegments.indexOf('yyyy')],
+        hours: segments[templateSegments.indexOf('HH')],
+        minutes: segments[templateSegments.indexOf('mm')],
+    };
+}
+
+exports.countSeparatorsFromHead = countSeparatorsFromHead;
+exports.findCursorPlace = findCursorPlace;
+exports.getValueSegments = getValueSegments;
+exports.isDigit = isDigit;
+exports.minMaxValidation = minMaxValidation;
+exports.padWithZeroesUntilValid = padWithZeroesUntilValid;
+exports.parseDateRangeString = parseDateRangeString;
+exports.removeSeparatorsFromTail = removeSeparatorsFromTail;
+exports.replaceSegmentsData = replaceSegmentsData;
+exports.segmentsToObj = segmentsToObj;
+exports.segmentsToPattern = segmentsToPattern;
+exports.segmentsToString = segmentsToString;
+exports.shiftSegmentsData = shiftSegmentsData;
+exports.toDateString = toDateString;
+exports.validateSegments = validateSegments;

package/universal-date-input/cssm/mobile.d.ts

@@ -0,0 +1,2 @@
+export { UniversalDateInputMobile } from "./Component.mobile";
+export type { UniversalDateInputMobileProps } from "./types";

package/universal-date-input/cssm/mobile.js

@@ -0,0 +1,38 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_mobile = require('./Component.mobile.js');
+require('tslib');
+require('react');
+require('./components/base-universal-date-input/Component.js');
+require('react-merge-refs');
+require('@maskito/react');
+require('classnames');
+require('date-fns/endOfDay');
+require('date-fns/startOfDay');
+require('./consts.js');
+require('./mask/index.js');
+require('./mask/plugins.js');
+require('./mask/utils.js');
+require('date-fns/clamp');
+require('date-fns/getDaysInMonth');
+require('./mask/postprocessors.js');
+require('./mask/preprocessors.js');
+require('date-fns/isValid');
+require('./utils/index.js');
+require('date-fns/differenceInDays');
+require('date-fns/format');
+require('date-fns/isSameDay');
+require('date-fns/parse');
+require('./components/date-input/Component.js');
+require('../../input/cssm');
+require('../../popover/cssm');
+require('../../shared/cssm');
+require('@alfalab/icons-glyph/CalendarMIcon');
+require('./index.module.css');
+require('./components/date-range-input/Component.js');
+require('date-fns/startOfMonth');
+require('./components/time-input/Component.js');
+
+
+
+exports.UniversalDateInputMobile = Component_mobile.UniversalDateInputMobile;

package/universal-date-input/cssm/types-1b036d4b.d.ts

@@ -0,0 +1,13 @@
+type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
+type WidthUnit = number | string;
+type TextSkeletonProps = {
+    /**
+     *  Кол-во строк текста
+     */
+    rows?: number;
+    /**
+     * Ширина строки
+     */
+    width?: WidthUnit | WidthUnit[];
+};
+export { TextElementType, TextSkeletonProps };

package/universal-date-input/cssm/types.d.ts

@@ -0,0 +1,171 @@
+import { ChangeEvent, FocusEvent, ForwardRefExoticComponent, KeyboardEvent, MouseEvent, PropsWithoutRef, RefAttributes, RefObject } from 'react';
+import { CalendarProps } from "./index-5712fce2";
+import { InputProps } from "../../input";
+import { PopoverProps } from "../../popover";
+type View = 'date' | 'date-time' | 'date-range' | 'time';
+type DateTemplate = {
+    segments: string[];
+    separators: string[];
+};
+type DateSegments<T = string> = {
+    day: T;
+    month: T;
+    year: T;
+    hours: T;
+    minutes: T;
+};
+interface BaseUniversalDateInputProps extends Omit<InputProps, 'onChange'> {
+    /**
+     * Автоматическое исправление ввода
+     *  @default true
+     */
+    autoCorrection?: boolean;
+    /**
+     *  Значение инпута
+     */
+    value?: string;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Вид компонента
+     */
+    view: View;
+    /**
+     * Мобильный или десктопный вид компонента
+     */
+    platform: 'desktop' | 'mobile';
+    /**
+     * Открыть календарь при клике
+     */
+    picker?: boolean;
+    /**
+     *  Компонент календаря
+     */
+    Calendar?: ForwardRefExoticComponent<PropsWithoutRef<CalendarProps> & RefAttributes<HTMLDivElement>>;
+    /**
+     *  Пропсы календаря
+     */
+    calendarProps?: Omit<CalendarProps, 'open' | 'minDate' | 'maxDate' | 'onClose'>;
+    /**
+     * Пропсы поповера
+     */
+    popoverProps?: PopoverProps;
+    /**
+     *  Обработчик открытия календаря
+     */
+    onCalendarOpen?: () => void;
+    /**
+     *  Обработчик закрытия календаря
+     */
+    onCalendarClose?: () => void;
+    /**
+     * Обработчик клика на иконку календаря
+     */
+    onPickerClick?: (event: MouseEvent) => void;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
+        value: string;
+    }) => void;
+}
+interface InnerDateInputProps extends Omit<BaseUniversalDateInputProps, 'view'> {
+    /**
+     * Флаг, открыт ли календарь
+     */
+    open: boolean;
+    /**
+     * Дополнительный класс обертки
+     */
+    wrapperClassName?: string;
+    /**
+     * Дата со временем
+     */
+    withTime?: boolean;
+    /**
+     * Реф календаря
+     */
+    calendarRef: RefObject<HTMLDivElement>;
+    /**
+     * Обработчики на враппер
+     */
+    wrapperHandlers?: {
+        onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+        onFocus?: (e: FocusEvent<HTMLDivElement>) => void;
+        onBlur: (e: FocusEvent<HTMLDivElement>) => void;
+        onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
+    };
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (value: string, date: Date) => void;
+}
+interface InnerDateRangeInputProps extends Omit<InnerDateInputProps, 'onComplete'> {
+    /**
+     * Тип выбора границ в календаре
+     * @default clarification
+     */
+    rangeBehavior?: 'clarification' | 'reset';
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (value: string, dateFrom: Date, dateTo: Date) => void;
+}
+interface InnerTimeInputProps extends Omit<InputProps, 'onChange'> {
+    /**
+     * Автоматическое исправление ввода
+     *  @default true
+     */
+    autoCorrection?: BaseUniversalDateInputProps['autoCorrection'];
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: BaseUniversalDateInputProps['onChange'];
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (value: string) => void;
+}
+type PrivateProps = 'platform' | 'withTime' | 'open' | 'calendarRef' | 'wrapperHandlers' | 'onPickerClick';
+type Never<T> = {
+    [P in keyof T]?: never;
+};
+type WithPickerRequiredProps = Required<Pick<BaseUniversalDateInputProps, 'Calendar'>>;
+type WithPickerNotRequiredProps = Pick<BaseUniversalDateInputProps, 'calendarProps' | 'popoverProps' | 'onCalendarOpen' | 'onCalendarClose'>;
+type WithPickerProps = WithPickerRequiredProps & WithPickerNotRequiredProps;
+type NoPickerProps = Never<WithPickerRequiredProps> & Never<WithPickerProps>;
+type UniversalDateInputConditionalProps = ({
+    view: 'date';
+    picker: true;
+} & WithPickerProps & Pick<InnerDateInputProps, 'onComplete' | 'wrapperClassName'>) | ({
+    view: 'date';
+    picker?: false;
+} & NoPickerProps & Pick<InnerDateInputProps, 'onComplete' | 'wrapperClassName'>) | ({
+    view: 'date-time';
+    picker: true;
+} & WithPickerProps & Pick<InnerDateInputProps, 'onComplete' | 'wrapperClassName'>) | ({
+    view: 'date-time';
+    picker?: false;
+} & NoPickerProps & Pick<InnerDateInputProps, 'onComplete' | 'wrapperClassName'>) | ({
+    view: 'date-range';
+    picker: true;
+} & WithPickerProps & Pick<InnerDateRangeInputProps, 'onComplete' | 'wrapperClassName' | 'rangeBehavior'>) | ({
+    view: 'date-range';
+    picker?: false;
+} & NoPickerProps & Pick<InnerDateRangeInputProps, 'onComplete' | 'wrapperClassName'>) | ({
+    view: 'time';
+    picker?: never;
+    minDate?: never;
+    maxDate?: never;
+    Calendar?: never;
+} & Pick<InnerTimeInputProps, 'onComplete'>);
+type UniversalDateInputProps = Omit<BaseUniversalDateInputProps, PrivateProps | keyof WithPickerProps> & UniversalDateInputConditionalProps;
+type UniversalDateInputMobileProps = Omit<UniversalDateInputProps, 'breakpoint' | 'defaultMatchMediaValue'> & UniversalDateInputConditionalProps;
+type UniversalDateInputDesktopProps = Omit<UniversalDateInputProps, 'breakpoint' | 'defaultMatchMediaValue'> & UniversalDateInputConditionalProps;
+export { View, DateTemplate, DateSegments, BaseUniversalDateInputProps, InnerDateInputProps, InnerDateRangeInputProps, InnerTimeInputProps, UniversalDateInputConditionalProps, UniversalDateInputProps, UniversalDateInputMobileProps, UniversalDateInputDesktopProps };

package/universal-date-input/cssm/types.js

@@ -0,0 +1 @@
+

package/universal-date-input/cssm/typings-5684a67d.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+type SpecialDays = Record<number, boolean>;
+type DayAddons = {
+    date: Date | number;
+    addon: ReactNode;
+};
+type SpecialDaysAddon = Record<number, ReactNode>;
+type Day = {
+    date: Date;
+    disabled?: boolean;
+    event?: boolean;
+    selected?: boolean;
+    holiday?: boolean;
+    dayAddon?: ReactNode;
+};
+type Month = {
+    date: Date;
+    disabled?: boolean;
+};
+type DateShift = 'prev' | 'prevWeek' | 'prevMonth' | 'startOfWeek' | 'next' | 'nextWeek' | 'nextMonth' | 'endOfWeek';
+type View = 'years' | 'months' | 'days';
+type SelectorView = 'month-only' | 'full';
+export { SpecialDays, DayAddons, SpecialDaysAddon, Day, Month, DateShift, View, SelectorView };

package/universal-date-input/cssm/typings-89f0cb07.d.ts

@@ -0,0 +1,93 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+type PrivateButtonProps = {
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type CommonButtonProps = ComponentProps & Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
+type ButtonProps = CommonButtonProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, PrivateButtonProps, CommonButtonProps, ButtonProps };