armtek-uikit-react 1.0.267 → 1.0.269

package/lib/esm/ui/Form/DatePicker/DatePicker.js

@@ -0,0 +1,111 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import ReactDatePicker from "react-datepicker";
+/* empty css           */
+import { ru } from "date-fns/locale/ru";
+import { format } from "date-fns/format";
+import ButtonIcon from "../../ButtonIcon/ButtonIcon.js";
+import Stack from "../../Stack/Stack.js";
+import Select from "../Select/Select.js";
+import clsx from "clsx";
+import "../../Button/Button.js";
+import "../../Chip/Chip.js";
+const renderDayContents = (day) => {
+  return /* @__PURE__ */ jsx("div", { className: "customDay", children: day });
+};
+const DatePicker = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { className: "ui-datepicker", children: /* @__PURE__ */ jsx(
+    ReactDatePicker,
+    {
+      ref,
+      locale: ru,
+      inline: true,
+      renderDayContents,
+      ...props,
+      renderCustomHeader: (headerProps) => {
+        return /* @__PURE__ */ jsx(PickerHeader, { ...headerProps, ...props });
+      }
+    }
+  ) }) });
+});
+function range(end, start) {
+  const numbers = [];
+  for (let i = end; i <= start; i++) {
+    numbers.push(i);
+  }
+  numbers.reverse();
+  return numbers;
+}
+function getYear(date) {
+  return date.getFullYear();
+}
+function getMonth(date) {
+  return date.getMonth();
+}
+const getMonthNames = () => {
+  const months2 = [];
+  for (let i = 0; i < 12; i++) {
+    const date = /* @__PURE__ */ new Date();
+    date.setMonth(i);
+    months2.push(format(date, "LLLL", {
+      locale: ru
+    }));
+  }
+  return months2;
+};
+const getYears = (minYear, maxYear) => {
+  return range(minYear, maxYear);
+};
+const months = getMonthNames();
+const PickerHeader = (props) => {
+  const {
+    decreaseMonth,
+    prevMonthButtonDisabled,
+    date,
+    changeYear,
+    changeMonth,
+    increaseMonth,
+    nextMonthButtonDisabled,
+    maxDate,
+    minDate
+  } = props;
+  const years = getYears(minDate ? minDate.getFullYear() : 1920, maxDate ? maxDate.getFullYear() : (/* @__PURE__ */ new Date()).getFullYear() + 5);
+  const showMonthPickerProp = props.showMonthDropdown !== false && "showMonthDropdown" in props;
+  const showYearPickerProp = props.showYearDropdown !== false && "showYearDropdown" in props;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(Stack, { spacing: "small", center: true, className: "justify-between", children: [
+      /* @__PURE__ */ jsx(ButtonIcon, { size: "small", mi: "keyboard_arrow_left", onClick: decreaseMonth, disabled: prevMonthButtonDisabled }),
+      /* @__PURE__ */ jsx("div", { className: "react-datepicker__current-month", children: format(date, "LLLL yyyy", {
+        locale: ru
+      }) }),
+      /* @__PURE__ */ jsx(ButtonIcon, { size: "small", mi: "keyboard_arrow_right", onClick: increaseMonth, disabled: nextMonthButtonDisabled })
+    ] }),
+    (showMonthPickerProp || showYearPickerProp) && /* @__PURE__ */ jsxs(Stack, { spacing: "small", center: true, className: "justify-center", children: [
+      showYearPickerProp && /* @__PURE__ */ jsx(Select, { className: "arm-datepicker__select", size: "small", classes: {
+        root: "arm-datepicker__select_root",
+        wrapper: "arm-datepicker__select-wrapper"
+      }, variant: "outlined", value: String(getYear(date)), onChange: ({
+        target: {
+          value
+        }
+      }) => changeYear(value), options: years.map((item) => ({
+        value: String(item),
+        text: String(item)
+      })), optionClassName: "arm-datepicker__select-option" }),
+      showMonthPickerProp && /* @__PURE__ */ jsx(Select, { className: clsx("arm-datepicker__select", "arm-datepicker__select_month"), classes: {
+        root: "arm-datepicker__select_root",
+        wrapper: "arm-datepicker__select-wrapper"
+      }, size: "small", variant: "outlined", value: String(months[getMonth(date)]), onChange: ({
+        target: {
+          value
+        }
+      }) => changeMonth(months.indexOf(value)), options: months.map((item) => ({
+        value: String(item),
+        text: String(item)
+      })), optionClassName: "arm-datepicker__select-option" })
+    ] })
+  ] });
+};
+export {
+  DatePicker as default
+};

