@alfalab/core-components 47.15.0-beta.0 → 47.15.0

package/custom-button/moderncssm/index.module.css

@@ -0,0 +1,94 @@
+/* */
+
+.customButton {
+    overflow: hidden;
+    position: relative
+}
+
+.customButton.border {
+        border: 0;
+    }
+
+.customButton.white * {
+        color: var(--color-light-text-primary-inverted);
+    }
+
+.customButton.black * {
+        color: var(--color-light-text-primary);
+    }
+
+.customButton.static-white * {
+        color: var(--color-static-text-primary-inverted);
+    }
+
+.customButton.static-black * {
+        color: var(--color-static-text-primary);
+    }
+
+.customButton span {
+        position: relative;
+        z-index: 3;
+    }
+
+.customButton:before {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0);
+        content: '';
+        transition: 0.2s;
+        opacity: 1;
+        pointer-events: none;
+    }
+
+.customButton.darkening:hover:before {
+            background-color: var(--color-light-neutral-translucent-200);
+        }
+
+.customButton.darkening:active:before {
+            background-color: var(--color-light-neutral-translucent-400);
+        }
+
+.customButton.lightening:hover:before {
+            background-color: var(--color-light-neutral-translucent-200-inverted);
+        }
+
+.customButton.lightening:active:before {
+            background-color: var(--color-light-neutral-translucent-400-inverted);
+        }
+
+.customButton.static-darkening:hover:before {
+            background-color: rgba(0, 0, 0, 0.07);
+        }
+
+.customButton.static-darkening:active:before {
+            background-color: rgba(0, 0, 0, 0.15);
+        }
+
+.customButton.static-lightening:hover:before {
+            background-color: rgba(255, 255, 255, 0.07);
+        }
+
+.customButton.static-lightening:active:before {
+            background-color: rgba(255, 255, 255, 0.15);
+        }
+
+/* Disabled */
+
+.customButton:disabled {
+    opacity: 0.3
+}
+
+.customButton:disabled.customLoading {
+        opacity: 1;
+    }
+
+.customButton:disabled.white * {
+        color: var(--color-static-text-primary-inverted);
+    }
+
+.customButton:disabled.black * {
+        color: var(--color-static-text-primary);
+    }

package/custom-picker-button/moderncssm/Component.responsive.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import React from 'react';
+import { CustomButtonProps } from "../../custom-button";
+import { AdditionalMobileProps, BottomSheetSelectMobileProps } from "../../select/shared";
+import { CustomPickerButtonDesktopProps } from "./desktop/index";
+type CustomPickerButtonResponsiveProps = CustomPickerButtonDesktopProps & AdditionalMobileProps & BottomSheetSelectMobileProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const CustomPickerButtonResponsive: React.ForwardRefExoticComponent<Omit<import("../../picker-button/desktop").PickerButtonDesktopProps, "view" | "colors"> & Pick<CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & AdditionalMobileProps & BottomSheetSelectMobileProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { CustomPickerButtonResponsiveProps, CustomPickerButtonResponsive };

package/custom-picker-button/moderncssm/Component.responsive.js

