@ozen-ui/kit 0.47.2 → 0.48.0

package/__inner__/esm/components/DatePicker/DatePicker.js

@@ -0,0 +1,157 @@
+import { __assign, __read, __rest } from "tslib";
+import './DatePicker.css';
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { useControlled } from '../../hooks/useControlled';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { getPaperSizeToFormElement } from '../../utils/getPaperSizeToFormElement';
+import { isKeys } from '../../utils/isKeys';
+import { Calendar } from '../Calendar';
+import { Paper } from '../Paper';
+import { Popover } from '../Popover';
+import { DateInput, DatePickerRenderRight } from './components';
+import { isCompleted } from './components/DateInput/utils';
+import { DATE_PICKER_DEFAULT_SIZE } from './constants';
+import { formatDateToString, formatStringToDate, isInExclude, isOutOfRange, matchCalendarSizeToFormElement, } from './utils';
+export var cnDatePicker = cn('DatePicker');
+export var DatePicker = forwardRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'DatePicker',
+    });
+    var _a = props.size, size = _a === void 0 ? DATE_PICKER_DEFAULT_SIZE : _a, label = props.label, error = props.error, required = props.required, fullWidth = props.fullWidth, placeholder = props.placeholder, hint = props.hint, valueProp = props.value, defaultValue = props.defaultValue, openProp = props.open, onCloseProp = props.onClose, onOpenProp = props.onOpen, onInputChange = props.onInputChange, clearText = props.clearText, defaultOpen = props.defaultOpen, disabled = props.disabled, minDate = props.minDate, maxDate = props.maxDate, exclude = props.exclude, offsetDate = props.offsetDate, inputProps = props.inputProps, calendarProps = props.calendarProps, popoverProps = props.popoverProps, renderRight = props.renderRight, disableClearButton = props.disableClearButton, onChange = props.onChange, onKeyDown = props.onKeyDown, className = props.className, autoFocus = props.autoFocus, onError = props.onError, other = __rest(props, ["size", "label", "error", "required", "fullWidth", "placeholder", "hint", "value", "defaultValue", "open", "onClose", "onOpen", "onInputChange", "clearText", "defaultOpen", "disabled", "minDate", "maxDate", "exclude", "offsetDate", "inputProps", "calendarProps", "popoverProps", "renderRight", "disableClearButton", "onChange", "onKeyDown", "className", "autoFocus", "onError"]);
+    var anchorRef = useRef(null);
+    var lastValidDate = useRef('');
+    var _b = __read(useControlled({
+        value: undefined,
+        defaultValue: '',
+        name: 'DatePicker',
+        state: 'inputValue',
+    }), 2), inputValue = _b[0], setInputValue = _b[1];
+    var _c = __read(useControlled({
+        value: openProp,
+        defaultValue: defaultOpen,
+        name: 'DatePicker',
+        state: 'open',
+    }), 2), open = _c[0], setOpen = _c[1];
+    var _d = __read(useControlled({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'DatePicker',
+        state: 'value',
+    }), 2), value = _d[0], setValue = _d[1];
+    /** Соотношение размера календаря к размеру элемента контроля */
+    var calendarSize = matchCalendarSizeToFormElement[size];
+    /** Вычисление border-radius по размеру компонента */
+    var radius = getPaperSizeToFormElement(size);
+    var callOnChange = function (value) {
+        var formattedDate = formatStringToDate(value);
+        setValue(formattedDate);
+        onChange === null || onChange === void 0 ? void 0 : onChange(formattedDate);
+        lastValidDate.current = value;
+    };
+    var changeInputValue = function (e, value) {
+        setInputValue(value);
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e, value);
+        if (isCompleted(value) || value === '')
+            callOnChange(value);
+    };
+    /** Эффект – автофокусировка в текстовом поле */
+    useEffect(function () {
+        var _a;
+        if (autoFocus)
+            (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [autoFocus]);
+    /** Эффект – синхронизируем значение текстового поля со значением в списке */
+    useEffect(function () {
+        var formattedDate = formatDateToString(value);
+        if (formattedDate !== inputValue) {
+            setInputValue(formattedDate);
+            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, formattedDate);
+            lastValidDate.current = formattedDate;
+        }
+    }, [value]);
+    /** Эффект для обработки ошибок */
+    useEffect(function () {
+        if (isInExclude({ exclude: exclude, value: value })) {
+            onError === null || onError === void 0 ? void 0 : onError({
+                type: 'inExclude',
+                inputValue: inputValue,
+                value: value,
+            });
+        }
+        if (isOutOfRange({ minDate: minDate, maxDate: maxDate, value: value })) {
+            onError === null || onError === void 0 ? void 0 : onError({
+                type: 'outOfRange',
+                inputValue: inputValue,
+                value: value,
+            });
+        }
+    }, [value, inputValue, onError, minDate, maxDate, exclude]);
+    /** Закрытие */
+    var handleClose = function () {
+        setOpen(false);
+        onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+    };
+    /** Открытие */
+    var handleOpen = function () {
+        setOpen(true);
+        onOpenProp === null || onOpenProp === void 0 ? void 0 : onOpenProp();
+    };
+    /** Переключатель открытия и закрытия */
+    var handleToggle = function () {
+        if (disabled)
+            return;
+        if (open)
+            handleClose();
+        else
+            handleOpen();
+    };
+    /** Открытие списка по клику на текстовом поле */
+    var handleClickOnInput = function (e) {
+        var _a;
+        handleToggle();
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    };
+    /** Управление элементом контроля через клавиатуру */
+    var handleKeyDown = function (event) {
+        if (isKeys(event, ['ArrowDown', 'ArrowUp']) && !open) {
+            event.preventDefault();
+            handleToggle();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
+    /** Актуализация значения текстового поля после его покидания */
+    var handleBlur = function (e) {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+        if (!inputValue)
+            return;
+        if (!isCompleted(inputValue))
+            changeInputValue(null, lastValidDate.current);
+    };
+    /** Очистка поля */
+    var handleClear = function () {
+        changeInputValue(null, '');
+    };
+    /** Событие ввода значения в текстовом поле */
+    var handleChangeInput = function (e) {
+        var value = e.target.value;
+        changeInputValue(e, value);
+    };
+    /** Событие выбора значения из календаря */
+    var handleChangeCalendar = function (date) {
+        var formattedDate = formatDateToString(date);
+        changeInputValue(null, formattedDate);
+        handleClose();
+    };
+    /** Предотвращаем переход фокуса с текстового поля на интерактивные элементы календаря */
+    var handleMouseDownCalendar = function (e) {
+        e.preventDefault();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DateInput, __assign({ size: size, hint: hint, error: error, label: label, required: required, disabled: disabled, fullWidth: fullWidth, placeholder: placeholder }, other, { renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!inputValue, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: __assign(__assign({}, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onInput: handleChangeInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: cnDatePicker('', [className]), onKeyDown: handleKeyDown, ref: ref })),
+        React.createElement(Popover, __assign({ as: Paper, open: open, offset: [0, 4], radius: radius, anchorRef: anchorRef, onClose: handleClose, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true }, popoverProps),
+            React.createElement(Calendar, __assign({ minDate: minDate, maxDate: maxDate, exclude: exclude, size: calendarSize, offsetDate: offsetDate, onMouseDown: handleMouseDownCalendar }, calendarProps, { value: value || null, onChange: handleChangeCalendar })))));
+});
+DatePicker.displayName = 'DatePicker';

package/__inner__/esm/components/DatePicker/components/DateInput/DateInput.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { InputProps } from '../../../Input';
+export declare const DateInput: React.ForwardRefExoticComponent<Omit<Omit<InputProps, "value" | "defaultValue"> & {
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/__inner__/esm/components/DatePicker/components/DateInput/DateInput.js

@@ -0,0 +1,11 @@
+import { __assign, __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { CalendarIcon } from '@ozen-ui/icons';
+import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { Input } from '../../../Input';
+import { dateInputMask } from './utils';
+export var DateInput = forwardRef(function (_a, ref) {
+    var valueProp = _a.value, defaultValue = _a.defaultValue, other = __rest(_a, ["value", "defaultValue"]);
+    return (React.createElement(Input, __assign({ renderRight: CalendarIcon, value: dateInputMask(valueProp), defaultValue: dateInputMask(defaultValue) }, other, { ref: useMultiRef([ref]) })));
+});
+DateInput.displayName = 'DateInput';

package/__inner__/esm/components/DatePicker/components/DateInput/index.d.ts

@@ -0,0 +1 @@
+export * from './DateInput';

package/__inner__/esm/components/DatePicker/components/DateInput/index.js

@@ -0,0 +1 @@
+export * from './DateInput';

package/__inner__/esm/components/DatePicker/components/DateInput/utils/dateInputMask/dateInputMask.d.ts

@@ -0,0 +1,2 @@
+export declare const isCompleted: (value: string) => boolean;
+export declare const dateInputMask: (value: string | undefined) => string | undefined;

package/__inner__/esm/components/DatePicker/components/DateInput/utils/dateInputMask/dateInputMask.js

@@ -0,0 +1,15 @@
+export var isCompleted = function (value) { return value.length === 10; };
+export var dateInputMask = function (value) {
+    if (!value) {
+        return value;
+    }
+    var newValue = value.replace(/[^0-9.]/g, ''); // Запрещаем ввод, кроме цифр и точек
+    newValue = newValue.replace(/\.\.+/g, '..'); // Удаляем лишние точки
+    newValue = newValue.replace(/^(\d)\.$/g, '0$1.'); // Добавляем 0 в D.
+    newValue = newValue.replace(/^(\d\d)(\d)$/g, '$1.$2'); // Добавляем точку в DD.M
+    newValue = newValue.replace(/^(\d\d)\.(\d)\.$/g, '$1.0$2.'); // Добавляем 0 в DD.M.
+    newValue = newValue.replace(/^(\d\d\.\d\d)(\d)$/g, '$1.$2'); // Добавляем точку в DD.MM.Y
+    if (newValue.length > 10)
+        newValue = newValue.slice(0, 10); // Ограничиваем длину
+    return newValue;
+};

package/__inner__/esm/components/DatePicker/components/DateInput/utils/dateInputMask/index.d.ts

@@ -0,0 +1 @@
+export * from './dateInputMask';

package/__inner__/esm/components/DatePicker/components/DateInput/utils/dateInputMask/index.js

@@ -0,0 +1 @@
+export * from './dateInputMask';

package/__inner__/esm/components/DatePicker/components/DateInput/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './dateInputMask';

package/__inner__/esm/components/DatePicker/components/DateInput/utils/index.js

@@ -0,0 +1 @@
+export * from './dateInputMask';

package/__inner__/esm/components/DatePicker/components/DatePickerRenderRight/DatePickerRenderRight.d.ts

@@ -0,0 +1,8 @@
+import type { FC, MouseEvent } from 'react';
+import type { DatePickerProps } from '../../index';
+type AutocompleteRenderRightProps = {
+    onClear: (e: MouseEvent<HTMLElement>) => void;
+    hasValue: boolean;
+} & Pick<DatePickerProps, 'clearText' | 'renderRight' | 'size' | 'open' | 'disableClearButton'>;
+export declare const DatePickerRenderRight: FC<AutocompleteRenderRightProps>;
+export {};

package/__inner__/esm/components/DatePicker/components/DatePickerRenderRight/DatePickerRenderRight.js

@@ -0,0 +1,22 @@
+import { __read } from "tslib";
+import React from 'react';
+import { CalendarIcon, CrossIcon } from '@ozen-ui/icons';
+import { useFieldControl } from '../../../FieldControl';
+import { FieldIcon } from '../../../FieldIcon';
+import { IconButton } from '../../../IconButtonNext';
+import { cnDatePicker } from '../../index';
+export var DatePickerRenderRight = function (_a) {
+    var disableClearButton = _a.disableClearButton, renderRight = _a.renderRight, clearText = _a.clearText, hasValue = _a.hasValue, onClear = _a.onClear, open = _a.open, size = _a.size;
+    var _b = __read(useFieldControl(), 1), _c = _b[0], focused = _c.focused, hovered = _c.hovered;
+    var isVisibleClearButton = !!(hovered || open || focused) && hasValue;
+    var handleClear = function (e) {
+        e.preventDefault();
+        onClear === null || onClear === void 0 ? void 0 : onClear(e);
+    };
+    return (React.createElement("div", { className: cnDatePicker('RenderRight') },
+        !disableClearButton && (React.createElement(IconButton, { size: size, type: "button", tabIndex: -1, icon: CrossIcon, title: clearText, variant: "function", onClick: handleClear, "aria-label": clearText, className: cnDatePicker('ClearButton', {
+                visibility: isVisibleClearButton,
+            }), compressed: true })),
+        React.createElement(FieldIcon, { icon: renderRight }),
+        React.createElement(FieldIcon, { icon: CalendarIcon, size: size })));
+};

package/__inner__/esm/components/DatePicker/components/DatePickerRenderRight/index.d.ts

@@ -0,0 +1 @@
+export * from './DatePickerRenderRight';

package/__inner__/esm/components/DatePicker/components/DatePickerRenderRight/index.js

@@ -0,0 +1 @@
+export * from './DatePickerRenderRight';

package/__inner__/esm/components/DatePicker/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DateInput';
+export * from './DatePickerRenderRight';

package/__inner__/esm/components/DatePicker/components/index.js

@@ -0,0 +1,2 @@
+export * from './DateInput';
+export * from './DatePickerRenderRight';

package/__inner__/esm/components/DatePicker/constants.d.ts

@@ -0,0 +1 @@
+export declare const DATE_PICKER_DEFAULT_SIZE = "m";

package/__inner__/esm/components/DatePicker/constants.js

@@ -0,0 +1 @@
+export var DATE_PICKER_DEFAULT_SIZE = 'm';

package/__inner__/esm/components/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DatePicker';
+export * from './types';

package/__inner__/esm/components/DatePicker/index.js

@@ -0,0 +1,2 @@
+export * from './DatePicker';
+export * from './types';

package/__inner__/esm/components/DatePicker/types.d.ts

@@ -0,0 +1,52 @@
+import type { ComponentPropsWithRef, ChangeEvent } from 'react';
+import type { CalendarBaseProps, CalendarOnChange } from '../Calendar';
+import type { InputProps } from '../Input';
+import type { PopoverBaseProps } from '../Popover';
+export type DatePickerOnChange = CalendarOnChange;
+export type DatePickerOnInputChange = (e: ChangeEvent<HTMLInputElement> | null, value: string) => void;
+export type DatePickerPropOnError = (props: {
+    type: 'outOfRange';
+    inputValue?: string;
+    value?: Date | null;
+} | {
+    type: 'inExclude';
+    inputValue?: string;
+    value?: Date | null;
+}) => void;
+type DatePickerOpenControlledProps = {
+    /** Текущее состояние списка. Если `true`, список отображается. */
+    open?: boolean;
+    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
+    defaultOpen?: never;
+};
+type DatePickerOpenUncontrolledProps = {
+    /** Текущее состояние списка. Если `true`, список отображается. */
+    open?: never;
+    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
+    defaultOpen?: boolean;
+};
+export type DatePickerProps = {
+    /** Выбранная дата */
+    value?: Date | null;
+    /** Выбранная дата по умолчанию (неконтролируемое состояние) */
+    defaultValue?: Date | null;
+    /** Функция обратного вызова, которая будет вызвана при выборе значения */
+    onChange?: DatePickerOnChange;
+    /** Введённое значение в текстовом поле */
+    onInputChange?: DatePickerOnInputChange;
+    /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
+    onClose?: () => void;
+    /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает открытие */
+    onOpen?: () => void;
+    /** Свойства компонента Calendar */
+    calendarProps?: CalendarBaseProps;
+    /** Свойства компонента Popover */
+    popoverProps?: PopoverBaseProps;
+    /** Текст для кнопки очистки поля */
+    clearText?: string;
+    /** Если {true}, то не отображает кнопку закрытия */
+    disableClearButton?: boolean;
+    /** Функция обратно вызова, которая сработает если пользователь ввёл дату с ошибкой */
+    onError?: DatePickerPropOnError;
+} & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue' | 'onError'> & Pick<CalendarBaseProps, 'minDate' | 'maxDate' | 'exclude' | 'offsetDate'> & Pick<InputProps, 'label' | 'hint' | 'onKeyDown' | 'size' | 'error' | 'required' | 'fullWidth' | 'disabled' | 'renderLeft' | 'renderRight' | 'placeholder' | 'inputProps'> & (DatePickerOpenControlledProps | DatePickerOpenUncontrolledProps);
+export {};

package/__inner__/esm/components/DatePicker/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/DatePicker/utils/formatDateToString/formatDateToString.d.ts

@@ -0,0 +1 @@
+export declare const formatDateToString: (date: Date | undefined | null) => string;

package/__inner__/esm/components/DatePicker/utils/formatDateToString/formatDateToString.js

@@ -0,0 +1,9 @@
+export var formatDateToString = function (date) {
+    if (!date) {
+        return '';
+    }
+    var year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
+    var month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(date);
+    var day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
+    return "".concat(day, ".").concat(month, ".").concat(year);
+};

package/__inner__/esm/components/DatePicker/utils/formatDateToString/index.d.ts

@@ -0,0 +1 @@
+export * from './formatDateToString';

package/__inner__/esm/components/DatePicker/utils/formatDateToString/index.js

@@ -0,0 +1 @@
+export * from './formatDateToString';

package/__inner__/esm/components/DatePicker/utils/formatStringToDate/formatStringToDate.d.ts

@@ -0,0 +1 @@
+export declare const formatStringToDate: (value: string) => Date | null;

package/__inner__/esm/components/DatePicker/utils/formatStringToDate/formatStringToDate.js

@@ -0,0 +1,9 @@
+import { __read } from "tslib";
+import { isCompleted } from '../../components/DateInput/utils';
+export var formatStringToDate = function (value) {
+    var _a = __read(value.split('.'), 3), date = _a[0], month = _a[1], year = _a[2];
+    if (!(date && month && year) || !isCompleted(value)) {
+        return null;
+    }
+    return new Date(+year, +month - 1, +date);
+};

package/__inner__/esm/components/DatePicker/utils/formatStringToDate/index.d.ts

@@ -0,0 +1 @@
+export * from './formatStringToDate';

package/__inner__/esm/components/DatePicker/utils/formatStringToDate/index.js

@@ -0,0 +1 @@
+export * from './formatStringToDate';

package/__inner__/esm/components/DatePicker/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './matchCalendarSizeToFormElement';
+export * from './formatDateToString';
+export * from './formatStringToDate';
+export * from './isOutOfRange';
+export * from './isInExclude';

package/__inner__/esm/components/DatePicker/utils/index.js

@@ -0,0 +1,5 @@
+export * from './matchCalendarSizeToFormElement';
+export * from './formatDateToString';
+export * from './formatStringToDate';
+export * from './isOutOfRange';
+export * from './isInExclude';

package/__inner__/esm/components/DatePicker/utils/isInExclude/index.d.ts

@@ -0,0 +1 @@
+export * from './isInExclude';

package/__inner__/esm/components/DatePicker/utils/isInExclude/index.js

@@ -0,0 +1 @@
+export * from './isInExclude';

package/__inner__/esm/components/DatePicker/utils/isInExclude/isInExclude.d.ts

@@ -0,0 +1,2 @@
+import type { DatePickerProps } from '../../index';
+export declare const isInExclude: ({ exclude, value, }: Pick<DatePickerProps, 'exclude' | 'value'>) => boolean;

package/__inner__/esm/components/DatePicker/utils/isInExclude/isInExclude.js

@@ -0,0 +1,10 @@
+export var isInExclude = function (_a) {
+    var _b, _c;
+    var exclude = _a.exclude, value = _a.value;
+    if (!exclude || !value) {
+        return false;
+    }
+    return (!!(exclude.date &&
+        !((_b = exclude.date) === null || _b === void 0 ? void 0 : _b.every(function (date) { return date.getTime() !== value.getTime(); }))) ||
+        !!(exclude.day && !((_c = exclude.day) === null || _c === void 0 ? void 0 : _c.every(function (date) { return date !== value.getDay(); }))));
+};

package/__inner__/esm/components/DatePicker/utils/isOutOfRange/index.d.ts

@@ -0,0 +1 @@
+export * from './isOutOfRange';

package/__inner__/esm/components/DatePicker/utils/isOutOfRange/index.js

@@ -0,0 +1 @@
+export * from './isOutOfRange';

package/__inner__/esm/components/DatePicker/utils/isOutOfRange/isOutOfRange.d.ts

@@ -0,0 +1,2 @@
+import type { DatePickerProps } from '../../index';
+export declare const isOutOfRange: ({ minDate, maxDate, value, }: Pick<DatePickerProps, 'minDate' | 'maxDate' | 'value'>) => boolean;

package/__inner__/esm/components/DatePicker/utils/isOutOfRange/isOutOfRange.js

@@ -0,0 +1,7 @@
+export var isOutOfRange = function (_a) {
+    var minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value;
+    if (!minDate || !maxDate || !value) {
+        return false;
+    }
+    return (minDate.getTime() > (value === null || value === void 0 ? void 0 : value.getTime()) || maxDate.getTime() < (value === null || value === void 0 ? void 0 : value.getTime()));
+};

package/__inner__/esm/components/DatePicker/utils/matchCalendarSizeToFormElement/index.d.ts

@@ -0,0 +1 @@
+export * from './matchCalendarSizeToFormElement';

package/__inner__/esm/components/DatePicker/utils/matchCalendarSizeToFormElement/index.js

@@ -0,0 +1 @@
+export * from './matchCalendarSizeToFormElement';

package/__inner__/esm/components/DatePicker/utils/matchCalendarSizeToFormElement/matchCalendarSizeToFormElement.d.ts

@@ -0,0 +1,5 @@
+import type { FormElementSizeVariant } from '../../../../types/FormElementSizeVariant';
+import type { CalendarSizeVariant } from '../../../Calendar';
+export declare const matchCalendarSizeToFormElement: {
+    [key in FormElementSizeVariant]: CalendarSizeVariant;
+};

package/__inner__/esm/components/DatePicker/utils/matchCalendarSizeToFormElement/matchCalendarSizeToFormElement.js

@@ -0,0 +1,7 @@
+export var matchCalendarSizeToFormElement = {
+    '2xs': 's',
+    xs: 's',
+    s: 's',
+    m: 'm',
+    l: 'l',
+};

package/__inner__/esm/components/Input/Input.css

@@ -25,7 +25,6 @@
     color: var(--textfield-color);
     box-sizing: border-box;
     block-size: var(--textfield-input-height);
-
     font: inherit;
   }
   .Input-Field::placeholder {

package/__inner__/esm/components/Input/Input.js

@@ -38,7 +38,7 @@ export var Input = forwardRef(function (inProps, ref) {
         },
     });
     return (React.createElement(FieldControl, __assign({ size: size, error: error, disabled: disabled, required: required, fullWidth: fullWidth }, other, { ref: ref, className: cnInput({}, [className]) }),
-        React.createElement("label", __assign({}, bodyProps, { className: cnInput('Body'), ref: useMultiRef([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
+        React.createElement("label", __assign({}, bodyProps, { className: cnInput('Body', [bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className]), ref: useMultiRef([bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.ref, bodyInnerRef]) }),
             React.createElement(FieldIcon, { icon: renderLeft }),
             React.createElement("div", { className: cnInput('FieldContainer') },
                 React.createElement(FieldLabel, __assign({}, labelProps, { ref: labelRef || (labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref), className: labelProps === null || labelProps === void 0 ? void 0 : labelProps.className }), label),

package/__inner__/esm/components/ThemeProvider/types.d.ts

@@ -15,6 +15,7 @@ import type { ChipProps as ChiPropsNext } from '../ChipNext';
 import type { CollapseProps } from '../Collapse';
 import type { ContainerProps } from '../Container';
 import type { DataListProps } from '../DataList';
+import type { DatePickerProps } from '../DatePicker';
 import type { DialogProps } from '../Dialog';
 import type { DividerProps } from '../Divider';
 import type { DrawerProps } from '../Drawer';
@@ -86,6 +87,7 @@ export type Theme = {
         Container?: Partial<ContainerProps>;
         DataList?: Partial<DataListProps>;
         Dialog?: Partial<DialogProps>;
+        DatePicker?: Partial<DatePickerProps>;
         Divider?: Partial<DividerProps>;
         Drawer?: Partial<DrawerProps>;
         FieldControl?: Partial<FieldControlProps>;

package/__inner__/esm/locale/locale.js

@@ -65,6 +65,10 @@ export var ruRU = {
                 },
             },
         },
+        DatePicker: {
+            clearText: 'Очистить',
+            placeholder: 'ДД.ММ.ГГГГ',
+        },
     },
 };
 export var kkKZ = {
@@ -133,6 +137,10 @@ export var kkKZ = {
                 },
             },
         },
+        DatePicker: {
+            clearText: 'Тазалау',
+            placeholder: 'КК.АА.ЖЖЖЖ',
+        },
     },
 };
 export var enUS = {
@@ -202,5 +210,9 @@ export var enUS = {
                 },
             },
         },
+        DatePicker: {
+            clearText: 'Clear',
+            placeholder: 'DD.MM.YYYY',
+        },
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.47.2",
+  "version": "0.48.0",
   "description": "React component library",
   "files": [
     "*"
@@ -28,9 +28,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.2",
-    "@ozen-ui/fonts": "0.47.2",
-    "@ozen-ui/icons": "0.47.2",
-    "@ozen-ui/logger": "0.47.2"
+    "@ozen-ui/fonts": "0.48.0",
+    "@ozen-ui/icons": "0.48.0",
+    "@ozen-ui/logger": "0.48.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0",