package/lib/esm/ui/Form/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DatePicker';
+export { type DatePickerProps } from 'react-datepicker';

package/lib/esm/ui/Form/DatePicker/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./DatePicker.js";
+export {
+  default2 as default
+};

package/lib/esm/ui/Form/DatePicker.d.ts

@@ -0,0 +1,2 @@
+export * from './DatePicker/index'
+export { default } from './DatePicker/index'

package/lib/esm/ui/Form/DatePicker.js

@@ -0,0 +1,2 @@
+export * from './DatePicker/index.js'
+export { default } from './DatePicker/index.js'

package/lib/esm/ui/Form/FormControls/FormControls.d.ts

@@ -0,0 +1,19 @@
+import { ButtonProps } from '../../../ui/Button';
+import { ComponentPropsWithoutRef, MouseEvent } from 'react';
+type OwnProps = {
+    onSubmit?: (e?: MouseEvent<HTMLButtonElement>) => void;
+    onCancel?: (e?: MouseEvent<HTMLButtonElement>) => void;
+    submitProps?: Omit<ButtonProps<'button'>, 'children'> & {
+        text: string;
+    };
+    cancelProps?: Omit<ButtonProps<'button'>, 'children'> & {
+        text: string;
+    };
+    classes?: {
+        submitBtn?: string;
+        cancelBtn?: string;
+    };
+};
+export type FormControlsProps = OwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof OwnProps>;
+declare const FormControls: (props: FormControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default FormControls;

package/lib/esm/ui/Form/FormControls/FormControls.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import Button from "../../Button/Button.js";
+import { FORM_CONTROLS_CLASSNAME } from "./const.js";
+const FormControls = (props) => {
+  const {
+    onSubmit,
+    onCancel,
+    submitProps,
+    cancelProps,
+    className,
+    classes,
+    ...divProps
+  } = props;
+  return /* @__PURE__ */ jsx("div", { className: clsx(FORM_CONTROLS_CLASSNAME), children: /* @__PURE__ */ jsxs("div", { "data-testid": "form-controls", ...divProps, className: clsx(className, "arm-form-controls__stack"), children: [
+    (onSubmit || (submitProps == null ? void 0 : submitProps.type) === "submit") && /* @__PURE__ */ jsx("div", { className: "arm-form-controls__button", children: /* @__PURE__ */ jsx(Button, { "data-testid": "form-controls-submit", variant: "contained", color: "primary", onClick: onSubmit, ...submitProps, className: clsx("arm-form-controls__btn", classes == null ? void 0 : classes.submitBtn), children: submitProps == null ? void 0 : submitProps.text }) }),
+    onCancel && /* @__PURE__ */ jsx("div", { className: "arm-form-controls__button", children: /* @__PURE__ */ jsx(Button, { "data-testid": "form-controls-cancel", variant: "outlined", color: "primary", onClick: onCancel, ...cancelProps, className: clsx("arm-form-controls__btn", classes == null ? void 0 : classes.cancelBtn), children: cancelProps == null ? void 0 : cancelProps.text }) })
+  ] }) });
+};
+export {
+  FormControls as default
+};

package/lib/esm/ui/Form/FormControls/const.d.ts

@@ -0,0 +1,2 @@
+export declare const FORM_CONTROLS_CLASSNAME = "arm-form-controls";
+export declare const FORM_CONTROLS_SKIP_REPLACE_CLASSNAME = "_skip_replace";

package/lib/esm/ui/Form/FormControls/const.js

@@ -0,0 +1,6 @@
+const FORM_CONTROLS_CLASSNAME = "arm-form-controls";
+const FORM_CONTROLS_SKIP_REPLACE_CLASSNAME = "_skip_replace";
+export {
+  FORM_CONTROLS_CLASSNAME,
+  FORM_CONTROLS_SKIP_REPLACE_CLASSNAME
+};

package/lib/esm/ui/Form/FormControls/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FormControls';
+export { type FormControlsProps } from './FormControls';

package/lib/esm/ui/Form/FormControls/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./FormControls.js";
+export {
+  default2 as default
+};

package/lib/esm/ui/Form/FormControls.d.ts

@@ -0,0 +1,2 @@
+export * from './FormControls/index'
+export { default } from './FormControls/index'

package/lib/esm/ui/Form/FormControls.js

@@ -0,0 +1,2 @@
+export * from './FormControls/index.js'
+export { default } from './FormControls/index.js'

package/lib/esm/ui/Form/Interval/Interval.d.ts

@@ -0,0 +1,14 @@
+import { TextFieldProps } from '../TextField/TextField';
+type OwnProps<ValueType = number | number[]> = {
+    min: number;
+    max: number;
+    value?: ValueType;
+    onChange?: (value: ValueType) => void;
+    labelStart?: string;
+    labelEnd?: string;
+    defaultValue?: ValueType;
+    range?: boolean;
+};
+export type IntervalProps<ValueType = number | number[]> = OwnProps<ValueType> & Omit<TextFieldProps, keyof OwnProps>;
+declare function Interval<ValueType = number | number[]>(props: IntervalProps<ValueType>): import("react/jsx-runtime").JSX.Element;
+export default Interval;

package/lib/esm/ui/Form/Interval/Interval.js

@@ -0,0 +1,76 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { TextFieldContainer, TextFieldInput } from "../TextField/TextField.js";
+import HelperText from "../../HelperText/HelperText.js";
+function Interval(props) {
+  const {
+    value,
+    defaultValue,
+    labelStart,
+    labelEnd,
+    onChange,
+    helperText,
+    error,
+    disabled,
+    min = 0,
+    max = 0,
+    range,
+    ...inputProps
+  } = props;
+  const [focused, setFocused] = useState(false);
+  const [currentMin, setCurrentMin] = useState(min);
+  const [currentMax, setCurrentMax] = useState(!range ? min : max);
+  const handleChange = (v, type) => {
+    if (type === "max") {
+      setCurrentMax(v);
+      onChange == null ? void 0 : onChange([Array.isArray(value) && value.length === 2 ? value[0] : min, v]);
+      return;
+    }
+    if (!range) {
+      setCurrentMax(v);
+      if (onChange) onChange(v);
+    } else {
+      v = v < min ? min : v;
+      setCurrentMin(v);
+      if (onChange) {
+        const changeValue = [v, Array.isArray(value) && value.length === 2 ? value[1] : max];
+        onChange(changeValue);
+      }
+    }
+  };
+  const handleFocus = () => {
+    setFocused(true);
+  };
+  const handleBlur = () => {
+    setFocused(false);
+  };
+  const handleMin = (e) => {
+    let val = 0;
+    if (e.target.value) val = parseInt(e.target.value);
+    if (val > max) return;
+    handleChange(val, "min");
+  };
+  const handleMax = (e) => {
+    let val = max;
+    if (e.target.value) val = parseInt(e.target.value);
+    val = val > max ? max : val;
+    handleChange(val, "max");
+  };
+  let realMin = currentMin;
+  let realMax = currentMax;
+  if (value !== void 0 && Array.isArray(value) && value.length === 2) {
+    realMin = value[0];
+    realMax = value[1];
+  }
+  if (!range) realMin = value !== void 0 ? value : currentMax;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { "data-testid": "interval", children: [
+    /* @__PURE__ */ jsx(TextFieldContainer, { focused, error, disabled, size: inputProps.size, variant: inputProps.variant, children: /* @__PURE__ */ jsxs("div", { className: "arm-interval", children: [
+      /* @__PURE__ */ jsx("div", { className: "arm-interval__item", children: /* @__PURE__ */ jsx(TextFieldInput, { ...inputProps, "data-testid": "interval-input-min", value: realMin, label: labelStart, type: "text", onFocus: handleFocus, onBlur: handleBlur, focused: true, onChange: handleMin }) }),
+      range && /* @__PURE__ */ jsx("div", { className: "arm-interval__item", children: /* @__PURE__ */ jsx(TextFieldInput, { ...inputProps, "data-testid": "interval-input-max", value: realMax, label: labelEnd, type: "text", onFocus: handleFocus, onBlur: handleBlur, className: "arm-interval__end", focused: true, onChange: handleMax }) })
+    ] }) }),
+    helperText && /* @__PURE__ */ jsx(HelperText, { className: "arm-interval__helper", error, children: helperText })
+  ] }) });
+}
+export {
+  Interval as default
+};

