mimir-ui-kit 1.20.5 → 1.21.0

package/dist/assets/TextArea.css

@@ -1 +1 @@
-._textarea-wrapper_191db_2 ._textarea_191db_2{min-height:var(--textarea-height);padding-top:var(--textarea-space)!important;padding-bottom:var(--textarea-space);resize:none}._textarea-wrapper_191db_2 ._textarea_191db_2._has-label_191db_8{padding-top:var(--textarea-top-space)!important}._textarea-wrapper_191db_2 ._label_191db_11{position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--space-m);z-index:1;display:block;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;transform-origin:left center;transition:transform .15s ease-out,left .15s ease-out,color .15s ease-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none}._textarea-wrapper_191db_2 ._label_191db_11._has-left-slot_191db_25{left:calc(var(--space-m) + var(--icon-size) + var(--clear-button-mg))}._textarea-wrapper_191db_2 ._label_191db_11._active-label_191db_28{transform:scale(var(--label-scaled)) translateY(calc(var(--textarea-transform-label) * -1))}._textarea-wrapper_191db_2 ._label_191db_11._active-label_191db_28._has-left-slot_191db_25{left:calc(var(--space-m) + var(--icon-size) + var(--space-s));transform:scale(var(--label-scaled)) translate(calc((var(--space-m) + var(--left-addon-position)) * 2 * -1),calc(var(--textarea-transform-label) * -1))}._s_191db_36{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-xss);--textarea-height: 76px;--textarea-padding: var(--space-xs) var(--space-s)}._m_191db_44{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-s);--textarea-height: 88px;--textarea-padding: var(--space-xs) var(--space-s)}._l_191db_11{--textarea-space: var(--space-2m);--textarea-top-space: 25px;--textarea-transform-label: var(--space-m);--textarea-height: 120px;--textarea-padding: var(--space-2m)}
+._textarea-wrapper_mbbjz_2 ._textarea_mbbjz_2{min-height:var(--textarea-height);padding-top:var(--textarea-space)!important;padding-bottom:var(--textarea-space);resize:none}._textarea-wrapper_mbbjz_2 ._textarea_mbbjz_2._has-label_mbbjz_8{padding-top:var(--textarea-top-space)!important}._textarea-wrapper_mbbjz_2 ._label_mbbjz_11{position:absolute;top:calc(var(--textarea-space) / 2 - var(--textarea-space) / 2);left:var(--space-m);z-index:1;display:block;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;transform-origin:left center;transition:transform .15s ease-out,left .15s ease-out,color .15s ease-out;pointer-events:none}._textarea-wrapper_mbbjz_2 ._label_mbbjz_11._has-left-slot_mbbjz_24{left:calc(var(--space-m) + var(--icon-size) + var(--clear-button-mg))}._textarea-wrapper_mbbjz_2 ._label_mbbjz_11._active-label_mbbjz_27{transform:scale(var(--label-scaled)) translateY(calc(var(--textarea-transform-label) * -1))}._textarea-wrapper_mbbjz_2 ._label_mbbjz_11._active-label_mbbjz_27._has-left-slot_mbbjz_24{left:calc(var(--space-m) + var(--icon-size) + var(--space-s));transform:scale(var(--label-scaled)) translate(calc((var(--space-m) + var(--left-addon-position)) * 2 * -1),calc(var(--textarea-transform-label) * -1))}._s_mbbjz_35{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-xss);--textarea-height: 76px;--textarea-padding: var(--space-xs) var(--space-s)}._m_mbbjz_43{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-s);--textarea-height: 88px;--textarea-padding: var(--space-xs) var(--space-s)}._l_mbbjz_11{--textarea-space: var(--space-2m);--textarea-top-space: 25px;--textarea-transform-label: var(--space-m);--textarea-height: 120px;--textarea-padding: var(--space-2m)}

package/dist/assets/styles.css

