@mailstep/design-system 0.10.7 → 0.11.1

package/package.json

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

package/ui/Blocks/ImageList/components/AddPhoto/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const IMAGE_MIME_PREFIX = "image/";
+export declare const INVALID_FORMAT_MESSAGE = "Unsupported file format";

package/ui/Blocks/ImageList/components/AddPhoto/constants.js

@@ -0,0 +1,5 @@
+//#region packages/ui/Blocks/ImageList/components/AddPhoto/constants.ts
+const IMAGE_MIME_PREFIX = "image/";
+const INVALID_FORMAT_MESSAGE = "Unsupported file format";
+//#endregion
+export { IMAGE_MIME_PREFIX, INVALID_FORMAT_MESSAGE };

package/ui/Blocks/ImageList/components/AddPhoto/hooks/useImageUpload.d.ts

@@ -0,0 +1,11 @@
+import { type ChangeEvent } from 'react';
+import { type ImageUploadProps } from '../../../types';
+type Props = {
+    onImageUpload?: (props: ImageUploadProps) => Promise<void>;
+};
+type HookType = (props: Props) => {
+    handleImageUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+    hasInvalidFormat: boolean;
+};
+export declare const useImageUpload: HookType;
+export {};

package/ui/Blocks/ImageList/components/AddPhoto/hooks/useImageUpload.js

@@ -0,0 +1,34 @@
+import "../constants.js";
+import { useCallback, useState } from "react";
+//#region packages/ui/Blocks/ImageList/components/AddPhoto/hooks/useImageUpload.ts
+const useImageUpload = ({ onImageUpload }) => {
+	const [hasInvalidFormat, setHasInvalidFormat] = useState(false);
+	return {
+		handleImageUpload: useCallback((event) => {
+			const input = event.target;
+			const file = input?.files?.[0];
+			if (!file) {
+				setHasInvalidFormat(false);
+				return;
+			}
+			if (!file.type.startsWith("image/")) {
+				input.value = "";
+				setHasInvalidFormat(true);
+				return;
+			}
+			setHasInvalidFormat(false);
+			const reader = new FileReader();
+			reader.readAsDataURL(file);
+			reader.onload = async () => {
+				await onImageUpload?.({
+					base64image: reader.result?.split(",").pop(),
+					base64WithDataDeclaration: reader.result,
+					file
+				});
+			};
+		}, [onImageUpload]),
+		hasInvalidFormat
+	};
+};
+//#endregion
+export { useImageUpload };

package/ui/Blocks/ImageList/components/AddPhoto/index.d.ts

@@ -1,9 +1,9 @@
 import { type FC } from 'react';
 import { type ImageUploadProps } from '../../types';
-interface AddPhotoProps {
+type AddPhotoProps = {
     onImageUpload?: (props: ImageUploadProps) => Promise<void>;
     isDisabled?: boolean;
     hasRemove?: boolean;
-}
+};
 export declare const AddPhoto: FC<AddPhotoProps>;
 export {};

package/ui/Blocks/ImageList/components/AddPhoto/index.js

@@ -1,29 +1,15 @@
 import { AddPhoto as AddPhoto$1 } from "../../../../Elements/Icon/icons/AddPhoto.js";