package/lib/esm/ui/Form/Interval/IntervalSlide.d.ts

@@ -0,0 +1,5 @@
+import { IntervalProps } from './Interval';
+import { SliderProps } from '../../Slider/Slider';
+type PropsType<ValueType = number | number[]> = Omit<IntervalProps<ValueType>, 'color' | 'step'> & Partial<Pick<SliderProps<ValueType>, 'color' | 'step'>>;
+declare function IntervalSlide<ValueType = number | number[]>(props: PropsType<ValueType>): import("react/jsx-runtime").JSX.Element;
+export default IntervalSlide;

package/lib/esm/ui/Form/Interval/IntervalSlide.js

@@ -0,0 +1,29 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import Interval from "./Interval.js";
+import { useState } from "react";
+import Slider from "../../Slider/Slider.js";
+function IntervalSlide(props) {
+  const {
+    onChange,
+    color,
+    step,
+    ...restProps
+  } = props;
+  const defaultValue = restProps.defaultValue || (restProps.range ? [restProps.min, restProps.max] : restProps.min !== void 0 ? restProps.min : 0);
+  const [currentValue, setCurrentValue] = useState(defaultValue);
+  const handleChange = (value) => {
+    let newValue = value;
+    if (onChange) onChange(newValue);
+  };
+  const handleSlide = (value) => {
+    handleChange(value);
+    setCurrentValue(value);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Interval, { value: currentValue, ...restProps, onChange: handleSlide }),
+    /* @__PURE__ */ jsx("div", { className: "arm-intervalslide__slider", children: /* @__PURE__ */ jsx(Slider, { min: props.min, max: props.max, disabled: props.disabled, color, value: restProps.value !== void 0 ? restProps.value : currentValue, size: props.size, onChange: handleSlide, range: props.range, step }) })
+  ] }) });
+}
+export {
+  IntervalSlide as default
+};