@@ -0,0 +1 @@
+._input_3fxwe_2{padding-right:var(--space-3xl)}._input-wrapper_3fxwe_6{flex:1}._date-wrapper_3fxwe_10{position:relative;width:100%}._date-wrapper_3fxwe_10:hover ._input-wrapper_3fxwe_6{background-color:var(--input-bg-color-hover)}._date-wrapper_3fxwe_10:before{position:absolute;top:0;right:60px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}[data-disabled=true] ._date-wrapper_3fxwe_10:before{cursor:auto}[data-disabled=true] ._date-wrapper_3fxwe_10 ._input-wrapper_3fxwe_6{background:var(--black-20)}[data-disabled=true] ._date-wrapper_3fxwe_10 ._input-wrapper_3fxwe_6 label,[data-disabled=true] ._date-wrapper_3fxwe_10 ._input-wrapper_3fxwe_6 input{color:var(--white)}[data-disabled=true] ._button-wrapper_3fxwe_35 svg{color:var(--white);fill:var(--white);cursor:default}._wrapper_3fxwe_41{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_3fxwe_41._active_3fxwe_47{border-bottom:1px solid var(--citrine-100)}._button-wrapper_3fxwe_35{position:absolute;top:0;right:0;z-index:2;display:flex;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_3fxwe_35{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_3fxwe_68{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_3fxwe_74{position:absolute;z-index:3;display:flex;flex-direction:column;width:368px;max-height:none;padding:16px;font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:var(--white);border-radius:var(--control-radius-s);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;opacity:0;transition:height .5s ease-in;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._calendar-block_3fxwe_74 ._h_3fxwe_97{display:flex;width:100%;color:var(--black-100)}._calendar-block_3fxwe_74 ._b_3fxwe_35{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_3fxwe_74 ._d_3fxwe_10{display:flex;flex:1;align-items:center;justify-content:center;color:var(--black-100);cursor:pointer;gap:4px}._calendar-block_3fxwe_74 ._m_3fxwe_118,._calendar-block_3fxwe_74 ._a_3fxwe_47,._calendar-block_3fxwe_74 ._prev_3fxwe_120{width:auto;height:48px;overflow:hidden}._calendar-block_3fxwe_74 ._m_3fxwe_118{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_3fxwe_74 ._m_3fxwe_118 b{font-weight:var(--font-weight-text-regular)}._calendar-block_3fxwe_74 ._orange_3fxwe_136{color:var(--citrine-100)}._calendar-block_3fxwe_74 ._a_3fxwe_47{color:var(--black-100);border-radius:var(--control-radius-s)}._calendar-block_3fxwe_74 ._a_3fxwe_47 b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:var(--font-weight-text-regular);cursor:pointer}._calendar-block_3fxwe_74 ._a_3fxwe_47 b:hover{background:var(--black-10)}._calendar-block_3fxwe_74 ._a_3fxwe_47 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_3fxwe_74 ._current_3fxwe_161{background:var(--sapphire-10);border-radius:var(--control-radius-s)}._calendar-block_3fxwe_74 ._monthGrid_3fxwe_166{display:grid;grid-template-columns:repeat(3,1fr)}

package/dist/components/DatePicker/DatePicker.d.ts

@@ -14,6 +14,12 @@ export type DatePicker = {
      * значение из стейта (data)
      */
     value?: string;
+    /**
+     * значение типа модально окна календаря
+     */
+    type?: 'days' | 'months' | 'years';
+    disabled?: boolean;
+    error?: boolean;
 } & TInputProps;
 export type TDatePickerValue = {
     value?: Date;
@@ -33,4 +39,10 @@ export declare const DatePicker: import('react').MemoExoticComponent<import('rea
      * значение из стейта (data)
      */
     value?: string;
+    /**
+     * значение типа модально окна календаря
+     */
+    type?: "days" | "months" | "years";
+    disabled?: boolean;
+    error?: boolean;
 } & import('../Input/types').TInputProps & import('../Input').TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;

package/dist/components/DatePicker/DatePicker.js

@@ -1,44 +1,92 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
-import { memo, forwardRef, useState } from "react";
-import { c as cls, D as DatePickerModal } from "../../DatePickerModal-BM0BgzTb.js";
+import { memo, forwardRef, useState, useEffect } from "react";
+import { DatePickerModal } from "./DatePickerModal.js";
+import { MonthPickerModal } from "./MonthPickerModal.js";
+import { c as cls } from "../../styles.module-BZXDqssF.js";
+import { YearPickerModal } from "./YearPickerModal.js";
 import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
 import { formating } from "../../utils/index.js";
 import { Button } from "../Button/Button.js";
 import { I as Input } from "../../Input-6mudFqTb.js";
+import { EInputVariant } from "../Input/constants.js";
 const DatePicker = memo(
   forwardRef(
-    ({ size, value, onChangeValue, name, before, ...props }, ref) => {
+    ({
+      size,
+      value,
+      onChangeValue,
+      name,
+      before,
+      type = "days",
+      error,
+      variant,
+      disabled = false,
+      ...props
+    }, ref) => {
       const [isActive, setActive] = useState(false);
+      const [pickerType, setType] = useState(type);
       const [date, setDate] = useState(
         value ? new Date(value) : /* @__PURE__ */ new Date()
       );
+      const [isError, setError] = useState(error);
+      useEffect(() => {
+        setError(error);
+      }, [error]);
       useClickOutside({
         isActive,
-        setActive,
+        setActive: (e) => {
+          setActive(e);
+          setType(type);
+        },
         className: cls["calendar-block"]
       });
       const onOpen = () => {
-        setActive(true);
+        if (!disabled) setActive(true);
       };
       const onDate = (d) => {
+        if (pickerType === "years") {
+          if (type === "years") {
+            setActive(false);
+            setType(type);
+          } else {
+            setType("months");
+          }
+        }
+        if (pickerType === "months") {
+          if (type === "months") {
+            setActive(false);
+            setType(type);
+          } else {
+            setType("days");
+          }
+        }
         setDate(d);
         onChangeValue == null ? void 0 : onChangeValue({ value: d, name });
       };
       const wrapperClassNames = classNames(cls.wrapper, isActive && cls.active);
-      return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames, children: [
-        /* @__PURE__ */ jsx("div", { className: cls["date-wrapper"], onClick: onOpen, children: /* @__PURE__ */ jsx(
-          Input,
+      return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames, "data-disabled": disabled, children: [
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            ref,
-            className: cls.input,
-            wrapperClassName: cls["input-wrapper"],
-            size,
-            type: "text",
-            value: formating.Date(date, "dd.mm.yy"),
-            ...props
+            "data-error": isError,
+            className: cls["date-wrapper"],
+            onClick: onOpen,
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                ref,
+                className: cls.input,
+                wrapperClassName: cls["input-wrapper"],
+                size,
+                type: "text",
+                variant: isError ? EInputVariant.Error : variant,
+                value: formating.Date(date, "dd.mm.yy"),
+                ...props
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx("div", { className: cls["button-wrapper"], children: /* @__PURE__ */ jsx(
           Button,
           {
@@ -50,13 +98,34 @@ const DatePicker = memo(
             iconName: isActive ? "DropdownArrowUp16px" : "DropdownArrowBottom16px"
           }
         ) }),
-        isActive && /* @__PURE__ */ jsx(
+        pickerType === "days" && isActive && /* @__PURE__ */ jsx(
           DatePickerModal,
           {
             onChangeValue: onDate,
             date,
             setActive,
-            before: typeof before === "string" ? new Date(before) : before
+            before: typeof before === "string" ? new Date(before) : before,
+            onType: setType
+          }
+        ),
+        pickerType === "months" && isActive && /* @__PURE__ */ jsx(
+          MonthPickerModal,
+          {
+            onChangeValue: onDate,
+            date,
+            setActive,
+            before: typeof before === "string" ? new Date(before) : before,
+            onType: setType
+          }
+        ),
+        pickerType === "years" && isActive && /* @__PURE__ */ jsx(
+          YearPickerModal,
+          {
+            onChangeValue: onDate,
+            date,
+            setActive,
+            before: typeof before === "string" ? new Date(before) : before,
+            onType: setType
           }
         )
       ] });

package/dist/components/DatePicker/DatePickerModal.d.ts

@@ -3,6 +3,7 @@ type DatePickerModal = {
     onChangeValue: (d: Date) => void;
     setActive: (s: boolean) => void;
     before?: Date;
+    onType?: (s: 'days' | 'months' | 'years') => void;
 };
-export declare function DatePickerModal({ date, onChangeValue, setActive, before }: DatePickerModal): import("react/jsx-runtime").JSX.Element;
+export declare function DatePickerModal({ date, onChangeValue, setActive, before, onType }: DatePickerModal): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DatePicker/DatePickerModal.js

@@ -1,9 +1,184 @@
-import "react/jsx-runtime";
-import "react";
-import "./constants.js";
-import { D } from "../../DatePickerModal-BM0BgzTb.js";
-import "../../utils/index.js";
-import "../Button/Button.js";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { week } from "./constants.js";
+import { c as cls } from "../../styles.module-BZXDqssF.js";
+import { Icon } from "../../icons/Icon.js";
+import { formating } from "../../utils/index.js";
+import { Button } from "../Button/Button.js";
+function DatePickerModal({
+  date,
+  onChangeValue,
+  setActive,
+  before,
+  onType
+}) {
+  const field = useRef(null);
+  const _current = new Date(date);
+  const _selecte = new Date(date);
+  const current = {
+    y: _current.getFullYear(),
+    d: _current.getDate(),
+    m: _current.getMonth() + 1
+  };
+  const selecte = {
+    y: _selecte.getFullYear(),
+    d: _selecte.getDate(),
+    m: _selecte.getMonth() + 1
+  };
+  const countWorkDays = 4;
+  const [month, setMonth] = useState({ y: selecte.y, m: selecte.m });
+  const blockWidth = 368;
+  useEffect(() => {
+    var _a, _b, _c, _d;
+    const windowHeight = window.innerHeight;
+    const windowWidth = window.innerWidth;
+    if (field.current !== null) {
+      const inputWidth = ((_b = (_a = field == null ? void 0 : field.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.offsetWidth) || 0;
+      const inputHeight = (_d = (_c = field == null ? void 0 : field.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.offsetHeight;
+      const inputPosition = field.current.getBoundingClientRect();
+      const calendarSize = field.current.offsetHeight;
+      if (windowHeight < inputPosition.y + calendarSize) {
+        field.current.style.top = -calendarSize + "px";
+      } else {
+        field.current.style.top = inputHeight + "px";
+      }
+      if (windowWidth < inputPosition.x + blockWidth) {
+        field.current.style.left = inputWidth - blockWidth + "px";
+      }
+      field.current.style.opacity = "1";
+    }
+  }, [month]);
+  const countPrevDays = (e) => {
+    let dayOfWeek = e.getDay();
+    if (dayOfWeek === 0) dayOfWeek = 7;
+    return dayOfWeek - 1;
+  };
+  const currentMonthIndex = month.m - 1;
+  const currentMonthFull = new Date(month.y, currentMonthIndex);
+  const days = [];
+  const prevDays = () => {
+    const prevMonth = new Date(currentMonthFull);
+    prevMonth.setDate(prevMonth.getDate() - 1);
+    const lastDayPrevMohth = prevMonth.getDate();
+    const prevList = [];
+    for (let i = 0; i < countPrevDays(currentMonthFull); i++) {
+      prevList.push(lastDayPrevMohth - i);
+    }
+    prevList.reverse();
+    return prevList;
+  };
+  const prevDaysArray = prevDays();
+  while (currentMonthFull.getMonth() === currentMonthIndex) {
+    days.push(currentMonthFull.getDate());
+    currentMonthFull.setDate(currentMonthFull.getDate() + 1);
+  }
+  const nextDays = () => {
+    const totalViewDays = 42;
+    const daysCount = totalViewDays - (prevDaysArray.length + days.length);
+    const nextList = [];
+    for (let i = 1; i <= daysCount; i++) {
+      nextList.push(i);
+    }
+    return nextList;
+  };
+  const nextDaysArray = nextDays();
+  const update = (m, y) => {
+    y = m > 12 ? y + 1 : m < 1 ? y - 1 : y;
+    m = m > 12 ? 1 : m < 1 ? 12 : m;
+    return { y, m };
+  };
+  const onExit = () => {
+    setActive(false);
+  };
+  const next = () => {
+    setMonth(update(month.m + 1, month.y));
+  };
+  const prev = () => {
+    setMonth(update(month.m - 1, month.y));
+  };
+  const isBefore = (activeDate) => {
+    if (before) {
+      const beforeDate = before.getTime();
+      if (beforeDate > activeDate) return true;
+    }
+    return false;
+  };
+  const send = (searchDate) => {
+    if (isBefore(
+      (/* @__PURE__ */ new Date(
+        `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
+      )).getTime()
+    ))
+      return;
+    onChangeValue(
+      /* @__PURE__ */ new Date(
+        `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
+      )
+    );
+    onExit();
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
+    /* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          isIconButton: true,
+          iconName: "DropdownArrowLeft16px",
+          onClick: prev,
+          variant: "secondary-gray",
+          size: "l"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: cls["d"], onClick: () => onType == null ? void 0 : onType("months"), children: [
+        formating.Month(month.m).name,
+        "’",
+        month.y.toString().slice(-2),
+        /* @__PURE__ */ jsx(Icon, { iconName: "DropdownArrowBottom16px" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          isIconButton: true,
+          iconName: "DropdownArrowRight16px",
+          onClick: next,
+          variant: "secondary-gray",
+          size: "l"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cls["b"], children: [
+      week.map((i, s) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${s > countWorkDays ? [cls["m"], cls["orange"]].join(" ") : cls["m"]}`,
+          children: i
+        },
+        `v${s}`
+      )),
+      prevDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key)),
+      days.map((i, s) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: isBefore(
+            (/* @__PURE__ */ new Date(
+              `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, i)}`
+            )).getTime()
+          ) ? cls["m"] : cls["a"],
+          children: i !== 0 ? /* @__PURE__ */ jsx(
+            "b",
+            {
+              className: current.y === month.y && current.m === month.m && current.d === i ? cls["current"] : "",
+              onClick: () => send(i),
+              children: i
+            }
+          ) : /* @__PURE__ */ jsx("p", {})
+        },
+        s
+      )),
+      nextDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key))
+    ] })
+  ] }) });
+}
 export {
-  D as DatePickerModal
+  DatePickerModal
 };

package/dist/components/DatePicker/MonthPickerModal.d.ts

@@ -0,0 +1,9 @@
+type MonthPickerModal = {
+    date: Date;
+    onChangeValue: (d: Date) => void;
+    setActive: (s: boolean) => void;
+    before?: Date;
+    onType?: (s: 'years') => void;
+};
+export declare function MonthPickerModal({ date, onChangeValue, before, onType }: MonthPickerModal): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/MonthPickerModal.js

@@ -0,0 +1,123 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { months } from "./constants.js";
+import { c as cls } from "../../styles.module-BZXDqssF.js";
+import { Icon } from "../../icons/Icon.js";
+import { formating } from "../../utils/index.js";
+import { Button } from "../Button/Button.js";
+function MonthPickerModal({
+  date,
+  onChangeValue,
+  before,
+  onType
+}) {
+  const field = useRef(null);
+  const _current = new Date(date);
+  const _selecte = new Date(date);
+  const current = {
+    y: _current.getFullYear(),
+    d: _current.getDate(),
+    m: _current.getMonth() + 1
+  };
+  const selecte = {
+    y: _selecte.getFullYear(),
+    d: _selecte.getDate(),
+    m: _selecte.getMonth() + 1
+  };
+  const [year, setYear] = useState(selecte.y);
+  const blockWidth = 368;
+  useEffect(() => {
+    var _a, _b, _c, _d;
+    const windowHeight = window.innerHeight;
+    const windowWidth = window.innerWidth;
+    if (field.current !== null) {
+      const inputWidth = ((_b = (_a = field == null ? void 0 : field.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.offsetWidth) || 0;
+      const inputHeight = (_d = (_c = field == null ? void 0 : field.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.offsetHeight;
+      const inputPosition = field.current.getBoundingClientRect();
+      const calendarSize = field.current.offsetHeight;
+      if (windowHeight < inputPosition.y + calendarSize) {
+        field.current.style.top = -calendarSize + "px";
+      } else {
+        field.current.style.top = inputHeight + "px";
+      }
+      if (windowWidth < inputPosition.x + blockWidth) {
+        field.current.style.left = inputWidth - blockWidth + "px";
+      }
+      field.current.style.opacity = "1";
+    }
+  }, []);
+  const next = () => {
+    setYear(year + 1);
+  };
+  const prev = () => {
+    setYear(year - 1);
+  };
+  const isBefore = (activeDate) => {
+    if (before) {
+      const beforeDate = before.getTime();
+      if (beforeDate > activeDate) return true;
+    }
+    return false;
+  };
+  const send = (searchDate) => {
+    if (isBefore(
+      (/* @__PURE__ */ new Date(
+        `${year}-${formating.Number(2, searchDate)}-${formating.Number(2, selecte.d)}`
+      )).getTime()
+    ))
+      return;
+    onChangeValue(
+      /* @__PURE__ */ new Date(
+        `${year}-${formating.Number(2, searchDate)}-${formating.Number(2, selecte.d)}`
+      )
+    );
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
+    /* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          isIconButton: true,
+          iconName: "DropdownArrowLeft16px",
+          onClick: prev,
+          variant: "secondary-gray",
+          size: "l"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { onClick: () => onType == null ? void 0 : onType("years"), className: cls["d"], children: [
+        year.toString(),
+        /* @__PURE__ */ jsx(Icon, { iconName: "DropdownArrowBottom16px" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          isIconButton: true,
+          iconName: "DropdownArrowRight16px",
+          onClick: next,
+          variant: "secondary-gray",
+          size: "l"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cls["monthGrid"], children: months.map((i, s) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: isBefore(
+          (/* @__PURE__ */ new Date(`${year}-${formating.Number(2, s + 1)}`)).getTime()
+        ) ? cls["m"] : cls["a"],
+        children: /* @__PURE__ */ jsx(
+          "b",
+          {
+            className: current.y === year && current.m === s + 1 ? cls["current"] : "",
+            onClick: () => send(s + 1),
+            children: i
+          }
+        )
+      },
+      s
+    )) })
+  ] }) });
+}
+export {
+  MonthPickerModal
+};

package/dist/components/DatePicker/YearPickerModal.d.ts

@@ -0,0 +1,9 @@
+type YearPickerModal = {
+    date: Date;
+    onChangeValue: (d: Date) => void;
+    setActive: (s: boolean) => void;
+    before?: Date;
+    onType?: (s: 'years') => void;
+};
+export declare function YearPickerModal({ date, onChangeValue, before, onType }: YearPickerModal): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DatePicker/YearPickerModal.js

@@ -0,0 +1,120 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { c as cls } from "../../styles.module-BZXDqssF.js";
+import { formating } from "../../utils/index.js";
+import { Button } from "../Button/Button.js";
+function YearPickerModal({
+  date,
+  onChangeValue,
+  before,
+  onType
+}) {
+  const field = useRef(null);
+  const _current = new Date(date);
+  const _selecte = new Date(date);
+  const current = {
+    y: _current.getFullYear(),
+    d: _current.getDate(),
+    m: _current.getMonth() + 1
+  };
+  const selecte = {
+    y: _selecte.getFullYear(),
+    d: _selecte.getDate(),
+    m: _selecte.getMonth() + 1
+  };
+  const [year, setYear] = useState(selecte.y);
+  const blockWidth = 368;
+  const firstYears = year - 7;
+  const years = Array.from(Array(15).keys()).map((i) => i + firstYears);
+  useEffect(() => {
+    var _a, _b, _c, _d;
+    const windowHeight = window.innerHeight;
+    const windowWidth = window.innerWidth;
+    if (field.current !== null) {
+      const inputWidth = ((_b = (_a = field == null ? void 0 : field.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.offsetWidth) || 0;
+      const inputHeight = (_d = (_c = field == null ? void 0 : field.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.offsetHeight;
+      const inputPosition = field.current.getBoundingClientRect();
+      const calendarSize = field.current.offsetHeight;
+      if (windowHeight < inputPosition.y + calendarSize) {
+        field.current.style.top = -calendarSize + "px";
+      } else {
+        field.current.style.top = inputHeight + "px";
+      }
+      if (windowWidth < inputPosition.x + blockWidth) {
+        field.current.style.left = inputWidth - blockWidth + "px";
+      }
+      field.current.style.opacity = "1";
+    }
+  }, []);
+  const next = () => {
+    setYear(year + 15);
+  };
+  const prev = () => {
+    setYear(year - 15);
+  };
+  const isBefore = (activeDate) => {
+    if (before) {
+      const beforeDate = before.getTime();
+      if (beforeDate > activeDate) return true;
+    }
+    return false;
+  };
+  const send = (searchDate) => {
+    if (isBefore(
+      (/* @__PURE__ */ new Date(
+        `${searchDate}-${formating.Number(2, selecte.m)}-${formating.Number(2, selecte.d)}`
+      )).getTime()
+    ))
+      return;
+    onChangeValue(
+      /* @__PURE__ */ new Date(
+        `${searchDate}-${formating.Number(2, selecte.m)}-${formating.Number(2, selecte.d)}`
+      )
+    );
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
+    /* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          isIconButton: true,
+          iconName: "DropdownArrowLeft16px",
+          onClick: prev,
+          variant: "secondary-gray",
+          size: "l"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { onClick: () => onType == null ? void 0 : onType("years"), className: cls["d"] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          isIconButton: true,
+          iconName: "DropdownArrowRight16px",
+          onClick: next,
+          variant: "secondary-gray",
+          size: "l"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cls["monthGrid"], children: years.map((i, s) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: isBefore(
+          (/* @__PURE__ */ new Date(`${i}-${formating.Number(2, current.m)}`)).getTime()
+        ) ? cls["m"] : cls["a"],
+        children: /* @__PURE__ */ jsx(
+          "b",
+          {
+            className: current.y === i ? cls["current"] : "",
+            onClick: () => send(i),
+            children: i
+          }
+        )
+      },
+      s
+    )) })
+  ] }) });
+}
+export {
+  YearPickerModal
+};

package/dist/components/DatePicker/constants.d.ts

@@ -4,3 +4,4 @@ export declare enum EDatePickerBeforeDate {
     CurrentDate3 = "2024-07-11"
 }
 export declare const week: string[];
+export declare const months: string[];

package/dist/components/DatePicker/constants.js

@@ -5,7 +5,22 @@ var EDatePickerBeforeDate = /* @__PURE__ */ ((EDatePickerBeforeDate2) => {
   return EDatePickerBeforeDate2;
 })(EDatePickerBeforeDate || {});
 const week = ["пн", "вт", "ср", "чт", "пт", "сб", "вс"];
+const months = [
+  "Январь",
+  "Февраль",
+  "Март",
+  "Апрель",
+  "Май",
+  "Июнь",
+  "Июль",
+  "Август",
+  "Сентябрь",
+  "Октябрь",
+  "Ноябрь",
+  "Декабрь"
+];
 export {
   EDatePickerBeforeDate,
+  months,
   week
 };

package/dist/components/TextArea/TextArea.js

@@ -7,18 +7,18 @@ import { Icon } from "../../icons/Icon.js";
 import { Button } from "../Button/Button.js";
 import { c as cls } from "../../Input-6mudFqTb.js";
 import { EInputVariant } from "../Input/constants.js";
-import '../../assets/TextArea.css';const textarea = "_textarea_191db_2";
-const label = "_label_191db_11";
-const s = "_s_191db_36";
-const m = "_m_191db_44";
-const l = "_l_191db_11";
+import '../../assets/TextArea.css';const textarea = "_textarea_mbbjz_2";
+const label = "_label_mbbjz_11";
+const s = "_s_mbbjz_35";
+const m = "_m_mbbjz_43";
+const l = "_l_mbbjz_11";
 const textareaCls = {
-  "textarea-wrapper": "_textarea-wrapper_191db_2",
+  "textarea-wrapper": "_textarea-wrapper_mbbjz_2",
   textarea,
-  "has-label": "_has-label_191db_8",
+  "has-label": "_has-label_mbbjz_8",
   label,
-  "has-left-slot": "_has-left-slot_191db_25",
-  "active-label": "_active-label_191db_28",
+  "has-left-slot": "_has-left-slot_mbbjz_24",
+  "active-label": "_active-label_mbbjz_27",
   s,
   m,
   l

package/dist/components/Uploader/Uploader.js

@@ -23,7 +23,7 @@ const MIME = {
 };
 const filesTyps = ["jpeg", "jpg", "png", "tiff", "gif"];
 const generateId = (min, max) => {
-  return Math.random() * (max - min) + min;
+  return Math.round(Math.random() * (max - min) + min);
 };
 const Uploader = forwardRef(
   (props, ref) => {

package/dist/styles.module-BZXDqssF.js

@@ -0,0 +1,36 @@
+import './assets/styles.css';const input = "_input_3fxwe_2";
+const wrapper = "_wrapper_3fxwe_41";
+const active = "_active_3fxwe_47";
+const button = "_button_3fxwe_35";
+const h = "_h_3fxwe_97";
+const b = "_b_3fxwe_35";
+const d = "_d_3fxwe_10";
+const m = "_m_3fxwe_118";
+const a = "_a_3fxwe_47";
+const prev = "_prev_3fxwe_120";
+const orange = "_orange_3fxwe_136";
+const current = "_current_3fxwe_161";
+const monthGrid = "_monthGrid_3fxwe_166";
+const cls = {
+  input,
+  "input-wrapper": "_input-wrapper_3fxwe_6",
+  "date-wrapper": "_date-wrapper_3fxwe_10",
+  "button-wrapper": "_button-wrapper_3fxwe_35",
+  wrapper,
+  active,
+  button,
+  "field-overlow": "_field-overlow_3fxwe_68",
+  "calendar-block": "_calendar-block_3fxwe_74",
+  h,
+  b,
+  d,
+  m,
+  a,
+  prev,
+  orange,
+  current,
+  monthGrid
+};
+export {
+  cls as c
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.20.5",
+  "version": "1.21.0",
   "type": "module",
   "exports": {
     ".": {

package/dist/DatePickerModal-BM0BgzTb.js

@@ -1,204 +0,0 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
-import { week } from "./components/DatePicker/constants.js";
-import { formating } from "./utils/index.js";
-import { Button } from "./components/Button/Button.js";
-import './assets/DatePickerModal.css';const input = "_input_1ndkx_2";
-const wrapper = "_wrapper_1ndkx_21";
-const active = "_active_1ndkx_27";
-const button = "_button_1ndkx_35";
-const h = "_h_1ndkx_81";
-const b = "_b_1ndkx_35";
-const d = "_d_1ndkx_6";
-const m = "_m_1ndkx_100";
-const a = "_a_1ndkx_27";
-const prev = "_prev_1ndkx_102";
-const orange = "_orange_1ndkx_118";
-const current = "_current_1ndkx_143";
-const cls = {
-  input,
-  "date-wrapper": "_date-wrapper_1ndkx_6",
-  wrapper,
-  active,
-  "input-wrapper": "_input-wrapper_1ndkx_31",
-  "button-wrapper": "_button-wrapper_1ndkx_35",
-  button,
-  "field-overlow": "_field-overlow_1ndkx_52",
-  "calendar-block": "_calendar-block_1ndkx_58",
-  h,
-  b,
-  d,
-  m,
-  a,
-  prev,
-  orange,
-  current
-};
-function DatePickerModal({
-  date,
-  onChangeValue,
-  setActive,
-  before
-}) {
-  const field = useRef(null);
-  const _current = new Date(date);
-  const _selecte = new Date(date);
-  const current2 = {
-    y: _current.getFullYear(),
-    d: _current.getDate(),
-    m: _current.getMonth() + 1
-  };
-  const selecte = {
-    y: _selecte.getFullYear(),
-    d: _selecte.getDate(),
-    m: _selecte.getMonth() + 1
-  };
-  const countWorkDays = 4;
-  const [month, setMonth] = useState({ y: selecte.y, m: selecte.m });
-  useEffect(() => {
-    const windowHeight = window.innerHeight;
-    if (field.current !== null) {
-      const inputPosition = field.current.getBoundingClientRect();
-      const calendarSize = field.current.offsetHeight;
-      if (windowHeight < inputPosition.y + calendarSize) {
-        field.current.style.top = -calendarSize + "px";
-      } else {
-        field.current.style.top = "65px";
-      }
-      field.current.style.opacity = "1";
-    }
-  }, [month]);
-  const countPrevDays = (e) => {
-    let dayOfWeek = e.getDay();
-    if (dayOfWeek === 0) dayOfWeek = 7;
-    return dayOfWeek - 1;
-  };
-  const currentMonthIndex = month.m - 1;
-  const currentMonthFull = new Date(month.y, currentMonthIndex);
-  const days = [];
-  const prevDays = () => {
-    const prevMonth = new Date(currentMonthFull);
-    prevMonth.setDate(prevMonth.getDate() - 1);
-    const lastDayPrevMohth = prevMonth.getDate();
-    const prevList = [];
-    for (let i = 0; i < countPrevDays(currentMonthFull); i++) {
-      prevList.push(lastDayPrevMohth - i);
-    }
-    prevList.reverse();
-    return prevList;
-  };
-  const prevDaysArray = prevDays();
-  while (currentMonthFull.getMonth() === currentMonthIndex) {
-    days.push(currentMonthFull.getDate());
-    currentMonthFull.setDate(currentMonthFull.getDate() + 1);
-  }
-  const nextDays = () => {
-    const totalViewDays = 42;
-    const daysCount = totalViewDays - (prevDaysArray.length + days.length);
-    const nextList = [];
-    for (let i = 1; i <= daysCount; i++) {
-      nextList.push(i);
-    }
-    return nextList;
-  };
-  const nextDaysArray = nextDays();
-  const update = (m2, y) => {
-    y = m2 > 12 ? y + 1 : m2 < 1 ? y - 1 : y;
-    m2 = m2 > 12 ? 1 : m2 < 1 ? 12 : m2;
-    return { y, m: m2 };
-  };
-  const onExit = () => {
-    setActive(false);
-  };
-  const next = () => {
-    setMonth(update(month.m + 1, month.y));
-  };
-  const prev2 = () => {
-    setMonth(update(month.m - 1, month.y));
-  };
-  const isBefore = (activeDate) => {
-    if (before) {
-      const beforeDate = before.getTime();
-      if (beforeDate > activeDate) return true;
-    }
-    return false;
-  };
-  const send = (searchDate) => {
-    if (isBefore(
-      (/* @__PURE__ */ new Date(
-        `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
-      )).getTime()
-    ))
-      return;
-    onChangeValue(
-      /* @__PURE__ */ new Date(
-        `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
-      )
-    );
-    onExit();
-  };
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
-    /* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          isIconButton: true,
-          iconName: "DropdownArrowLeft16px",
-          onClick: prev2,
-          variant: "secondary-gray",
-          size: "l"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: cls["d"], children: [
-        formating.Month(month.m).name,
-        "’",
-        month.y.toString().slice(-2)
-      ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          isIconButton: true,
-          iconName: "DropdownArrowRight16px",
-          onClick: next,
-          variant: "secondary-gray",
-          size: "l"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: cls["b"], children: [
-      week.map((i, s) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `${s > countWorkDays ? [cls["m"], cls["orange"]].join(" ") : cls["m"]}`,
-          children: i
-        },
-        `v${s}`
-      )),
-      prevDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key)),
-      days.map((i, s) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: isBefore(
-            (/* @__PURE__ */ new Date(
-              `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, i)}`
-            )).getTime()
-          ) ? cls["m"] : cls["a"],
-          children: i !== 0 ? /* @__PURE__ */ jsx(
-            "b",
-            {
-              className: current2.y === month.y && current2.m === month.m && current2.d === i ? cls["current"] : "",
-              onClick: () => send(i),
-              children: i
-            }
-          ) : /* @__PURE__ */ jsx("p", {})
-        },
-        s
-      )),
-      nextDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key))
-    ] })
-  ] }) });
-}
-export {
-  DatePickerModal as D,
-  cls as c
-};

package/dist/assets/DatePickerModal.css

@@ -1 +0,0 @@
-._input_1ndkx_2{padding-right:var(--space-3xl)}._date-wrapper_1ndkx_6{position:relative;width:100%}._date-wrapper_1ndkx_6:hover input{background:var(--input-bg-color-hover)}._date-wrapper_1ndkx_6:before{position:absolute;top:0;right:60px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}._wrapper_1ndkx_21{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_1ndkx_21._active_1ndkx_27{border-bottom:1px solid var(--citrine-100)}._input-wrapper_1ndkx_31{flex:1}._button-wrapper_1ndkx_35{position:absolute;top:0;right:0;z-index:2;display:flex;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_1ndkx_35{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_1ndkx_52{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_1ndkx_58{position:absolute;z-index:3;display:flex;flex-direction:column;width:368px;max-height:none;padding:16px;font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:#fff;border-radius:var(--control-radius-s);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;opacity:0;transition:height .5s ease-in;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._calendar-block_1ndkx_58 ._h_1ndkx_81{display:flex;width:100%;color:var(--black-100)}._calendar-block_1ndkx_58 ._b_1ndkx_35{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_1ndkx_58 ._d_1ndkx_6{display:flex;flex:1;align-items:center;justify-content:center;color:var(--black-100)}._calendar-block_1ndkx_58 ._m_1ndkx_100,._calendar-block_1ndkx_58 ._a_1ndkx_27,._calendar-block_1ndkx_58 ._prev_1ndkx_102{width:48px;height:48px;overflow:hidden}._calendar-block_1ndkx_58 ._m_1ndkx_100{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_1ndkx_58 ._m_1ndkx_100 b{font-weight:var(--font-weight-text-regular)}._calendar-block_1ndkx_58 ._orange_1ndkx_118{color:var(--citrine-100)}._calendar-block_1ndkx_58 ._a_1ndkx_27{color:var(--black-100);border-radius:var(--control-radius-s)}._calendar-block_1ndkx_58 ._a_1ndkx_27 b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:var(--font-weight-text-regular);cursor:pointer}._calendar-block_1ndkx_58 ._a_1ndkx_27 b:hover{background:var(--black-10)}._calendar-block_1ndkx_58 ._a_1ndkx_27 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_1ndkx_58 ._current_1ndkx_143{background:var(--sapphire-10);border-radius:var(--control-radius-s)}