-import { Container, HiddenInput } from "./styles.js";
-import { useCallback } from "react";
+import ErrorMessage from "../../../../Elements/ErrorMessage/ErrorMessage.js";
+import "../../../../Elements/ErrorMessage/index.js";
+import "./constants.js";
+import { useImageUpload } from "./hooks/useImageUpload.js";
+import { Container, ErrorWrapper, HiddenInput, Wrapper } from "./styles.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/ImageList/components/AddPhoto/index.tsx
-const IMAGE_MIME_PREFIX = "image/";
 const AddPhoto = ({ onImageUpload, isDisabled, hasRemove }) => {
-	const handleImageUpload = useCallback((event) => {
-		const input = event.target;
-		const file = input?.files?.[0];
-		if (!file?.type.startsWith(IMAGE_MIME_PREFIX)) {
-			input.value = "";
-			return;
-		}
-		const reader = new FileReader();
-		reader.readAsDataURL(file);
-		reader.onload = async () => {
-			await onImageUpload?.({
-				base64image: reader.result?.split(",").pop(),
-				base64WithDataDeclaration: reader.result,
-				file
-			});
-		};
-	}, [onImageUpload]);
+	const { handleImageUpload, hasInvalidFormat } = useImageUpload({ onImageUpload });
 	if (!onImageUpload) return null;
-	return /* @__PURE__ */ jsxs(Container, {
+	return /* @__PURE__ */ jsxs(Wrapper, { children: [/* @__PURE__ */ jsxs(Container, {
 		isDisabled,
 		hasRemove,
 		children: [/* @__PURE__ */ jsx(HiddenInput, {
@@ -36,7 +22,13 @@ const AddPhoto = ({ onImageUpload, isDisabled, hasRemove }) => {
 			width: "36",
 			height: "36"
 		})]
-	});
+	}), hasInvalidFormat && /* @__PURE__ */ jsx(ErrorWrapper, {
+		hasRemove,
+		children: /* @__PURE__ */ jsx(ErrorMessage, {
+			appearance: "inline",
+			children: "Unsupported file format"
+		})
+	})] });
 };
 //#endregion
 export { AddPhoto };

package/ui/Blocks/ImageList/components/AddPhoto/styles.d.ts

@@ -3,3 +3,7 @@ export declare const Container: import("styled-components").StyledComponent<"div
     hasRemove?: boolean;
 }, never>;
 export declare const HiddenInput: import("styled-components").StyledComponent<"input", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ErrorWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {
+    hasRemove?: boolean;
+}, never>;

package/ui/Blocks/ImageList/components/AddPhoto/styles.js

@@ -26,5 +26,17 @@ const HiddenInput = styled$1.input`
   height: 100%;
   cursor: pointer;
 `;
+const Wrapper = styled$1.div`
+  position: relative;
+  flex-shrink: 0;
+`;
+const ErrorWrapper = styled$1.div`
+  position: absolute;
+  top: ${({ hasRemove }) => hasRemove ? "100px" : "85px"};
+  left: 0;
+  width: 85px;
+  line-height: 1.2;
+  text-align: center;
+`;
 //#endregion
-export { Container, HiddenInput };
+export { Container, ErrorWrapper, HiddenInput, Wrapper };

package/ui/Blocks/Tabs/hooks/useTabs.d.ts

@@ -1,2 +1,2 @@
-import { UseTabsHook } from '../types';
+import type { UseTabsHook } from '../types';
 export declare const useTabs: UseTabsHook;

package/ui/Blocks/Tabs/hooks/useTabs.js

@@ -1,13 +1,25 @@
+import "../utils/constants.js";
+import { getInitialTab } from "../utils/getInitialTab.js";
+import { writeTabToUrl } from "../utils/writeTabToUrl.js";
 import { useCallback, useState } from "react";
 //#region packages/ui/Blocks/Tabs/hooks/useTabs.ts
-const useTabs = (tabDefinitions) => {
-	const index = tabDefinitions.map((item) => item.default).indexOf(true);
-	const [activeTab, setActiveTab] = useState(index === -1 ? 0 : index);
+const useTabs = (tabsDefinition, options = {}) => {
+	const { syncWithUrl = false, queryParam = "tab" } = options;
+	const [activeTab, setActiveTab] = useState(() => getInitialTab({
+		tabsDefinition,
+		syncWithUrl,
+		queryParam
+	}));
 	return {
 		activeTab,
 		onTabSwitch: useCallback((value) => {
 			setActiveTab(value);
-		}, [])
+			if (!syncWithUrl) return;
+			writeTabToUrl({
+				value,
+				queryParam
+			});
+		}, [syncWithUrl, queryParam])
 	};
 };
 //#endregion

package/ui/Blocks/Tabs/index.d.ts

@@ -1,5 +1,5 @@
 import { Tabs } from './Tabs';
 export { TabContent } from './TabContent';
 export { useTabs } from './hooks/useTabs';
-export type { TabDefinition } from './types';
+export type { TabDefinition, UseTabsOptions } from './types';
 export default Tabs;

package/ui/Blocks/Tabs/types.d.ts

@@ -21,7 +21,11 @@ export type TabElementProps = {
     onTabSwitch: (tab: number) => void;
     minWidth?: string | string[];
 };