package/lib/esm/ui/Form/Interval/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Interval';
+export { default as IntervalSlide } from './IntervalSlide';
+export { type IntervalProps } from './Interval';

package/lib/esm/ui/Form/Interval/index.js

@@ -0,0 +1,6 @@
+import { default as default2 } from "./Interval.js";
+import { default as default3 } from "./IntervalSlide.js";
+export {
+  default3 as IntervalSlide,
+  default2 as default
+};

package/lib/esm/ui/Form/Interval.d.ts

@@ -0,0 +1,2 @@
+export * from './Interval/index'
+export { default } from './Interval/index'

package/lib/esm/ui/Form/Interval.js

@@ -0,0 +1,2 @@
+export * from './Interval/index.js'
+export { default } from './Interval/index.js'

package/lib/esm/ui/Form/Password/Password.d.ts

@@ -0,0 +1,24 @@
+export declare const Password: import("react").ForwardRefExoticComponent<{
+    label?: string;
+    size?: Exclude<import("../../../types/theme").SizeType, "extraLarge" | "medium">;
+    variant?: import("../../../types/theme").VariantType;
+    error?: boolean;
+    errorTooltip?: string;
+    success?: boolean;
+    helperText?: string | import("react").ReactNode;
+    startAdornment?: string | import("react").ReactNode;
+    endAdornment?: string | import("react").ReactNode;
+    multiline?: boolean;
+    rows?: number;
+    minRows?: number;
+    maxRows?: number;
+    focused?: boolean;
+    editable?: boolean;
+    classes?: Partial<{
+        input: string;
+        root: string;
+        wrapper: string;
+    }>;
+    WrapperProps?: import("react").ComponentPropsWithoutRef<"div">;
+} & Omit<import("react").InputHTMLAttributes<any>, "size"> & import("react").RefAttributes<unknown>>;
+export default Password;

package/lib/esm/ui/Form/Password/Password.js