@@ -0,0 +1,20 @@
+import React, { forwardRef } from 'react';
+import { useMatchMedia } from '../../mq/moderncssm';
+import { CustomPickerButtonDesktop } from './desktop/Component.desktop.js';
+import { CustomPickerButtonMobile } from './mobile/Component.mobile.js';
+import '../../picker-button/moderncssm/desktop';
+import './field/Component.js';
+import 'classnames';
+import '../../custom-button/moderncssm';
+import '../../picker-button/moderncssm/shared';
+import './field/index.module.css';
+import '../../picker-button/moderncssm/mobile';
+
+const CustomPickerButtonResponsive = forwardRef(({ OptionsList, onScroll, footer, swipeable, bottomSheetProps, breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
+    const query = `(min-width: ${breakpoint}px)`;
+    const [isDesktop] = useMatchMedia(query, defaultMatchMediaValue);
+    return isDesktop ? (React.createElement(CustomPickerButtonDesktop, { ref: ref, OptionsList: OptionsList, onScroll: onScroll, ...restProps })) : (React.createElement(CustomPickerButtonMobile, { ref: ref, footer: footer, swipeable: swipeable, bottomSheetProps: bottomSheetProps, ...restProps }));
+});
+CustomPickerButtonResponsive.displayName = 'CustomPickerButtonResponsive';
+
+export { CustomPickerButtonResponsive };

package/custom-picker-button/moderncssm/desktop/Component.desktop.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import React from 'react';
+import { CustomButtonProps } from "../../../custom-button";
+import { PickerButtonDesktopProps } from "../../../picker-button/desktop";
+type CustomPickerButtonDesktopProps = Omit<PickerButtonDesktopProps, 'view' | 'colors'> & Pick<CustomButtonProps, 'backgroundColor' | 'contentColor' | 'stateType'>;
+declare const CustomPickerButtonDesktop: React.ForwardRefExoticComponent<Omit<PickerButtonDesktopProps, "view" | "colors"> & Pick<CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & React.RefAttributes<HTMLInputElement>>;
+export { CustomPickerButtonDesktopProps, CustomPickerButtonDesktop };

package/custom-picker-button/moderncssm/desktop/Component.desktop.js

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import { PickerButtonDesktop } from '../../../picker-button/moderncssm/desktop';
+import { Field } from '../field/Component.js';
+import 'classnames';
+import '../../../custom-button/moderncssm';
+import '../../../picker-button/moderncssm/shared';
+import '../field/index.module.css';
+
+const DEFAULT_BUTTON_COLOR = '#FF45C3';
+const DEFAULT_CONTENT_COLOR = 'white';
+const CustomPickerButtonDesktop = forwardRef(({ backgroundColor = DEFAULT_BUTTON_COLOR, contentColor = DEFAULT_CONTENT_COLOR, stateType = 'darkening', icon, ...restProps }, ref) => (React.createElement(PickerButtonDesktop, { ...restProps, fieldProps: {
+        backgroundColor,
+        contentColor,
+        stateType,
+        breakpoint: 1,
+        icon,
+    }, Field: Field, ref: ref })));
+
+export { CustomPickerButtonDesktop };

package/custom-picker-button/moderncssm/desktop/index.d.ts

@@ -0,0 +1,2 @@
+export { CustomPickerButtonDesktop, CustomPickerButtonDesktopProps } from "./Component.desktop";
+export {};

package/custom-picker-button/moderncssm/desktop/index.js

@@ -0,0 +1,8 @@
+export { CustomPickerButtonDesktop } from './Component.desktop.js';
+import 'react';
+import '../../../picker-button/moderncssm/desktop';
+import '../field/Component.js';
+import 'classnames';
+import '../../../custom-button/moderncssm';
+import '../../../picker-button/moderncssm/shared';
+import '../field/index.module.css';

package/custom-picker-button/moderncssm/field/Component.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import React from 'react';
+import { ComponentType, SVGProps } from "react";
+import { CustomButtonProps } from "../../../custom-button";
+import { PickerButtonSize, PickerButtonVariant } from "../../../picker-button/shared";
+import { FieldProps as BaseFieldProps } from "../../../select/shared";
+type FieldProps = Pick<BaseFieldProps, 'open' | 'label' | 'innerProps'> & CustomButtonProps & {
+    buttonSize?: PickerButtonSize;
+    buttonVariant?: PickerButtonVariant;
+    showArrow?: boolean;
+    icon?: ComponentType<SVGProps<SVGSVGElement>>;
+};
+declare const Field: ({ buttonSize, buttonVariant, backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow, icon, ...restProps }: FieldProps) => React.JSX.Element;
+export { Field };

package/custom-picker-button/moderncssm/field/Component.js

@@ -0,0 +1,35 @@
+import React, { Fragment } from 'react';
+import cn from 'classnames';
+import { CustomButton } from '../../../custom-button/moderncssm';
+import { getIcon } from '../../../picker-button/moderncssm/shared';
+import styles from './index.module.css';
+
+const SIZE_TO_CLASSNAME_MAP = {
+    xxs: 'size-32',
+    xs: 'size-40',
+    s: 'size-48',
+    m: 'size-56',
+    l: 'size-64',
+    xl: 'size-72',
+    32: 'size-32',
+    40: 'size-40',
+    48: 'size-48',
+    56: 'size-56',
+    64: 'size-64',
+    72: 'size-72',
+};
+const Field = ({ buttonSize = 56, buttonVariant = 'default', backgroundColor, contentColor, stateType, label, open, rightAddons, innerProps, className, showArrow = true, icon, ...restProps }) => {
+    const Icon = getIcon(buttonVariant, SIZE_TO_CLASSNAME_MAP[buttonSize], icon);
+    const buttonProps = {
+        ...restProps,
+        ...innerProps,
+    };
+    return (React.createElement(CustomButton, { ...buttonProps, rightAddons: React.createElement(Fragment, null,
+            rightAddons && (React.createElement("span", { className: cn(styles.addonsContainer, {
+                    [styles.showControlIcon]: showArrow || buttonVariant === 'compact',
+                }) }, rightAddons)),
+            (showArrow || buttonVariant === 'compact') && (React.createElement("span", { className: cn(styles.iconContainer, buttonVariant !== 'compact' && open && styles.open) },
+                React.createElement(Icon, { "data-test-id": 'custom-picker-button-icon' })))), block: true, size: buttonSize, backgroundColor: backgroundColor, contentColor: contentColor, stateType: stateType, className: className }, buttonVariant !== 'compact' && label));
+};
+
+export { Field };

package/custom-picker-button/moderncssm/field/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/custom-picker-button/moderncssm/field/index.js

@@ -0,0 +1,6 @@
+export { Field } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../../custom-button/moderncssm';
+import '../../../picker-button/moderncssm/shared';
+import './index.module.css';

package/custom-picker-button/moderncssm/field/index.module.css

@@ -0,0 +1,18 @@
+/* */
+
+.iconContainer {
+    display: flex;
+    transition: transform 0.15s ease-in-out;
+}
+
+.addonsContainer {
+    display: flex
+}
+
+.addonsContainer.showControlIcon {
+        margin-right: var(--gap-4);
+    }
+
+.open {
+    transform: var(--arrow-transform);
+}

package/custom-picker-button/moderncssm/index.d.ts

@@ -0,0 +1,2 @@
+export { CustomPickerButtonResponsive as CustomPickerButton, CustomPickerButtonResponsiveProps as CustomPickerButtonProps } from "./Component.responsive";
+export {};

package/custom-picker-button/moderncssm/index.js

@@ -0,0 +1,12 @@
+export { CustomPickerButtonResponsive as CustomPickerButton } from './Component.responsive.js';
+import 'react';
+import '../../mq/moderncssm';
+import './desktop/Component.desktop.js';
+import '../../picker-button/moderncssm/desktop';
+import './field/Component.js';
+import 'classnames';
+import '../../custom-button/moderncssm';
+import '../../picker-button/moderncssm/shared';
+import './field/index.module.css';
+import './mobile/Component.mobile.js';
+import '../../picker-button/moderncssm/mobile';

package/custom-picker-button/moderncssm/mobile/Component.mobile.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import React from 'react';
+import { CustomButtonProps } from "../../../custom-button";
+import { PickerButtonMobileProps } from "../../../picker-button/mobile";
+type CustomPickerButtonMobileProps = Omit<PickerButtonMobileProps, 'view' | 'colors'> & Pick<CustomButtonProps, 'backgroundColor' | 'contentColor' | 'stateType'>;
+declare const CustomPickerButtonMobile: React.ForwardRefExoticComponent<Omit<PickerButtonMobileProps, "view" | "colors"> & Pick<CustomButtonProps, "backgroundColor" | "contentColor" | "stateType"> & React.RefAttributes<HTMLInputElement>>;
+export { CustomPickerButtonMobileProps, CustomPickerButtonMobile };

package/custom-picker-button/moderncssm/mobile/Component.mobile.js

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react';
+import { PickerButtonMobile } from '../../../picker-button/moderncssm/mobile';
+import { Field } from '../field/Component.js';
+import 'classnames';
+import '../../../custom-button/moderncssm';
+import '../../../picker-button/moderncssm/shared';
+import '../field/index.module.css';
+
+const DEFAULT_BUTTON_COLOR = '#FF45C3';
+const DEFAULT_CONTENT_COLOR = 'white';
+const CustomPickerButtonMobile = forwardRef(({ backgroundColor = DEFAULT_BUTTON_COLOR, contentColor = DEFAULT_CONTENT_COLOR, stateType = 'darkening', ...restProps }, ref) => (React.createElement(PickerButtonMobile, { ...restProps, fieldProps: {
+        backgroundColor,
+        contentColor,
+        stateType,
+    }, Field: Field, ref: ref })));
+
+export { CustomPickerButtonMobile };

package/custom-picker-button/moderncssm/mobile/index.d.ts

@@ -0,0 +1,2 @@
+export { CustomPickerButtonMobile, CustomPickerButtonMobileProps } from "./Component.mobile";
+export {};

package/custom-picker-button/moderncssm/mobile/index.js

@@ -0,0 +1,8 @@
+export { CustomPickerButtonMobile } from './Component.mobile.js';
+import 'react';
+import '../../../picker-button/moderncssm/mobile';
+import '../field/Component.js';
+import 'classnames';
+import '../../../custom-button/moderncssm';
+import '../../../picker-button/moderncssm/shared';
+import '../field/index.module.css';

package/date-input/moderncssm/Component.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent } from "react";
+import { InputProps } from "../../input";
+type DateInputProps = Omit<InputProps, 'onChange'> & {
+    /**
+     * Управление нативным режимом на мобильных устройствах
+     */
+    mobileMode?: 'input' | 'native';
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        date: Date;
+        value: string;
+    }) => void;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        date: Date;
+        value: string;
+    }) => void;
+};
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+declare const DateInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange"> & {
+    /**
+     * Управление нативным режимом на мобильных устройствах
+     */
+    mobileMode?: "input" | "native" | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
+        date: Date;
+        value: string;
+    }) => void) | undefined;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: ((event: ChangeEvent<HTMLInputElement>, payload: {
+        date: Date;
+        value: string;
+    }) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { DateInputProps, DateInput };

package/date-input/moderncssm/Component.js

@@ -0,0 +1,96 @@
+import React, { forwardRef, useRef, useState, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { Input } from '../../input/moderncssm';
+import { format, parseDateString, isCompleteDateInput, isValid, NATIVE_DATE_FORMAT, formatDate } from './utils/format.js';
+import { isInputDateSupported } from './utils/native-supports.js';
+import styles from './index.module.css';
+import 'date-fns/format';
+import 'date-fns/isValid';
+import 'date-fns/parse';
+
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+const DateInput = forwardRef(({ mobileMode = 'input', defaultValue = '', rightAddons, error, value: propValue, onBlur, onChange, onComplete, ...restProps }, ref) => {
+    const inputRef = useRef(null);
+    const [shouldRenderNative, setShouldRenderNative] = useState(false);
+    const [value, setValue] = useState(propValue || defaultValue);
+    const moveCaretTo = (pos) => {
+        requestAnimationFrame(() => {
+            inputRef.current?.setSelectionRange(pos, pos);
+        });
+    };
+    const handleChange = (event) => {
+        const { value: newValue } = event.target;
+        const caretPos = event.target.selectionStart || 0;
+        // Позволяем вводить только цифры и точки
+        if (/[^\d.]/.test(newValue)) {
+            moveCaretTo(caretPos - 1);
+            return;
+        }
+        // Не даем вводить больше, чем 2 точки
+        if (getDotsCount(newValue) > 2) {
+            moveCaretTo(caretPos - 1);
+            return;
+        }
+        // Форматируем введенное значение (добавляем точки)
+        const formattedValue = format(newValue);
+        const date = parseDateString(formattedValue);
+        // Управляем кареткой, если она находится не в конце инпута
+        if (caretPos !== newValue.length) {
+            if (formattedValue === value) {
+                moveCaretTo(caretPos);
+            }
+            else if (newValue.length - formattedValue.length === 1) {
+                moveCaretTo(caretPos);
+            }
+            else if (formattedValue.length - newValue.length === 1 &&
+                getDotsCount(formattedValue) > getDotsCount(newValue)) {
+                moveCaretTo(caretPos);
+            }
+        }
+        setValue(formattedValue);
+        if (onChange)
+            onChange(event, { date, value: formattedValue });
+        if (isCompleteDateInput(formattedValue)) {
+            const valid = formattedValue.length > 0 && isValid(formattedValue);
+            if (!valid)
+                return;
+            if (onComplete)
+                onComplete(event, { date, value: formattedValue });
+        }
+    };
+    const handleNativeInputChange = (event) => {
+        const newDate = parseDateString(event.target.value, NATIVE_DATE_FORMAT);
+        const newValue = event.target.value === '' ? '' : formatDate(newDate);
+        setValue(newValue);
+        if (onComplete)
+            onComplete(event, { date: newDate, value: newValue });
+        if (onChange)
+            onChange(event, { date: newDate, value: newValue });
+    };
+    const handleBlur = (event) => {
+        if (onBlur)
+            onBlur(event);
+    };
+    useEffect(() => {
+        if (mobileMode === 'native' && isInputDateSupported()) {
+            setShouldRenderNative(true);
+        }
+    }, [mobileMode]);
+    useEffect(() => {
+        if (typeof propValue !== 'undefined') {
+            setValue(propValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [propValue]);
+    return (React.createElement(Input, { ...restProps, ref: mergeRefs([ref, inputRef]), value: value, inputMode: 'decimal', pattern: '[0-9\\.]*', onChange: handleChange, onBlur: handleBlur, placeholder: '\u0414\u0414.\u041C\u041C.\u0413\u0413\u0413\u0413', error: error, rightAddons: React.createElement(React.Fragment, null,
+            rightAddons,
+            shouldRenderNative && (React.createElement("input", { type: 'date', ref: ref, defaultValue: defaultValue, onChange: handleNativeInputChange, className: styles.nativeInput }))) }));
+});
+function getDotsCount(value) {
+    return (value.match(/\./g) || []).length;
+}
+
+export { DateInput };

package/date-input/moderncssm/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./utils/index";

package/date-input/moderncssm/index.js

@@ -0,0 +1,10 @@
+export { DateInput } from './Component.js';
+export { DATE_FORMAT, DATE_MASK, NATIVE_DATE_FORMAT, format, formatDate, isCompleteDateInput, isValid, parseDateString } from './utils/format.js';
+export { isInputDateSupported } from './utils/native-supports.js';
+import 'react';
+import 'react-merge-refs';
+import '../../input/moderncssm';
+import './index.module.css';
+import 'date-fns/format';
+import 'date-fns/isValid';
+import 'date-fns/parse';

package/date-input/moderncssm/index.module.css

@@ -0,0 +1,20 @@
+/* */
+
+.nativeInput {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    appearance: none;
+    z-index: 1
+}
+
+.nativeInput::-webkit-calendar-picker-indicator {
+        display: none;
+    }
+
+.nativeInput::-webkit-inner-spin-button {
+        display: none;
+    }

package/date-input/moderncssm/utils/format.d.ts

@@ -0,0 +1,9 @@
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const NATIVE_DATE_FORMAT = "yyyy-MM-dd";
+declare const DATE_MASK: (string | RegExp)[];
+declare const isCompleteDateInput: (input: string) => boolean;
+declare const formatDate: (date: Date | number, dateFormat?: string) => string;
+declare const parseDateString: (value: string, dateFormat?: string) => Date;
+declare const isValid: (inputValue?: string) => boolean;
+declare const format: (value: string) => string;
+export { DATE_FORMAT, NATIVE_DATE_FORMAT, DATE_MASK, isCompleteDateInput, formatDate, parseDateString, isValid, format };

package/date-input/moderncssm/utils/format.js

@@ -0,0 +1,30 @@
+import dateFnsFormat from 'date-fns/format';
+import dateFnsIsValid from 'date-fns/isValid';
+import parse from 'date-fns/parse';
+
+const DATE_FORMAT = 'dd.MM.yyyy';
+const NATIVE_DATE_FORMAT = 'yyyy-MM-dd';
+const DATE_MASK = [/\d/, /\d/, '.', /\d/, /\d/, '.', /\d/, /\d/, /\d/, /\d/];
+const isCompleteDateInput = (input) => input.length === DATE_MASK.length;
+const formatDate = (date, dateFormat = DATE_FORMAT) => dateFnsFormat(date, dateFormat);
+const parseDateString = (value, dateFormat = DATE_FORMAT) => parse(value, dateFormat, new Date());
+const isValid = (inputValue) => !inputValue || (isCompleteDateInput(inputValue) && dateFnsIsValid(parseDateString(inputValue)));
+const format = (value) => value
+    .replace(/^(\d\d)(\d)$/, '$1.$2') // 121 => 12.1
+    .replace(/^(\d\d)\.(\d\d)(\d)$/, '$1.$2.$3') // 12.122 => 12.12.2
+    .replace(/^(\d\d)\d\.(.*)/, '$1.$2') // 123.12.2005 => 12.12.2005
+    .replace(/^(\d\d\.\d\d)\d\.(.*)/, '$1.$2') // 12.123.2005 => 12.12.2005
+    .replace(/^(\d\d\.\d\d\.\d\d\d\d).*/, '$1') // 12.12.20056 => 12.12.2005
+    .replace(/\.$/, '') // 12. => 12
+    .replace(/^(\d\d\.\d\d)(\d\d\d\d)/, '$1.$2') // 12.122005 => 12.12.2005
+    .replace(/^(\d\d)(\d\d\.\d\d\d\d)/, '$1.$2') // 1212.2005 => 12.12.2005
+    .replace(/^(\d\.\d\d\.\d\d\d\d)([0-9]*)/, '$1') // 1.12.2005123123 => 01.12.2005
+    .replace(/^(\d\d\.\d\.\d\d\d\d)([0-9]*)/, '$1') // 01.2.20055125125 => 01.2.2005
+    .replace(/^(\d\.\d\.\d\d\d\d)([0-9]*)/, '$1') // 1.2.20055125125 => 1.2.2005
+    .replace(/^(\d)\.(\d\d)([0-9]*)\.(\d\d\d\d)/, '$1.$2.$4') // 1.123123.2005 => 1.12.2005
+    .replace(/^(\d\d)\.()\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3') // 01..2005123123 => 01..2005
+    .replace(/^(\d)\.()\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3') // 1..2005123123 => 1..2005
+    .replace(/^()\.()\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3') // ..2005123123 => ..2005
+    .replace(/^()\.(\d)\.(\d\d\d\d)([0-9]*)/, '$1.$2.$3'); // .2.2005123123 => .2.2005
+
+export { DATE_FORMAT, DATE_MASK, NATIVE_DATE_FORMAT, format, formatDate, isCompleteDateInput, isValid, parseDateString };

package/date-input/moderncssm/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./format";
+export * from "./native-supports";

package/date-input/moderncssm/utils/index.js

@@ -0,0 +1,5 @@
+export { DATE_FORMAT, DATE_MASK, NATIVE_DATE_FORMAT, format, formatDate, isCompleteDateInput, isValid, parseDateString } from './format.js';
+export { isInputDateSupported } from './native-supports.js';
+import 'date-fns/format';
+import 'date-fns/isValid';
+import 'date-fns/parse';

package/date-input/moderncssm/utils/native-supports.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Возвращает `true`, если поддерживается `input[type="date"]`
+ */
+declare function isInputDateSupported(): boolean;
+export { isInputDateSupported };

package/date-input/moderncssm/utils/native-supports.js

@@ -0,0 +1,12 @@
+/**
+ * Возвращает `true`, если поддерживается `input[type="date"]`
+ */
+function isInputDateSupported() {
+    const input = document.createElement('input');
+    const value = 'a';
+    input.setAttribute('type', 'date');
+    input.setAttribute('value', value);
+    return input.value !== value;
+}
+
+export { isInputDateSupported };

package/date-range-input/moderncssm/Component.responsive.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import React from 'react';
+import { ConditionalProps, DateRangeInputProps } from "./components/date-range-input/index";
+type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view' | 'picker' | 'onClose' | 'InputComponent'> & ConditionalProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+type DateRangeInputMedia = 'desktop' | 'mobile';
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+declare const DateRangeInputResponsive: React.ForwardRefExoticComponent<DateRangeInputResponsiveProps & React.RefAttributes<HTMLInputElement>>;
+export { DateRangeInputResponsiveProps, DateRangeInputMedia, DateRangeInputResponsive };

package/date-range-input/moderncssm/Component.responsive.js

@@ -0,0 +1,34 @@
+import React, { forwardRef } from 'react';
+import { useMedia } from '@alfalab/hooks';
+import { DateRangeInputDesktop } from './desktop/Component.desktop.js';
+import { DateRangeInputMobile } from './mobile/Component.mobile.js';
+import '../../calendar/moderncssm/desktop';
+import '../../input/moderncssm/desktop';
+import './components/date-range-input/Component.js';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import 'date-fns/startOfMonth';
+import '../../calendar/moderncssm/shared';
+import '../../icon-button/moderncssm';
+import '../../popover/moderncssm';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './utils/format.js';
+import 'date-fns/parse';
+import './components/date-range-input/index.module.css';
+import '../../calendar/moderncssm/mobile';
+import '../../input/moderncssm/mobile';
+
+/**
+ * @deprecated
+ * use UniversalDateInput instead
+ */
+const DateRangeInputResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
+    const [view] = useMedia([
+        ['mobile', `(max-width: ${breakpoint - 1}px)`],
+        ['desktop', `(min-width: ${breakpoint}px)`],
+    ], 'desktop');
+    return view === 'desktop' ? (React.createElement(DateRangeInputDesktop, { ...restProps, ref: ref })) : (React.createElement(DateRangeInputMobile, { ...restProps, ref: ref }));
+});
+
+export { DateRangeInputResponsive };