-export type UseTabsHook = (tabDefinitions: TabDefinition[]) => {
+export type UseTabsOptions = {
+    syncWithUrl?: boolean;
+    queryParam?: string;
+};
+export type UseTabsHook = (tabsDefinition: TabDefinition[], options?: UseTabsOptions) => {
     activeTab: number;
     onTabSwitch: (tab: number) => void;
 };

package/ui/Blocks/Tabs/utils/constants.d.ts

@@ -0,0 +1 @@
+export declare const TAB_PARAM = "tab";

package/ui/Blocks/Tabs/utils/constants.js

@@ -0,0 +1,4 @@
+//#region packages/ui/Blocks/Tabs/utils/constants.ts
+const TAB_PARAM = "tab";
+//#endregion
+export { TAB_PARAM };

package/ui/Blocks/Tabs/utils/getDefaultTab.d.ts

@@ -0,0 +1,4 @@
+import type { TabDefinition } from '../types';
+type GetDefaultTabType = (tabsDefinition: TabDefinition[]) => number;
+export declare const getDefaultTab: GetDefaultTabType;
+export {};

package/ui/Blocks/Tabs/utils/getDefaultTab.js

@@ -0,0 +1,7 @@
+//#region packages/ui/Blocks/Tabs/utils/getDefaultTab.ts
+const getDefaultTab = (tabsDefinition) => {
+	const index = tabsDefinition.map((item) => item.default).indexOf(true);
+	return index === -1 ? 0 : index;
+};
+//#endregion
+export { getDefaultTab };

package/ui/Blocks/Tabs/utils/getInitialTab.d.ts

@@ -0,0 +1,9 @@
+import type { TabDefinition } from '../types';
+type GetInitialTabProps = {
+    tabsDefinition: TabDefinition[];
+    syncWithUrl: boolean;
+    queryParam: string;
+};
+type GetInitialTabType = (props: GetInitialTabProps) => number;
+export declare const getInitialTab: GetInitialTabType;
+export {};

package/ui/Blocks/Tabs/utils/getInitialTab.js

@@ -0,0 +1,12 @@
+import { getDefaultTab } from "./getDefaultTab.js";
+import { readTabFromUrl } from "./readTabFromUrl.js";
+//#region packages/ui/Blocks/Tabs/utils/getInitialTab.ts
+const getInitialTab = ({ tabsDefinition, syncWithUrl, queryParam }) => {
+	if (!syncWithUrl) return getDefaultTab(tabsDefinition);
+	return readTabFromUrl({
+		tabsDefinition,
+		queryParam
+	}) ?? getDefaultTab(tabsDefinition);
+};
+//#endregion
+export { getInitialTab };

package/ui/Blocks/Tabs/utils/index.d.ts

@@ -0,0 +1,6 @@
+export { TAB_PARAM } from './constants';
+export { getDefaultTab } from './getDefaultTab';
+export { getInitialTab } from './getInitialTab';
+export { isSelectableTab } from './isSelectableTab';
+export { readTabFromUrl } from './readTabFromUrl';
+export { writeTabToUrl } from './writeTabToUrl';

package/ui/Blocks/Tabs/utils/index.js

@@ -0,0 +1,7 @@
+import { TAB_PARAM } from "./constants.js";
+import { getDefaultTab } from "./getDefaultTab.js";
+import { isSelectableTab } from "./isSelectableTab.js";
+import { readTabFromUrl } from "./readTabFromUrl.js";
+import { getInitialTab } from "./getInitialTab.js";
+import { writeTabToUrl } from "./writeTabToUrl.js";
+export { TAB_PARAM, getDefaultTab, getInitialTab, isSelectableTab, readTabFromUrl, writeTabToUrl };

package/ui/Blocks/Tabs/utils/isSelectableTab.d.ts

@@ -0,0 +1,8 @@
+import type { TabDefinition } from '../types';
+type IsSelectableTabProps = {
+    tabsDefinition: TabDefinition[];
+    value: number;
+};
+type IsSelectableTabType = (props: IsSelectableTabProps) => boolean;
+export declare const isSelectableTab: IsSelectableTabType;
+export {};

package/ui/Blocks/Tabs/utils/isSelectableTab.js

@@ -0,0 +1,7 @@
+//#region packages/ui/Blocks/Tabs/utils/isSelectableTab.ts
+const isSelectableTab = ({ tabsDefinition, value }) => {
+	const tab = tabsDefinition[value];
+	return Boolean(tab) && !tab.disabled;
+};
+//#endregion
+export { isSelectableTab };

package/ui/Blocks/Tabs/utils/readTabFromUrl.d.ts

@@ -0,0 +1,8 @@
+import type { TabDefinition } from '../types';
+type ReadTabFromUrlProps = {
+    tabsDefinition: TabDefinition[];
+    queryParam: string;
+};
+type ReadTabFromUrlType = (props: ReadTabFromUrlProps) => number | null;
+export declare const readTabFromUrl: ReadTabFromUrlType;
+export {};

package/ui/Blocks/Tabs/utils/readTabFromUrl.js

@@ -0,0 +1,16 @@
+import { isSelectableTab } from "./isSelectableTab.js";
+//#region packages/ui/Blocks/Tabs/utils/readTabFromUrl.ts
+const readTabFromUrl = ({ tabsDefinition, queryParam }) => {
+	if (typeof window === "undefined") return null;
+	const raw = new URLSearchParams(window.location.search).get(queryParam);
+	if (raw === null || raw.trim() === "") return null;
+	const value = Number(raw);
+	if (!Number.isInteger(value)) return null;
+	if (!isSelectableTab({
+		tabsDefinition,
+		value
+	})) return null;
+	return value;
+};
+//#endregion
+export { readTabFromUrl };

package/ui/Blocks/Tabs/utils/writeTabToUrl.d.ts

@@ -0,0 +1,7 @@
+type WriteTabToUrlProps = {
+    value: number;
+    queryParam: string;
+};
+type WriteTabToUrlType = (props: WriteTabToUrlProps) => void;
+export declare const writeTabToUrl: WriteTabToUrlType;
+export {};

package/ui/Blocks/Tabs/utils/writeTabToUrl.js

@@ -0,0 +1,10 @@
+//#region packages/ui/Blocks/Tabs/utils/writeTabToUrl.ts
+const writeTabToUrl = ({ value, queryParam }) => {
+	if (typeof window === "undefined") return;
+	const url = new URL(window.location.href);
+	if (url.searchParams.get(queryParam) === String(value)) return;
+	url.searchParams.set(queryParam, String(value));
+	window.history.replaceState(null, "", `${url.pathname}${url.search}${url.hash}`);
+};
+//#endregion
+export { writeTabToUrl };

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

@@ -22,7 +22,7 @@ export type DatePickerType = DatetimepickerProps & {
     isSecondDatePicker?: boolean;
     others?: DateTimeOthers;
     onClear?: () => void;
-    onInputChange?: () => void;
+    onInputChange?: (value: string) => void;
     onChangeOthers?: (others: DateTimeOthers) => void;
 };
 declare const _default: React.NamedExoticComponent<DatePickerType>;

package/ui/Elements/DatePicker/DatePicker.js

@@ -1,12 +1,12 @@
 import { LanguageContext } from "../../ThemeProvider/ThemeProvider.js";
 import SpaceAround_default from "../SpaceAround/index.js";
-import Input_default from "../../Forms/Input/index.js";
 import Datetime from "./Datetime/DateTime.js";
+import { DatePickerInput } from "./components/DatePickerInput/DatePickerInput.js";
+import "./components/DatePickerInput/index.js";
 import { DatePickerBase } from "./styles.js";
 import React, { useCallback, useContext } from "react";
 import { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
-import moment from "moment";
 import "moment/dist/locale/cs";
 import "moment/dist/locale/el";
 import "moment/dist/locale/it";
@@ -15,34 +15,27 @@ import "moment/dist/locale/sk";
 //#region packages/ui/Elements/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 format = `${dateFormat}${timeFormat ? ` ${timeFormat}` : ``}`;
-	const isValid = !!value && moment(value, format, true).isValid();
-	const stringValue = isValid ? moment(value, format).format(format) : value;
 	const locale = useContext(LanguageContext);
-	const handleRenderInput = useCallback((_, openCalendar) => {
-		return /* @__PURE__ */ jsx(Input_default, {
-			type: "text",
-			icon: icon ? "calendar" : void 0,
-			name,
-			error,
-			disabled,
-			isInvalid: !!error,
-			onChange: onInputChange,
-			label: showInputLabel ? label : void 0,
-			value: stringValue,
-			onFocus: openCalendar,
-			iconOnClick: openCalendar,
-			onClear,
-			autoComplete: "off"
-		});
-	}, [
+	const handleRenderInput = useCallback((inputProps, openCalendar) => /* @__PURE__ */ jsx(DatePickerInput, {
+		inputProps,
+		openCalendar,
 		name,
-		stringValue,
+		label,
 		error,
+		disabled,
+		icon,
+		showInputLabel,
+		onClear,
+		onInputChange
+	}), [
+		name,
 		label,
+		error,
+		disabled,
+		icon,
 		showInputLabel,
-		isValid,
-		disabled
+		onClear,
+		onInputChange
 	]);
 	const handleRenderView = useCallback((_, renderCalendar) => {
 		if (label && !showInputLabel) return /* @__PURE__ */ jsx(x.div, {

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

@@ -1,8 +1,8 @@
 import { type FC } from 'react';
-interface TimepickerProps {
+type TimepickerProps = {
     setTime: (type: string, value: number) => void;
     value: Date | null;
     disabled?: boolean;
-}
+};
 export declare const Timepicker: FC<TimepickerProps>;
 export {};

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

@@ -0,0 +1,181 @@
+import Icon from "../../../../Icon/Icon.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 { parseTimeField } from "./utils/parseTimeField.js";
+import { sanitizeTimeField } from "./utils/sanitizeTimeField.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { x } from "@xstyled/styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { i18n } from "@lingui/core";
+//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/Timepicker.tsx
+const Timepicker = ({ setTime, value, disabled }) => {
+	const hours = value?.getHours?.() ?? 0;
+	const minutes = value?.getMinutes?.() ?? 0;
+	const [hoursValue, setHoursValue] = useState(padTime(hours));
+	const [minutesValue, setMinutesValue] = useState(padTime(minutes));
+	const isHoursEdited = useRef(false);
+	const isMinutesEdited = useRef(false);
+	useEffect(() => {
+		if (isHoursEdited.current) return;
+		setHoursValue(padTime(hours));
+	}, [hours]);
+	useEffect(() => {
+		if (isMinutesEdited.current) return;
+		setMinutesValue(padTime(minutes));
+	}, [minutes]);
+	const commitTime = useCallback((type, nextValue) => {
+		if (!value) return;
+		setTime(type, nextValue);
+	}, [setTime, value]);
+	const changeHours = useCallback((nextValue) => {
+		setHoursValue(padTime(nextValue));
+		commitTime("hours", nextValue);
+	}, [commitTime]);
+	const changeMinutes = useCallback((nextValue) => {
+		setMinutesValue(padTime(nextValue));
+		commitTime("minutes", nextValue);
+	}, [commitTime]);
+	const increaseHours = useCallback(() => {
+		changeHours((parseTimeField(hoursValue, hours) + 1) % 24);
+	}, [
+		changeHours,
+		hoursValue,
+		hours
+	]);
+	const decreaseHours = useCallback(() => {
+		changeHours((parseTimeField(hoursValue, hours) - 1 + 24) % 24);
+	}, [
+		changeHours,
+		hoursValue,
+		hours
+	]);
+	const increaseMinutes = useCallback(() => {
+		changeMinutes((parseTimeField(minutesValue, minutes) + 5) % 60);
+	}, [
+		changeMinutes,
+		minutesValue,
+		minutes
+	]);
+	const decreaseMinutes = useCallback(() => {
+		changeMinutes((parseTimeField(minutesValue, minutes) - 5 + 60) % 60);
+	}, [
+		changeMinutes,
+		minutesValue,
+		minutes
+	]);
+	const onHoursChange = useCallback((e) => {
+		const nextValue = sanitizeTimeField(e.target.value);
+		setHoursValue(nextValue);
+		const parsed = parseTimeField(nextValue, NaN);
+		if (Number.isNaN(parsed) || parsed > 23) return;
+		commitTime("hours", parsed);
+	}, [commitTime]);
+	const onMinutesChange = useCallback((e) => {
+		const nextValue = sanitizeTimeField(e.target.value);
+		setMinutesValue(nextValue);
+		const parsed = parseTimeField(nextValue, NaN);
+		if (Number.isNaN(parsed) || parsed > 59) return;
+		commitTime("minutes", parsed);
+	}, [commitTime]);
+	const onFieldClick = useCallback((e) => {
+		e.currentTarget.select();
+	}, []);
+	const onHoursFocus = useCallback((e) => {
+		isHoursEdited.current = true;
+		e.target.select();
+	}, []);
+	const onMinutesFocus = useCallback((e) => {
+		isMinutesEdited.current = true;
+		e.target.select();
+	}, []);
+	const onHoursBlur = useCallback(() => {
+		isHoursEdited.current = false;
+		const parsed = parseTimeField(hoursValue, NaN);
+		setHoursValue(padTime(!Number.isNaN(parsed) && parsed <= 23 ? parsed : hours));
+	}, [hoursValue, hours]);
+	const onMinutesBlur = useCallback(() => {
+		isMinutesEdited.current = false;
+		const parsed = parseTimeField(minutesValue, NaN);
+		setMinutesValue(padTime(!Number.isNaN(parsed) && parsed <= 59 ? parsed : minutes));
+	}, [minutesValue, minutes]);
+	return /* @__PURE__ */ jsxs(FooterRow, {
+		disabled,
+		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Icon, { icon: "clock" }), /* @__PURE__ */ jsx(FooterRowLabel, { children: i18n._({
+			id: "dataGrid.filterCell.time",
+			message: "Time"
+		}) })] }), /* @__PURE__ */ jsx(x.div, {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "flex-start",
+			pt: "4px",
+			w: "fit-content",
+			children: /* @__PURE__ */ jsxs(x.div, {
+				display: "flex",
+				alignItems: "center",
+				children: [
+					/* @__PURE__ */ jsxs(x.div, {
+						display: "flex",
+						flexDirection: "column",
+						children: [/* @__PURE__ */ jsx(TimeButton, {
+							disabled,
+							onClick: increaseHours,
+							type: "button",
+							children: "‹"
+						}), /* @__PURE__ */ jsx(TimeButton, {
+							disabled,
+							onClick: decreaseHours,
+							type: "button",
+							children: "›"
+						})]
+					}),
+					/* @__PURE__ */ jsxs(TimeWrapper, { children: [
+						/* @__PURE__ */ jsx(TimeField, {
+							value: hoursValue,
+							disabled,
+							inputMode: "numeric",
+							maxLength: 2,
+							onChange: onHoursChange,
+							onFocus: onHoursFocus,
+							onClick: onFieldClick,
+							onBlur: onHoursBlur
+						}),
+						/* @__PURE__ */ jsx(x.div, {
+							mx: "1px",
+							children: ":"
+						}),
+						/* @__PURE__ */ jsx(TimeField, {
+							value: minutesValue,
+							disabled,
+							inputMode: "numeric",
+							maxLength: 2,
+							onChange: onMinutesChange,
+							onFocus: onMinutesFocus,
+							onClick: onFieldClick,
+							onBlur: onMinutesBlur
+						})
+					] }),
+					/* @__PURE__ */ jsxs(x.div, {
+						display: "flex",
+						flexDirection: "column",
+						children: [/* @__PURE__ */ jsx(TimeButton, {
+							disabled,
+							onClick: increaseMinutes,
+							type: "button",
+							children: "‹"
+						}), /* @__PURE__ */ jsx(TimeButton, {
+							disabled,
+							onClick: decreaseMinutes,
+							type: "button",
+							children: "›"
+						})]
+					})
+				]
+			})
+		})]
+	});
+};
+//#endregion
+export { Timepicker };

package/ui/Elements/DatePicker/Datetime/components/Timepicker/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const HOURS_COUNT = 24;
+export declare const MINUTES_COUNT = 60;
+export declare const MINUTES_STEP = 5;
+export declare const MAX_HOURS: number;
+export declare const MAX_MINUTES: number;

package/ui/Elements/DatePicker/Datetime/components/Timepicker/constants.js

@@ -0,0 +1,8 @@
+//#region packages/ui/Elements/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;
+//#endregion
+export { HOURS_COUNT, MAX_HOURS, MAX_MINUTES, MINUTES_COUNT, MINUTES_STEP };

package/ui/Elements/DatePicker/Datetime/components/Timepicker/index.d.ts

@@ -0,0 +1 @@
+export { Timepicker } from './Timepicker';

package/ui/Elements/DatePicker/Datetime/components/Timepicker/index.js

@@ -0,0 +1,2 @@
+import { Timepicker } from "./Timepicker.js";
+export { Timepicker };

package/ui/Elements/DatePicker/Datetime/components/Timepicker/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const TimeButton: import("styled-components").StyledComponent<"button", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const TimeWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const TimeField: import("styled-components").StyledComponent<"input", import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Elements/DatePicker/Datetime/components/Timepicker/styles.js

@@ -0,0 +1,48 @@
+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
+const TimeButton = styled$1.button`
+  transform: rotate(90deg);
+  font-size: 20px;
+  line-height: 1;
+  margin: -3px 0;
+  padding: 0;
+  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;
+  }
+`;
+const TimeWrapper = styled$1.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  border: 1px solid ${th$1("colors.lightGray2")};
+  border-radius: 6px;
+  padding: 3px 8px;
+  margin: 0 4px;
+`;
+const TimeField = styled$1.input`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  width: 24px;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: ${th$1("colors.blue2")};
+  &:disabled {
+    opacity: 0.5;
+  }
+`;
+//#endregion
+export { TimeButton, TimeField, TimeWrapper };

package/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/index.d.ts

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

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

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

package/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/padTime.d.ts

@@ -0,0 +1,3 @@
+type PadTimeType = (value: number) => string;
+export declare const padTime: PadTimeType;
+export {};

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

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

package/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/parseTimeField.d.ts

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

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

@@ -0,0 +1,8 @@
+//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/parseTimeField.ts
+const parseTimeField = (text, fallback) => {
+	if (text === "") return fallback;
+	const parsed = Number(text);
+	return Number.isNaN(parsed) ? fallback : parsed;
+};
+//#endregion
+export { parseTimeField };

package/ui/Elements/DatePicker/Datetime/components/Timepicker/utils/sanitizeTimeField.d.ts

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

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

@@ -0,0 +1,4 @@
+//#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/Datetime/views/DaysView.js

@@ -1,5 +1,6 @@
 import { DateRepeater } from "../components/DateRepeater.js";
-import { Timepicker } from "../components/Timepicker.js";
+import { Timepicker } from "../components/Timepicker/Timepicker.js";
+import "../components/Timepicker/index.js";
 import ViewNavigation from "../components/ViewNavigation.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/ui/Elements/DatePicker/components/DatePickerInput/DatePickerInput.d.ts

@@ -0,0 +1,15 @@
+import { type FC, type InputHTMLAttributes } from 'react';
+type DatePickerInputProps = {
+    inputProps: InputHTMLAttributes<HTMLInputElement>;
+    openCalendar: () => void;
+    name?: string;
+    label?: string;
+    error?: string;
+    disabled?: boolean;
+    icon?: boolean;
+    showInputLabel?: boolean;
+    onClear?: () => void;
+    onInputChange?: (value: string) => void;
+};
+export declare const DatePickerInput: FC<DatePickerInputProps>;
+export {};

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

@@ -0,0 +1,33 @@
+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/components/DatePickerInput/index.d.ts

@@ -0,0 +1 @@
+export { DatePickerInput } from './DatePickerInput';

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

@@ -0,0 +1,2 @@
+import { DatePickerInput } from "./DatePickerInput.js";
+export { DatePickerInput };

package/ui/index.js

@@ -133,8 +133,8 @@ 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 Input_default from "./Forms/Input/index.js";
 import { DatePickerRepeat, TimePickerRepeat } from "./Elements/DatePicker/Datetime/types.js";
+import Input_default from "./Forms/Input/index.js";
 import DatePicker_default from "./Elements/DatePicker/index.js";
 import { useEvent } from "./Blocks/CommonGrid/hooks/useEvent.js";
 import { useAddFilter } from "./Blocks/CommonGrid/hooks/useAddFilter.js";

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

@@ -1,168 +0,0 @@
-import Icon from "../../../Icon/Icon.js";
-import { FooterRow } from "./FooterRow.js";
-import { FooterRowLabel } from "./FooterRowLabel.js";
-import { useCallback, useEffect, useState } from "react";
-import styled$1, { x } from "@xstyled/styled-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { th as th$1 } from "@xstyled/system";
-import { i18n } from "@lingui/core";
-//#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker.tsx
-const Btn = styled$1.button`
-  transform: rotate(90deg);
-  font-size: 18px;
-  margin: -4px 0;
-  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;
-  }
-`;
-const TimeWrapper = styled$1.div`
-  display: flex;
-  align-items: baseline;
-  justify-content: center;
-  border: 1px solid ${th$1("colors.lightGray2")};
-  border-radius: 6px;
-  padding: 0 4px;
-  margin: 0 4px;
-`;
-const Hours = styled$1.input`
-  font-size: 14px;
-  font-weight: 600;
-  width: 17px;
-  margin: 0;
-  padding: 0;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  color: #22394E;
-  &:disabled {
-    opacity: 0.5;
-  }
-`;
-const Minutes = styled$1.input`
-  font-weight: 600;
-  font-size: 14px;
-  width: 18px;
-  margin: 0;
-  padding: 0;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  color: #22394E;
-  &:disabled {
-    opacity: 0.5;
-  }
-`;
-const regExp = "^[0-9]*$";
-const Timepicker = ({ setTime, value, disabled }) => {
-	const initialHours = value?.getHours?.() ?? 0;
-	const initialMinutes = value?.getMinutes?.() ?? 0;
-	const [hours, setHours] = useState(initialHours);
-	const [minutes, setMinutes] = useState(initialMinutes);
-	const increaseHour = useCallback(() => {
-		setHours((prev) => (prev + 1) % 24);
-	}, []);
-	const decreaseHour = useCallback(() => {
-		setHours((prev) => prev === 0 ? 23 : prev - 1);
-	}, []);
-	const increaseMinutes = useCallback(() => {
-		setMinutes((prev) => (prev + 5) % 60);
-	}, []);
-	const decreaseMinutes = useCallback(() => {
-		setMinutes((prev) => (prev - 5 + 60) % 60);
-	}, []);
-	const onHoursChange = useCallback((e) => {
-		if (e.target.value.match(regExp) && Number(e.target.value) <= 23) setHours(Number(e.target.value));
-		else setHours(0);
-	}, []);
-	const onMinutesChange = useCallback((e) => {
-		if (e.target.value.match(regExp) && Number(e.target.value) <= 59) setMinutes(Number(e.target.value));
-		else setMinutes(0);
-	}, []);
-	useEffect(() => {
-		value && setTime("hours", hours);
-	}, [hours]);
-	useEffect(() => {
-		value && setTime("minutes", minutes);
-	}, [minutes]);
-	useEffect(() => {
-		setHours(initialHours);
-	}, [initialHours]);
-	useEffect(() => {
-		setMinutes(initialMinutes);
-	}, [initialMinutes]);
-	return /* @__PURE__ */ jsxs(FooterRow, {
-		disabled,
-		children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Icon, { icon: "clock" }), /* @__PURE__ */ jsx(FooterRowLabel, { children: i18n._({
-			id: "dataGrid.filterCell.time",
-			message: "Time"
-		}) })] }), /* @__PURE__ */ jsx(x.div, {
-			display: "flex",
-			flexDirection: "column",
-			alignItems: "flex-start",
-			pt: "4px",
-			w: "fit-content",
-			children: /* @__PURE__ */ jsxs(x.div, {
-				display: "flex",
-				alignItems: "center",
-				children: [
-					/* @__PURE__ */ jsxs(x.div, {
-						display: "flex",
-						flexDirection: "column",
-						children: [/* @__PURE__ */ jsx(Btn, {
-							disabled,
-							onClick: increaseHour,
-							type: "button",
-							children: "‹"
-						}), /* @__PURE__ */ jsx(Btn, {
-							disabled,
-							onClick: decreaseHour,
-							type: "button",
-							children: "›"
-						})]
-					}),
-					/* @__PURE__ */ jsxs(TimeWrapper, { children: [
-						/* @__PURE__ */ jsx(Hours, {
-							value: String(hours).padStart(2, "0"),
-							disabled,
-							onChange: onHoursChange
-						}),
-						/* @__PURE__ */ jsx(x.div, {
-							mx: "1px",
-							children: ":"
-						}),
-						/* @__PURE__ */ jsx(Minutes, {
-							value: String(minutes).padStart(2, "0"),
-							disabled,
-							onChange: onMinutesChange
-						})
-					] }),
-					/* @__PURE__ */ jsxs(x.div, {
-						display: "flex",
-						flexDirection: "column",
-						children: [/* @__PURE__ */ jsx(Btn, {
-							disabled,
-							onClick: increaseMinutes,
-							type: "button",
-							children: "‹"
-						}), /* @__PURE__ */ jsx(Btn, {
-							disabled,
-							onClick: decreaseMinutes,
-							type: "button",
-							children: "›"
-						})]
-					})
-				]
-			})
-		})]
-	});
-};
-//#endregion
-export { Timepicker };