@@ -0,0 +1,25 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { TextField } from "../TextField/TextField.js";
+import { forwardRef, useState, useRef } from "react";
+import ButtonIcon from "../../ButtonIcon/ButtonIcon.js";
+const Password = forwardRef((props, ref) => {
+  let {
+    onChange,
+    ...restProps
+  } = props;
+  let [value, setValue] = useState("");
+  let [isPassword, setIsPassword] = useState(true);
+  const inputRef = useRef(ref);
+  const handleChange = (e) => {
+    setValue(e.target.value);
+    if (onChange) onChange(e);
+  };
+  const handleClick = () => {
+    setIsPassword((prev) => !prev);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(TextField, { value, ref: inputRef, ...restProps, type: isPassword ? "password" : "text", onChange: handleChange, endAdornment: /* @__PURE__ */ jsx(ButtonIcon, { size: "medium", variant: "transparent", color: "neutral", onClick: handleClick, children: /* @__PURE__ */ jsx("span", { className: "material_icon", children: isPassword ? "visibility_off" : "visibility" }) }) }) });
+});
+export {
+  Password,
+  Password as default
+};

package/lib/esm/ui/Form/Password/index.d.ts

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

package/lib/esm/ui/Form/Password/index.js

@@ -0,0 +1,4 @@
+import { Password } from "./Password.js";
+export {
+  Password as default
+};

package/lib/esm/ui/Form/Password.d.ts

@@ -0,0 +1,2 @@
+export * from './Password/index'
+export { default } from './Password/index'

package/lib/esm/ui/Form/Password.js

@@ -0,0 +1,2 @@
+export * from './Password/index.js'
+export { default } from './Password/index.js'

package/lib/esm/ui/Form/Period/Period.d.ts

@@ -0,0 +1,32 @@
+import { TextFieldProps } from '../TextField/TextField';
+import { DatePickerProps } from '../DatePicker/DatePicker';
+export type PeriodChangeEvent = (Event & {
+    target: {
+        value: [Date | null, Date | null];
+        name: string;
+    };
+});
+export type PeriodProps = {
+    onChange?: (e: PeriodChangeEvent) => void;
+    value?: [Date | null, Date | null];
+    defaultValue?: [Date | null, Date | null];
+    disableSameDate?: boolean;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    showMonthDropdown?: boolean;
+    showYearDropdown?: boolean;
+    datePickerProps?: DatePickerProps;
+} & Omit<TextFieldProps, 'value' | 'onChange' | 'defaultValue'>;
+export declare function getPeriodDisplay(date1: Date | null | undefined, date2: Date | null | undefined): string;
+declare const Period: import("react").ForwardRefExoticComponent<{
+    onChange?: (e: PeriodChangeEvent) => void;
+    value?: [Date | null, Date | null];
+    defaultValue?: [Date | null, Date | null];
+    disableSameDate?: boolean;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    showMonthDropdown?: boolean;
+    showYearDropdown?: boolean;
+    datePickerProps?: DatePickerProps;
+} & Omit<TextFieldProps, "defaultValue" | "onChange" | "value"> & import("react").RefAttributes<unknown>>;
+export default Period;

package/lib/esm/ui/Form/Period/Period.js

