@mailstep/design-system 0.13.0-beta.2 → 0.13.1-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.13.0-beta.2",
+  "version": "0.13.1-beta.2",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/Scheduler/components/DateChanger/index.d.ts

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import { type DatePickerType } from '../../../../Elements/DatePicker/DatePicker';
+import { type DatePickerType } from '../../../../Forms/DatePicker/DatePicker';
 type DateChangerProps = {
     isLoading?: boolean;
     isDatepickerOpen: boolean;

package/ui/Blocks/Scheduler/components/DateChanger/index.js

@@ -2,7 +2,7 @@ import { ArrowDown } from "../../../../Elements/Icon/icons/ArrowDown.js";
 import "../../../../Elements/Icon/index.js";
 import { Spinner } from "../../../../Elements/Spinner/Spinner.js";
 import { LanguageContext } from "../../../../ThemeProvider/ThemeProvider.js";
-import DatePicker_default from "../../../../Elements/DatePicker/index.js";
+import DatePicker_default from "../../../../Forms/DatePicker/index.js";
 import Popover from "../../../Popover/index.js";
 import { formatDate } from "../../utils/formatDate.js";
 import { ArrowContainer, DateChangerContainer } from "./styles.js";

package/ui/Blocks/Scheduler/hooks/useChangeDate.d.ts

@@ -1,4 +1,4 @@
-import { type DatePickerType } from '../../../Elements/DatePicker/DatePicker';
+import { type DatePickerType } from '../../../Forms/DatePicker/DatePicker';
 import type { SchedulerProps } from '../types';
 type Props = {
     closeDatePicker: () => void;

package/ui/{Elements → Forms}/DatePicker/DatePicker.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SpaceAround } from '../SpaceAround';
+import type { SpaceAround } from '../../Elements/SpaceAround';
 import type { DateTimeOthers, DatetimepickerProps } from './Datetime/types';
 import 'moment/dist/locale/cs';
 import 'moment/dist/locale/el';

package/ui/{Elements → Forms}/DatePicker/DatePicker.js

@@ -1,8 +1,9 @@
 import { LanguageContext } from "../../ThemeProvider/ThemeProvider.js";
-import SpaceAround_default from "../SpaceAround/index.js";
+import SpaceAround_default from "../../Elements/SpaceAround/index.js";
 import Datetime from "./Datetime/DateTime.js";
 import { DatePickerInput } from "./components/DatePickerInput/DatePickerInput.js";
 import "./components/DatePickerInput/index.js";
+import { getInputFormat } from "./utils/getInputFormat.js";
 import { DatePickerBase } from "./styles.js";
 import React, { useCallback, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -12,13 +13,15 @@ import "moment/dist/locale/el";
 import "moment/dist/locale/it";
 import "moment/dist/locale/ru";
 import "moment/dist/locale/sk";
-//#region packages/ui/Elements/DatePicker/DatePicker.tsx
+//#region packages/ui/Forms/DatePicker/DatePicker.tsx
 const defaultDateFormat = "DD.MM.YYYY";
 const DatePicker = ({ name, value, initialViewDate, error, label, disabled, isValidDate, onChange, dateFormat = defaultDateFormat, timeFormat = false, open, secondValue = null, input, icon = true, showInputLabel = false, showCalendarLabel = true, spaceAround = false, className, onClear, onInputChange, ...passProps }) => {
 	const locale = useContext(LanguageContext);
+	const inputFormat = getInputFormat(dateFormat, timeFormat);
 	const handleRenderInput = useCallback((inputProps, openCalendar) => /* @__PURE__ */ jsx(DatePickerInput, {
 		inputProps,
 		openCalendar,
+		format: inputFormat,
 		name,
 		label,
 		error,
@@ -35,7 +38,8 @@ const DatePicker = ({ name, value, initialViewDate, error, label, disabled, isVa
 		icon,
 		showInputLabel,
 		onClear,
-		onInputChange
+		onInputChange,
+		inputFormat
 	]);
 	const handleRenderView = useCallback((_, renderCalendar) => {
 		if (label && !showInputLabel) return /* @__PURE__ */ jsx(x.div, {

package/ui/{Elements → Forms}/DatePicker/Datetime/DateTime.js

@@ -5,7 +5,7 @@ import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import moment from "moment";
 import onClickOutside from "react-onclickoutside";
-//#region packages/ui/Elements/DatePicker/Datetime/DateTime.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/DateTime.tsx
 const viewModes = {
 	YEARS: "years",
 	MONTHS: "months",

package/ui/{Elements → Forms}/DatePicker/Datetime/components/DateRepeater.js

@@ -1,4 +1,4 @@
-import Icon_default from "../../../Icon/index.js";
+import Icon_default from "../../../../Elements/Icon/index.js";
 import "../types.js";
 import { DatePickerRepeatTrans } from "../../utils/constants.js";
 import { FooterRow } from "./FooterRow.js";
@@ -7,7 +7,7 @@ import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { x } from "@xstyled/styled-components";
 import { i18n } from "@lingui/core";
-//#region packages/ui/Elements/DatePicker/Datetime/components/DateRepeater.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/components/DateRepeater.tsx
 const DateRepeater = ({ onChangeOthers, others, reset }) => {
 	const handleChange = useCallback((e) => {
 		const dateTypeRepeater = e.target.value;
@@ -40,7 +40,7 @@ const DateRepeater = ({ onChangeOthers, others, reset }) => {
 			onChange: handleChange,
 			value: others?.dateTypeRepeater,
 			backgroundColor: "transparent",
-			color: "#22394E",
+			color: "typoPrimary",
 			cursor: "pointer",
 			border: "none",
 			children: [
@@ -53,11 +53,11 @@ const DateRepeater = ({ onChangeOthers, others, reset }) => {
 				}),
 				/* @__PURE__ */ jsx("option", {
 					value: "every-today",
-					children: DatePickerRepeatTrans["every-today"]
+					children: DatePickerRepeatTrans()["every-today"]
 				}),
 				/* @__PURE__ */ jsx("option", {
 					value: "every-yesterday",
-					children: DatePickerRepeatTrans["every-yesterday"]
+					children: DatePickerRepeatTrans()["every-yesterday"]
 				})
 			]
 		})] })

package/ui/{Elements → Forms}/DatePicker/Datetime/components/FooterRow.js

@@ -1,5 +1,5 @@
 import { styled } from "@xstyled/styled-components";
-//#region packages/ui/Elements/DatePicker/Datetime/components/FooterRow.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/components/FooterRow.tsx
 const FooterRow = styled.div`
   display: flex;
   justify-content: space-between;

package/ui/{Elements → Forms}/DatePicker/Datetime/components/FooterRowLabel.js

@@ -1,5 +1,5 @@
 import styled$1 from "@xstyled/styled-components";
-//#region packages/ui/Elements/DatePicker/Datetime/components/FooterRowLabel.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/components/FooterRowLabel.tsx
 const FooterRowLabel = styled$1.span`
   margin-left: 8px;
   text-align: left;

package/ui/{Elements → Forms}/DatePicker/Datetime/components/TimeInput.js

@@ -1,5 +1,5 @@
 import styled$1 from "@xstyled/styled-components";
-//#region packages/ui/Elements/DatePicker/Datetime/components/TimeInput.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/components/TimeInput.tsx
 const TimeInput = styled$1.input`
   margin: 0;
   margin-right: -1px;

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/Timepicker.js

@@ -1,16 +1,18 @@
-import Icon from "../../../../Icon/Icon.js";
+import Icon_default from "../../../../../Elements/Icon/index.js";
 import { FooterRow } from "../FooterRow.js";
 import { FooterRowLabel } from "../FooterRowLabel.js";
 import "./constants.js";
 import { TimeButton, TimeField, TimeWrapper } from "./styles.js";
 import { padTime } from "./utils/padTime.js";
+import { isTimeFieldComplete } from "./utils/isTimeFieldComplete.js";
 import { parseTimeField } from "./utils/parseTimeField.js";
 import { sanitizeTimeField } from "./utils/sanitizeTimeField.js";
+import "./utils/index.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { x } from "@xstyled/styled-components";
 import { i18n } from "@lingui/core";
-//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/Timepicker.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/Timepicker.tsx
 const Timepicker = ({ setTime, value, disabled }) => {
 	const hours = value?.getHours?.() ?? 0;
 	const minutes = value?.getMinutes?.() ?? 0;
@@ -18,6 +20,7 @@ const Timepicker = ({ setTime, value, disabled }) => {
 	const [minutesValue, setMinutesValue] = useState(padTime(minutes));
 	const isHoursEdited = useRef(false);
 	const isMinutesEdited = useRef(false);
+	const minutesRef = useRef(null);
 	useEffect(() => {
 		if (isHoursEdited.current) return;
 		setHoursValue(padTime(hours));
@@ -72,6 +75,8 @@ const Timepicker = ({ setTime, value, disabled }) => {
 		const parsed = parseTimeField(nextValue, NaN);
 		if (Number.isNaN(parsed) || parsed > 23) return;
 		commitTime("hours", parsed);
+		if (!isTimeFieldComplete(nextValue, parsed, 23)) return;
+		minutesRef.current?.focus();
 	}, [commitTime]);
 	const onMinutesChange = useCallback((e) => {
 		const nextValue = sanitizeTimeField(e.target.value);
@@ -93,17 +98,21 @@ const Timepicker = ({ setTime, value, disabled }) => {
 	}, []);
 	const onHoursBlur = useCallback(() => {
 		isHoursEdited.current = false;
-		const parsed = parseTimeField(hoursValue, NaN);
-		setHoursValue(padTime(!Number.isNaN(parsed) && parsed <= 23 ? parsed : hours));
-	}, [hoursValue, hours]);
+		setHoursValue((prev) => {
+			const parsed = parseTimeField(prev, NaN);
+			return padTime(!Number.isNaN(parsed) && parsed <= 23 ? parsed : hours);
+		});
+	}, [hours]);
 	const onMinutesBlur = useCallback(() => {
 		isMinutesEdited.current = false;
-		const parsed = parseTimeField(minutesValue, NaN);
-		setMinutesValue(padTime(!Number.isNaN(parsed) && parsed <= 59 ? parsed : minutes));
-	}, [minutesValue, minutes]);
+		setMinutesValue((prev) => {
+			const parsed = parseTimeField(prev, NaN);
+			return padTime(!Number.isNaN(parsed) && parsed <= 59 ? parsed : minutes);
+		});
+	}, [minutes]);
 	return /* @__PURE__ */ jsxs(FooterRow, {
 		disabled,
-		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Icon, { icon: "clock" }), /* @__PURE__ */ jsx(FooterRowLabel, { children: i18n._({
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Icon_default, { icon: "clock" }), /* @__PURE__ */ jsx(FooterRowLabel, { children: i18n._({
 			id: "dataGrid.filterCell.time",
 			message: "Time"
 		}) })] }), /* @__PURE__ */ jsx(x.div, {
@@ -147,6 +156,7 @@ const Timepicker = ({ setTime, value, disabled }) => {
 							children: ":"
 						}),
 						/* @__PURE__ */ jsx(TimeField, {
+							ref: minutesRef,
 							value: minutesValue,
 							disabled,
 							inputMode: "numeric",

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/constants.d.ts

@@ -3,3 +3,4 @@ export declare const MINUTES_COUNT = 60;
 export declare const MINUTES_STEP = 5;
 export declare const MAX_HOURS: number;
 export declare const MAX_MINUTES: number;
+export declare const TIME_FIELD_LENGTH = 2;

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/constants.js

@@ -1,8 +1,9 @@
-//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/constants.ts
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/constants.ts
 const HOURS_COUNT = 24;
 const MINUTES_COUNT = 60;
 const MINUTES_STEP = 5;
 const MAX_HOURS = 23;
 const MAX_MINUTES = 59;
+const TIME_FIELD_LENGTH = 2;
 //#endregion
-export { HOURS_COUNT, MAX_HOURS, MAX_MINUTES, MINUTES_COUNT, MINUTES_STEP };
+export { HOURS_COUNT, MAX_HOURS, MAX_MINUTES, MINUTES_COUNT, MINUTES_STEP, TIME_FIELD_LENGTH };

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/styles.js

@@ -1,6 +1,6 @@
 import styled$1 from "@xstyled/styled-components";
 import { th as th$1 } from "@xstyled/system";
-//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/styles.ts
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/styles.ts
 const TimeButton = styled$1.button`
   transform: rotate(90deg);
   font-size: 20px;
@@ -10,14 +10,20 @@ const TimeButton = styled$1.button`
   background-color: transparent !important;
   border: none;
   color: ${th$1("colors.lightGray4")};
+
   &:disabled:hover {
     color: ${th$1("colors.lightGray4")};
     cursor: default;
   }
+
   &:hover {
     color: ${th$1("colors.red2")};
     background-color: transparent !important;
   }
+
+  &:focus {
+    outline: none;
+  }
 `;
 const TimeWrapper = styled$1.div`
   display: flex;
@@ -39,7 +45,7 @@ const TimeField = styled$1.input`
   border: none;
   outline: none;
   background-color: transparent;
-  color: ${th$1("colors.blue2")};
+  color: typoPrimary;
   &:disabled {
     opacity: 0.5;
   }

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/utils/index.d.ts

@@ -1,3 +1,4 @@
 export { padTime } from './padTime';
+export { isTimeFieldComplete } from './isTimeFieldComplete';
 export { parseTimeField } from './parseTimeField';
 export { sanitizeTimeField } from './sanitizeTimeField';

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/utils/index.js

@@ -1,4 +1,5 @@
 import { padTime } from "./padTime.js";
+import { isTimeFieldComplete } from "./isTimeFieldComplete.js";
 import { parseTimeField } from "./parseTimeField.js";
 import { sanitizeTimeField } from "./sanitizeTimeField.js";
-export { padTime, parseTimeField, sanitizeTimeField };
+export { isTimeFieldComplete, padTime, parseTimeField, sanitizeTimeField };

package/ui/Forms/DatePicker/Datetime/components/Timepicker/utils/isTimeFieldComplete.d.ts

@@ -0,0 +1,3 @@
+type IsTimeFieldCompleteType = (text: string, value: number, max: number) => boolean;
+export declare const isTimeFieldComplete: IsTimeFieldCompleteType;
+export {};

package/ui/Forms/DatePicker/Datetime/components/Timepicker/utils/isTimeFieldComplete.js

@@ -0,0 +1,5 @@
+import "../constants.js";
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/utils/isTimeFieldComplete.ts
+const isTimeFieldComplete = (text, value, max) => text.length >= 2 || value * 10 > max;
+//#endregion
+export { isTimeFieldComplete };

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/utils/padTime.js

@@ -1,4 +1,4 @@
-//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/padTime.ts
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/utils/padTime.ts
 const padTime = (value) => String(value).padStart(2, "0");
 //#endregion
 export { padTime };

package/ui/{Elements → Forms}/DatePicker/Datetime/components/Timepicker/utils/parseTimeField.js

@@ -1,4 +1,4 @@
-//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/parseTimeField.ts
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/utils/parseTimeField.ts
 const parseTimeField = (text, fallback) => {
 	if (text === "") return fallback;
 	const parsed = Number(text);

package/ui/Forms/DatePicker/Datetime/components/Timepicker/utils/sanitizeTimeField.js

@@ -0,0 +1,5 @@
+import "../constants.js";
+//#region packages/ui/Forms/DatePicker/Datetime/components/Timepicker/utils/sanitizeTimeField.ts
+const sanitizeTimeField = (text) => text.replace(/\D/g, "").slice(0, 2);
+//#endregion
+export { sanitizeTimeField };

package/ui/{Elements → Forms}/DatePicker/Datetime/components/ViewNavigation.js

@@ -1,6 +1,6 @@
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/DatePicker/Datetime/components/ViewNavigation.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/components/ViewNavigation.tsx
 function ViewNavigation({ onClickPrev, onClickSwitch, onClickNext, switchContent, switchColSpan, switchProps, label }) {
 	return /* @__PURE__ */ jsxs("tr", { children: [
 		/* @__PURE__ */ jsx("th", {

package/ui/{Elements → Forms}/DatePicker/Datetime/types.js

@@ -1,4 +1,4 @@
-//#region packages/ui/Elements/DatePicker/Datetime/types.ts
+//#region packages/ui/Forms/DatePicker/Datetime/types.ts
 let DatePickerRepeat = /* @__PURE__ */ function(DatePickerRepeat) {
 	DatePickerRepeat["EVERY_TODAY"] = "every-today";
 	DatePickerRepeat["EVERY_YESTERDAY"] = "every-yesterday";

package/ui/{Elements → Forms}/DatePicker/Datetime/views/DaysView.js

@@ -4,7 +4,7 @@ import "../components/Timepicker/index.js";
 import ViewNavigation from "../components/ViewNavigation.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/DatePicker/Datetime/views/DaysView.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/views/DaysView.tsx
 var DaysView = class extends React.Component {
 	constructor(..._args) {
 		super(..._args);

package/ui/{Elements → Forms}/DatePicker/Datetime/views/MonthsView.js

@@ -1,7 +1,7 @@
 import ViewNavigation from "../components/ViewNavigation.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/DatePicker/Datetime/views/MonthsView.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/views/MonthsView.tsx
 var MonthsView = class extends React.Component {
 	constructor(..._args) {
 		super(..._args);

package/ui/{Elements → Forms}/DatePicker/Datetime/views/YearsView.js

@@ -1,7 +1,7 @@
 import ViewNavigation from "../components/ViewNavigation.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Elements/DatePicker/Datetime/views/YearsView.tsx
+//#region packages/ui/Forms/DatePicker/Datetime/views/YearsView.tsx
 var YearsView = class extends React.Component {
 	constructor(..._args) {
 		super(..._args);

package/ui/{Elements → Forms}/DatePicker/components/DatePickerInput/DatePickerInput.d.ts

@@ -1,7 +1,11 @@
-import { type FC, type InputHTMLAttributes } from 'react';
+import { type ChangeEvent, type FC, type InputHTMLAttributes } from 'react';
+type DatetimeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+    onChange?: (event: ChangeEvent<HTMLInputElement> | string) => void;
+};
 type DatePickerInputProps = {
-    inputProps: InputHTMLAttributes<HTMLInputElement>;
+    inputProps: DatetimeInputProps;
     openCalendar: () => void;
+    format: string;
     name?: string;
     label?: string;
     error?: string;

package/ui/Forms/DatePicker/components/DatePickerInput/DatePickerInput.js

@@ -0,0 +1,62 @@
+import Input_default from "../../../Input/index.js";
+import { applyDateMask } from "./utils/applyDateMask.js";
+import { countDigits } from "./utils/countDigits.js";
+import { getMaskedCaretPosition } from "./utils/getMaskedCaretPosition.js";
+import { isMaskableFormat } from "./utils/isMaskableFormat.js";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/ui/Forms/DatePicker/components/DatePickerInput/DatePickerInput.tsx
+const DatePickerInput = ({ inputProps, openCalendar, format, name, label, error, disabled, icon, showInputLabel, onClear, onInputChange }) => {
+	const [typedValue, setTypedValue] = useState(null);
+	const inputRef = useRef(null);
+	const caretPosition = useRef(null);
+	const isMasked = isMaskableFormat(format);
+	useLayoutEffect(() => {
+		if (caretPosition.current === null) return;
+		const caret = caretPosition.current;
+		caretPosition.current = null;
+		inputRef.current?.setSelectionRange(caret, caret);
+	});
+	const handleChange = useCallback((e) => {
+		if (!isMasked) {
+			setTypedValue(e.target.value);
+			inputProps.onChange?.(e);
+			onInputChange?.(e.target.value);
+			return;
+		}
+		const { value, selectionStart } = e.target;
+		const digitsBeforeCaret = countDigits(value.slice(0, selectionStart ?? value.length));
+		const maskedValue = applyDateMask(value, format);
+		caretPosition.current = getMaskedCaretPosition(maskedValue, digitsBeforeCaret);
+		setTypedValue(maskedValue);
+		inputProps.onChange?.(maskedValue);
+		onInputChange?.(maskedValue);
+	}, [
+		inputProps,
+		onInputChange,
+		isMasked,
+		format
+	]);
+	const handleBlur = useCallback(() => {
+		setTypedValue(null);
+	}, []);
+	return /* @__PURE__ */ jsx(Input_default, {
+		type: "text",
+		icon: icon ? "calendar" : void 0,
+		name,
+		error,
+		disabled,
+		isInvalid: !!error,
+		inputRef,
+		onChange: handleChange,
+		onBlur: handleBlur,
+		label: showInputLabel ? label : void 0,
+		value: typedValue ?? inputProps.value,
+		onFocus: openCalendar,
+		iconOnClick: openCalendar,
+		onClear,
+		autoComplete: "off"
+	});
+};
+//#endregion
+export { DatePickerInput };

package/ui/Forms/DatePicker/components/DatePickerInput/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const MASKABLE_TOKENS: string[];
+export declare const DIGIT_PATTERN: RegExp;
+export declare const FORMAT_SLOT_PATTERN: RegExp;
+export declare const NON_DIGIT_PATTERN: RegExp;
+export declare const FORMAT_TOKEN_PATTERN: RegExp;

package/ui/Forms/DatePicker/components/DatePickerInput/constants.js

@@ -0,0 +1,16 @@
+//#region packages/ui/Forms/DatePicker/components/DatePickerInput/constants.ts
+const MASKABLE_TOKENS = [
+	"DD",
+	"MM",
+	"YY",
+	"YYYY",
+	"HH",
+	"mm",
+	"ss"
+];
+const DIGIT_PATTERN = /\d/;
+const FORMAT_SLOT_PATTERN = /[A-Za-z]/;
+const NON_DIGIT_PATTERN = /\D/g;
+const FORMAT_TOKEN_PATTERN = /[A-Za-z]+/g;
+//#endregion
+export { DIGIT_PATTERN, FORMAT_SLOT_PATTERN, FORMAT_TOKEN_PATTERN, MASKABLE_TOKENS, NON_DIGIT_PATTERN };

package/ui/Forms/DatePicker/components/DatePickerInput/utils/applyDateMask.d.ts

@@ -0,0 +1,3 @@
+type ApplyDateMaskType = (value: string, format: string) => string;
+export declare const applyDateMask: ApplyDateMaskType;
+export {};

package/ui/Forms/DatePicker/components/DatePickerInput/utils/applyDateMask.js

@@ -0,0 +1,19 @@
+import { FORMAT_SLOT_PATTERN, NON_DIGIT_PATTERN } from "../constants.js";
+//#region packages/ui/Forms/DatePicker/components/DatePickerInput/utils/applyDateMask.ts
+const applyDateMask = (value, format) => {
+	const digits = value.replace(NON_DIGIT_PATTERN, "");
+	let masked = "";
+	let digitIndex = 0;
+	for (const char of format) {
+		if (digitIndex >= digits.length) break;
+		if (FORMAT_SLOT_PATTERN.test(char)) {
+			masked += digits[digitIndex];
+			digitIndex += 1;
+			continue;
+		}
+		masked += char;
+	}
+	return masked;
+};
+//#endregion
+export { applyDateMask };

package/ui/Forms/DatePicker/components/DatePickerInput/utils/countDigits.d.ts

@@ -0,0 +1,3 @@
+type CountDigitsType = (text: string) => number;
+export declare const countDigits: CountDigitsType;
+export {};

package/ui/Forms/DatePicker/components/DatePickerInput/utils/countDigits.js

@@ -0,0 +1,5 @@
+import { NON_DIGIT_PATTERN } from "../constants.js";
+//#region packages/ui/Forms/DatePicker/components/DatePickerInput/utils/countDigits.ts
+const countDigits = (text) => text.replace(NON_DIGIT_PATTERN, "").length;
+//#endregion
+export { countDigits };

package/ui/Forms/DatePicker/components/DatePickerInput/utils/getMaskedCaretPosition.d.ts

@@ -0,0 +1,3 @@
+type GetMaskedCaretPositionType = (maskedValue: string, digitsBeforeCaret: number) => number;
+export declare const getMaskedCaretPosition: GetMaskedCaretPositionType;
+export {};

package/ui/Forms/DatePicker/components/DatePickerInput/utils/getMaskedCaretPosition.js

@@ -0,0 +1,14 @@
+import { DIGIT_PATTERN } from "../constants.js";
+//#region packages/ui/Forms/DatePicker/components/DatePickerInput/utils/getMaskedCaretPosition.ts
+const getMaskedCaretPosition = (maskedValue, digitsBeforeCaret) => {
+	if (digitsBeforeCaret <= 0) return 0;
+	let digits = 0;
+	for (let index = 0; index < maskedValue.length; index += 1) {
+		if (!DIGIT_PATTERN.test(maskedValue[index])) continue;
+		digits += 1;
+		if (digits === digitsBeforeCaret) return index + 1;
+	}
+	return maskedValue.length;
+};
+//#endregion
+export { getMaskedCaretPosition };

package/ui/Forms/DatePicker/components/DatePickerInput/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { applyDateMask } from './applyDateMask';
+export { countDigits } from './countDigits';
+export { getMaskedCaretPosition } from './getMaskedCaretPosition';
+export { isMaskableFormat } from './isMaskableFormat';

package/ui/Forms/DatePicker/components/DatePickerInput/utils/index.js

@@ -0,0 +1,5 @@
+import { applyDateMask } from "./applyDateMask.js";
+import { countDigits } from "./countDigits.js";
+import { getMaskedCaretPosition } from "./getMaskedCaretPosition.js";
+import { isMaskableFormat } from "./isMaskableFormat.js";
+export { applyDateMask, countDigits, getMaskedCaretPosition, isMaskableFormat };

package/ui/Forms/DatePicker/components/DatePickerInput/utils/isMaskableFormat.d.ts

@@ -0,0 +1,3 @@
+type IsMaskableFormatType = (format: string) => boolean;
+export declare const isMaskableFormat: IsMaskableFormatType;
+export {};

package/ui/Forms/DatePicker/components/DatePickerInput/utils/isMaskableFormat.js

@@ -0,0 +1,9 @@
+import { FORMAT_TOKEN_PATTERN, MASKABLE_TOKENS } from "../constants.js";
+//#region packages/ui/Forms/DatePicker/components/DatePickerInput/utils/isMaskableFormat.ts
+const isMaskableFormat = (format) => {
+	const tokens = format.match(FORMAT_TOKEN_PATTERN);
+	if (!tokens?.length) return false;
+	return tokens.every((token) => MASKABLE_TOKENS.includes(token));
+};
+//#endregion
+export { isMaskableFormat };

package/ui/{Elements → Forms}/DatePicker/index.js

@@ -1,6 +1,6 @@
 import { DatePickerRepeat, TimePickerRepeat } from "./Datetime/types.js";
 import DatePicker_default$1 from "./DatePicker.js";
-//#region packages/ui/Elements/DatePicker/index.ts
+//#region packages/ui/Forms/DatePicker/index.ts
 var DatePicker_default = DatePicker_default$1;
 //#endregion
 export { DatePickerRepeat, TimePickerRepeat, DatePicker_default as default };

package/ui/Forms/DatePicker/stories/hooks/useOnChange.d.ts

@@ -0,0 +1,5 @@
+import type { Moment } from 'moment';
+export declare const useOnChange: () => {
+    value: string | Date;
+    handleChange: (next: string | Date | Moment) => void;
+};

package/ui/Forms/DatePicker/stories/hooks/useOnChange.js

@@ -0,0 +1,13 @@
+import { useCallback, useState } from "react";
+//#region packages/ui/Forms/DatePicker/stories/hooks/useOnChange.ts
+const useOnChange = () => {
+	const [value, setValue] = useState("");
+	return {
+		value,
+		handleChange: useCallback((next) => {
+			setValue(next);
+		}, [])
+	};
+};
+//#endregion
+export { useOnChange };

package/ui/{Elements → Forms}/DatePicker/styles.js

@@ -1,6 +1,6 @@
 import styled$1, { x } from "@xstyled/styled-components";
 import { th as th$1 } from "@xstyled/system";
-//#region packages/ui/Elements/DatePicker/styles.ts
+//#region packages/ui/Forms/DatePicker/styles.ts
 const DatePickerBase = styled$1(x.div)`
   .rdt {
     position: relative;
@@ -10,8 +10,8 @@ const DatePickerBase = styled$1(x.div)`
     position: absolute;
     z-index: 1;
     min-width: 250px;
-    color: #22394E;
-    background: #ffffff;
+    color: typoPrimary;
+    background-color: white;
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 10px;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
@@ -44,6 +44,10 @@ const DatePickerBase = styled$1(x.div)`
   .rdtPicker td {
     padding: 0 0.8rem;
   }
+  .rdtDay:not(.rdtActiveRange):hover {
+    border-radius: 0.5rem;
+  }
+
   .rdtPicker .rdtCounter .rdtBtn:hover,
   .rdtPicker .rdtYear:hover,
   .rdtPicker .rdtMonth:hover,
@@ -54,11 +58,12 @@ const DatePickerBase = styled$1(x.div)`
   .rdtPicker .rdtTimeToggle:hover,
   .rdtPicker .rdtSwitch:hover {
     background: #f8f9fa;
+    color: gray4;
     cursor: pointer;
   }
   .rdtPicker .rdtOld,
   .rdtPicker .rdtNew {
-    color: rgba(33, 37, 41, 0.3);
+    color: lightGray4;
   }
   .rdtPicker .rdtToday {
     position: relative;
@@ -191,7 +196,7 @@ const DatePickerBase = styled$1(x.div)`
   }
 
   .rdtPicker .rdtActiveRange {
-    background: #EFF3F8;
+    background-color: lightGray6;
   }
 
   .rdtPicker .rdtCounters > div :first-child {

package/ui/Forms/DatePicker/utils/constants.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerRepeat, TimePickerRepeat } from '../Datetime/types';
+export declare const DatePickerRepeatTrans: () => Record<DatePickerRepeat, string>;
+export declare const TimePickerRepeatTrans: () => Record<TimePickerRepeat, string>;

package/ui/{Elements → Forms}/DatePicker/utils/constants.js

@@ -1,7 +1,7 @@
 import "../Datetime/types.js";
 import { i18n } from "@lingui/core";
-//#region packages/ui/Elements/DatePicker/utils/constants.ts
-const DatePickerRepeatTrans = {
+//#region packages/ui/Forms/DatePicker/utils/constants.ts
+const DatePickerRepeatTrans = () => ({
 	["every-today"]: i18n._({
 		id: "dataGrid.everyToday",
 		message: "Every today"
@@ -10,8 +10,8 @@ const DatePickerRepeatTrans = {
 		id: "dataGrid.everyYesterday",
 		message: "Every yesterday"
 	})
-};
-const TimePickerRepeatTrans = {
+});
+const TimePickerRepeatTrans = () => ({
 	["from"]: i18n._({
 		id: "dataGrid.timepicker.from",
 		message: "from"
@@ -24,6 +24,6 @@ const TimePickerRepeatTrans = {
 		id: "dataGrid.timepicker.at",
 		message: "at"
 	})
-};
+});
 //#endregion
 export { DatePickerRepeatTrans, TimePickerRepeatTrans };

package/ui/Forms/DatePicker/utils/getInputFormat.d.ts

@@ -0,0 +1,3 @@
+type GetInputFormatType = (dateFormat?: boolean | string, timeFormat?: boolean | string) => string;
+export declare const getInputFormat: GetInputFormatType;
+export {};

package/ui/Forms/DatePicker/utils/getInputFormat.js

@@ -0,0 +1,10 @@
+//#region packages/ui/Forms/DatePicker/utils/getInputFormat.ts
+const getInputFormat = (dateFormat, timeFormat) => {
+	const date = typeof dateFormat === "string" ? dateFormat : "";
+	const time = typeof timeFormat === "string" ? timeFormat : "";
+	if (!date) return time;
+	if (!time) return date;
+	return `${date} ${time}`;
+};
+//#endregion
+export { getInputFormat };

package/ui/Forms/Input/styles.js

@@ -19,7 +19,7 @@ const InputIcon = styled$1.div`
   svg {
     stroke: lightGray3;
     cursor: pointer;
-    color: ${({ $isInvalid, hasValue, disabled }) => $isInvalid ? th.color("inputErrorColor") : disabled || !hasValue ? th.color("lightGray6") : th.color("blue2")};
+    color: ${({ $isInvalid, hasValue, disabled }) => $isInvalid ? th.color("inputErrorColor") : disabled || !hasValue ? th.color("lightGray6") : th.color("typoPrimary")};
   }
 `;
 const ClearableInputIcon = styled$1(InputIcon)`
@@ -60,12 +60,6 @@ const StyledInput = styled$1.input.attrs((props) => ({ as: props.$asTextArea ? "
   resize: none;
   overflow: hidden;
 
-  ~ ${InputIcon} {
-    svg {
-      stroke: lightGray3;
-    }
-  }
-
   ::placeholder {
     color: gray1;
     opacity: 1;
@@ -79,8 +73,8 @@ const StyledInput = styled$1.input.attrs((props) => ({ as: props.$asTextArea ? "
 
     ~ ${InputIcon} {
       svg {
-        stroke: blue2;
-        color: blue2;
+        stroke: typoPrimary; 
+        color: typoPrimary;
       }
     }
   }

package/ui/Modules/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.d.ts

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import type { DateTimeOthers } from '../../../../../Elements/DatePicker/Datetime/types';
+import type { DateTimeOthers } from '../../../../../Forms/DatePicker/Datetime/types';
 import type { FilterComponentProps } from '../../../types';
 type InitialView = 'past' | 'future';
 type DatePickerRangeProps = FilterComponentProps<Date[]> & {

package/ui/Modules/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.js

@@ -1,6 +1,6 @@
 import { useClickOutside } from "../../../../../Blocks/Modal/hooks/useClickOutside.js";
 import Input_default from "../../../../../Forms/Input/index.js";
-import DatePicker_default from "../../../../../Elements/DatePicker/index.js";
+import DatePicker_default from "../../../../../Forms/DatePicker/index.js";
 import { getCleanValues } from "./utils/getCleanValues.js";
 import { pickerRangeToString } from "./utils/pickerRangeToString.js";
 import React, { useCallback, useMemo, useState } from "react";

package/ui/Modules/CommonGrid/components/Filters/DatePickerRange/utils/pickerRangeToString.d.ts

@@ -1,2 +1,2 @@
-import type { DateTimeOthers } from '../../../../../../Elements/DatePicker/Datetime/types';
+import type { DateTimeOthers } from '../../../../../../Forms/DatePicker/Datetime/types';
 export declare const pickerRangeToString: (values?: Date[], others?: DateTimeOthers[]) => string;

package/ui/Modules/CommonGrid/components/Filters/DatePickerRange/utils/pickerRangeToString.js

@@ -1,12 +1,12 @@
-import { DatePickerRepeatTrans, TimePickerRepeatTrans } from "../../../../../../Elements/DatePicker/utils/constants.js";
+import { DatePickerRepeatTrans, TimePickerRepeatTrans } from "../../../../../../Forms/DatePicker/utils/constants.js";
 import { sameDate } from "./sameDate.js";
 import { DateTime } from "luxon";
 //#region packages/ui/Modules/CommonGrid/components/Filters/DatePickerRange/utils/pickerRangeToString.ts
 const pickerRangeToString = (values = [], others) => {
 	if (others?.[0]?.dateTypeRepeater || others?.[1]?.dateTypeRepeater) return others.map((other, i) => {
 		if (!other?.dateTypeRepeater) return values[i] && DateTime.fromJSDate(values[i]).toFormat("dd.LL.yyyy HH:mm");
-		const repeaterDate = DatePickerRepeatTrans[other?.dateTypeRepeater];
-		return `${i === 0 ? TimePickerRepeatTrans.from : TimePickerRepeatTrans.to} ${repeaterDate} ${other?.time ? `${String(other?.time.h).padStart(2, "0")}:${String(other?.time.m).padStart(2, "0")}` : ""}`.trim();
+		const repeaterDate = DatePickerRepeatTrans()[other?.dateTypeRepeater];
+		return `${i === 0 ? TimePickerRepeatTrans().from : TimePickerRepeatTrans().to} ${repeaterDate} ${other?.time ? `${String(other?.time.h).padStart(2, "0")}:${String(other?.time.m).padStart(2, "0")}` : ""}`.trim();
 	}).filter(Boolean).join(" - ");
 	if (!values[0] && !values[1]) return "";
 	if (values[0] && !values[1] || sameDate(values[0], values[1])) return DateTime.fromJSDate(values[0]).toFormat("dd.LL.yyyy");

package/ui/index.d.ts

@@ -17,7 +17,6 @@ import Badge from './Elements/Badge';
 import BorderedBox from './Elements/BorderedBox';
 import Button from './Elements/Button';
 import Card from './Elements/Card';
-import DatePicker from './Elements/DatePicker';
 import Dropdown from './Elements/Dropdown';
 import DropdownSelect from './Elements/DropdownSelect';
 import ErrorMessage from './Elements/ErrorMessage';
@@ -39,6 +38,7 @@ import Tag from './Elements/Tag';
 import Toast from './Elements/Toast';
 import Toggle from './Elements/Toggle';
 import Typography from './Elements/Typography';
+import DatePicker from './Forms/DatePicker';
 import Checkbox from './Forms/Checkbox';
 import Input from './Forms/Input';
 import RadioButton from './Forms/RadioButton';
@@ -81,7 +81,7 @@ export * from './Forms/Input';
 export * from './Forms/RadioButton';
 export * from './ThemeProvider';
 export * from './utils';
-export * from './Elements/DatePicker';
+export * from './Forms/DatePicker';
 export * from './Modules/CommonGrid';
 export * from './Blocks/Popover';
 export * from './Elements/SingleSelect';

package/ui/index.js

@@ -133,9 +133,9 @@ import SpaceAroundWrap from "./Elements/SpaceAround/SpaceAround.js";
 import SpaceAround_default from "./Elements/SpaceAround/index.js";
 import Select_default from "./Elements/Select/index.js";
 import SingleSelect_default from "./Elements/SingleSelect/index.js";
-import { DatePickerRepeat, TimePickerRepeat } from "./Elements/DatePicker/Datetime/types.js";
+import { DatePickerRepeat, TimePickerRepeat } from "./Forms/DatePicker/Datetime/types.js";
 import Input_default from "./Forms/Input/index.js";
-import DatePicker_default from "./Elements/DatePicker/index.js";
+import DatePicker_default from "./Forms/DatePicker/index.js";
 import { useEvent } from "./Modules/CommonGrid/hooks/useEvent.js";
 import { useAddFilter } from "./Modules/CommonGrid/hooks/useAddFilter.js";
 import { types_exports } from "./Modules/CommonGrid/types.js";

package/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/sanitizeTimeField.js

@@ -1,4 +0,0 @@
-//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/sanitizeTimeField.ts
-const sanitizeTimeField = (text) => text.replace(/\D/g, "").slice(0, 2);
-//#endregion
-export { sanitizeTimeField };

package/ui/Elements/DatePicker/components/DatePickerInput/DatePickerInput.js

@@ -1,33 +0,0 @@
-import Input_default from "../../../../Forms/Input/index.js";
-import { useCallback, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Elements/DatePicker/components/DatePickerInput/DatePickerInput.tsx
-const DatePickerInput = ({ inputProps, openCalendar, name, label, error, disabled, icon, showInputLabel, onClear, onInputChange }) => {
-	const [typedValue, setTypedValue] = useState(null);
-	const handleChange = useCallback((e) => {
-		setTypedValue(e.target.value);
-		inputProps.onChange?.(e);
-		onInputChange?.(e.target.value);
-	}, [inputProps, onInputChange]);
-	const handleBlur = useCallback(() => {
-		setTypedValue(null);
-	}, []);
-	return /* @__PURE__ */ jsx(Input_default, {
-		type: "text",
-		icon: icon ? "calendar" : void 0,
-		name,
-		error,
-		disabled,
-		isInvalid: !!error,
-		onChange: handleChange,
-		onBlur: handleBlur,
-		label: showInputLabel ? label : void 0,
-		value: typedValue ?? inputProps.value,
-		onFocus: openCalendar,
-		iconOnClick: openCalendar,
-		onClear,
-		autoComplete: "off"
-	});
-};
-//#endregion
-export { DatePickerInput };

package/ui/Elements/DatePicker/utils/constants.d.ts

@@ -1,3 +0,0 @@
-import { DatePickerRepeat, TimePickerRepeat } from '../Datetime/types';
-export declare const DatePickerRepeatTrans: Record<DatePickerRepeat, string>;
-export declare const TimePickerRepeatTrans: Record<TimePickerRepeat, string>;