@@ -0,0 +1,139 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { TextField } from "../TextField/TextField.js";
+import { forwardRef, useState, useRef, useEffect } from "react";
+import ButtonIcon from "../../ButtonIcon/ButtonIcon.js";
+import Card from "../../Card/Card.js";
+import DatePicker from "../DatePicker/DatePicker.js";
+import { DateService, isDateEqual, isDateBigger } from "../../../lib/services/DateService.js";
+import { AdornmentContainer } from "../../Adornment/Adornment.js";
+import { Popper } from "../../Popper/Popper.js";
+import "../../Popper/PopperBase.js";
+const DELIMITER = " - ";
+const format = "dd.MM.yyyy";
+function getPeriodDisplay(date1, date2) {
+  if (date1 && date2) return DateService(date1).format(format) + DELIMITER + DateService(date2).format(format);
+  return "";
+}
+function validateDate(date, minDate, maxDate) {
+  const startParts = date.split(".");
+  const startTimeStamp = Date.parse(`${startParts[2]}-${startParts[1]}-${startParts[0]}`);
+  if (isNaN(startTimeStamp) === false) {
+    const startDate = new Date(startTimeStamp);
+    if (minDate && isDateBigger(minDate, startDate)) return null;
+    else if (maxDate && isDateBigger(startDate, maxDate)) return null;
+    return startDate;
+  }
+  return null;
+}
+const Period = forwardRef((props, ref) => {
+  const {
+    onChange,
+    onInput,
+    maxDate,
+    minDate,
+    disableSameDate,
+    value,
+    defaultValue,
+    showYearDropdown,
+    showMonthDropdown,
+    datePickerProps,
+    disabled,
+    ...restProps
+  } = props;
+  const [active, setActive] = useState(false);
+  const [currentValue, setCurrentValue] = useState(defaultValue || [null, null]);
+  const displayText = defaultValue ? getPeriodDisplay(defaultValue[0], defaultValue[1]) : "";
+  const [textValue, setTextValue] = useState(displayText);
+  const btnRef = useRef();
+  const [startValue, endValue] = value || [];
+  useEffect(() => {
+    if (startValue && endValue) setTextValue(getPeriodDisplay(startValue, endValue));
+    else if (startValue === null && endValue === null) setTextValue("");
+  }, [startValue, endValue]);
+  const handleClick = (e) => {
+    e.stopPropagation();
+    setActive((prev) => !prev);
+  };
+  const handleSelect = (date) => {
+    if (disabled) return;
+    if (date[0] && date[1] && disableSameDate && isDateEqual(date[0], date[1])) {
+      setTextValue("");
+      return;
+    }
+    setCurrentValue(date);
+    if (date[0] && date[1]) setTextValue(getPeriodDisplay(date[0], date[1]));
+    if (date[0] && date[1]) setActive(false);
+    if (onChange) {
+      const e = new Event("input", {
+        bubbles: true
+      });
+      Object.defineProperty(e, "target", {
+        writable: false,
+        value: {
+          name: props.name,
+          value: date
+        }
+      });
+      onChange(e);
+    }
+  };
+  const handleChange = (e) => {
+    if (disabled) return;
+    let value2 = e.target.value;
+    const bs = (textValue.endsWith(".") || textValue.endsWith(" ") || textValue.endsWith("-")) && textValue.length > value2.length;
+    if (!bs) {
+      value2 = value2.replace(/[^\d -.]/g, "").replace(/^(\d{2})$/, "$1.").replace(/^(\d{2})(\d)$/, "$1.$2").replace(/^(\d{2})\.(\d{2})$/, "$1.$2.").replace(/^(\d{2})\.(\d{2})(\d)$/, "$1.$2.$3").replace(/^(\d{2})\.(\d{2})\.(\d{4})$/, "$1.$2.$3" + DELIMITER).replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2})$`), `$1.$2.$3${DELIMITER}$4.`).replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2})(d)$`), `$1.$2.$3${DELIMITER}$4.$5`).replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2})$`), "$1.$2.$3 - $4.$5.").replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2})(d)$`), "$1.$2.$3 - $4.$5.$6").replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2}).(\\d{4})$`), "$1.$2.$3 - $4.$5.$6").replace(new RegExp(`^(\\d{2}).(\\d{2}).(\\d{4})${DELIMITER}(\\d{2}).(\\d{2}).(\\d{4})(\\d)$`), "$1.$2.$3 - $4.$5.$6");
+    }
+    let startDateValid = null;
+    let endDateValid = null;
+    const valueParts = value2.split(DELIMITER);
+    if (valueParts[0].match(/^\d{2}\.\d{2}\.\d{4}$/)) {
+      startDateValid = validateDate(valueParts[0], minDate, maxDate);
+      if (!startDateValid) {
+        setTextValue("");
+        handleSelect([null, null]);
+        return;
+      }
+    }
+    setTextValue(value2);
+    setCurrentValue([null, null]);
+    if (value2.match(new RegExp(`\\d{2}\\.\\d{2}\\.\\d{4}${DELIMITER}\\d{2}\\.\\d{2}\\.\\d{4}`))) {
+      if (valueParts.length === 2) {
+        endDateValid = validateDate(valueParts[1], minDate, maxDate);
+        if (!endDateValid) {
+          setTextValue("");
+        }
+      }
+    }
+    if (startDateValid && endDateValid && startDateValid.getTime() <= endDateValid.getTime()) {
+      handleSelect([startDateValid, endDateValid]);
+    }
+  };
+  const handleBlur = (e) => {
+    setActive(false);
+    const value2 = e.target.value;
+    const valueParts = value2.split(DELIMITER);
+    const startDateValid = valueParts[0] ? validateDate(valueParts[0], minDate, maxDate) : null;
+    const endDateValid = valueParts[1] ? validateDate(valueParts[1], minDate, maxDate) : null;
+    if (!startDateValid || !endDateValid || startDateValid && endDateValid && endDateValid.getTime() < startDateValid.getTime()) {
+      setTextValue("");
+      handleSelect([null, null]);
+    }
+  };
+  const handleClickOutside = (e) => {
+    if (!e.target.closest("[data-calendar-btn]") && !e.target.closest(".arm-datepicker__select-option")) setActive(false);
+  };
+  let realValue = Array.isArray(props.value) ? props.value : currentValue;
+  const endAdornment = /* @__PURE__ */ jsxs(AdornmentContainer, { children: [
+    restProps.endAdornment,
+    /* @__PURE__ */ jsx(ButtonIcon, { "data-calendar-btn": true, size: "medium", "data-testid": "period-btn", variant: "transparent", color: "neutral", disabled, onClick: handleClick, children: /* @__PURE__ */ jsx("span", { className: "material_icon", ref: btnRef, children: "calendar_today" }) })
+  ] });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "arm-period", "data-testid": "period", children: [
+    /* @__PURE__ */ jsx(TextField, { ref, placeholder: "дд.мм.гггг - дд.мм.гггг", ...restProps, disabled, value: textValue, onBlur: handleBlur, onChange: handleChange, onFocus: () => setActive(false), autoComplete: "off", endAdornment }),
+    active && /* @__PURE__ */ jsx(Popper, { anchorEl: btnRef.current, open: active, placement: "bottom-end", children: /* @__PURE__ */ jsx(Card, { className: "arm-period__picker", "data-testid": "period_card", children: /* @__PURE__ */ jsx(DatePicker, { onClickOutside: handleClickOutside, onChange: handleSelect, selectsRange: true, selected: realValue[0], startDate: realValue[0], endDate: realValue[1], minDate: minDate || void 0, maxDate: maxDate || void 0, showMonthDropdown, showYearDropdown, ...datePickerProps }) }) })
+  ] }) });
+});
+export {
+  Period as default,
+  getPeriodDisplay
+};

package/lib/esm/ui/Form/Period/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Period';
+export { type PeriodChangeEvent } from './Period';

package/lib/esm/ui/Form/Period/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./Period.js";
+export {
+  default2 as default
+};

package/lib/esm/ui/Form/Period.d.ts

@@ -0,0 +1,2 @@
+export * from './Period/index'
+export { default } from './Period/index'

package/lib/esm/ui/Form/Period.js

@@ -0,0 +1,2 @@
+export * from './Period/index.js'
+export { default } from './Period/index.js'

package/lib/esm/ui/Form/PeriodSelect/PeriodSelect.d.ts

@@ -0,0 +1,2 @@
+declare const PeriodSelect: () => import("react/jsx-runtime").JSX.Element;
+export default PeriodSelect;

package/lib/esm/ui/Form/PeriodSelect/PeriodSelect.js

@@ -0,0 +1,15 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import DatePicker from "../DatePicker/DatePicker.js";
+import { useState } from "react";
+const PeriodSelect = () => {
+  const [startDate, setStartDate] = useState(/* @__PURE__ */ new Date());
+  const [endDate, setEndDate] = useState(null);
+  const handleChange = (date) => {
+    setStartDate(date[0]);
+    setEndDate(date[1]);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(DatePicker, { selected: startDate, onChange: handleChange, startDate, endDate, selectsRange: true }) });
+};
+export {
+  PeriodSelect as default
+};

package/lib/esm/ui/Form/PeriodSelect/index.d.ts

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

package/lib/esm/ui/Form/PeriodSelect/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./PeriodSelect.js";
+export {
+  default2 as default
+};