mimir-ui-kit 1.21.3 → 1.23.0

package/dist/assets/ListFiles.css

@@ -0,0 +1 @@
+._file-info_1qfel_2{display:flex;flex-direction:column;gap:var(--space-xs);overflow:hidden}._file-info_1qfel_2 ._file-info-size_1qfel_8{font-family:var(--font-inter),sans-serif;font-size:var(--size-text-m);font-weight:var(--font-weight-text-regular);line-height:var(--line-height-text-xxs);text-align:left;color:var(--disabled-color)}._file-info_1qfel_2 ._file-info-name-wrapper_1qfel_16{display:table;table-layout:fixed;width:100%}._file-info_1qfel_2 ._file-info-name-wrapper_1qfel_16 ._file-info-name_1qfel_16{font-family:var(--font-inter),sans-serif;font-size:var(--size-text-l2);font-weight:var(--font-weight-text-regular);line-height:var(--line-height-text-xl);text-align:left;color:var(--black-100);display:table-cell;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._file-upload-container_1qfel_34{display:flex;flex-direction:column;width:100%;padding-left:0;margin-bottom:0;gap:var(--space-xs)}._file-upload-container_1qfel_34 ._file-upload-container-item_1qfel_42{display:flex;justify-content:space-between;align-items:center;background:var(--white);position:relative;padding:var(--space-xs) var(--space-m);border-radius:var(--control-radius)}._file-upload-container_1qfel_34 ._file-upload-container-item_1qfel_42 button{background:var(--black-5);position:absolute;right:var(--space-2xs);top:var(--space-2xs)}._file-upload-container_1qfel_34 ._file-upload-container-item_1qfel_42 span{display:flex}

package/dist/assets/ListPhotos.css

@@ -1 +1 @@
-._list-photos_19pfh_2{display:flex;gap:var(--space-m);overflow-x:auto}._list-photos_19pfh_2::-webkit-scrollbar{display:none}._list-photos_19pfh_2 li{position:relative;flex-shrink:0;width:64px;height:64px;overflow:hidden;border-radius:var(--control-radius);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703}._list-photos_19pfh_2 img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}._list-photos_19pfh_2 button{position:absolute;top:4px;right:4px}
+._list-photos_16pts_2{display:flex;gap:var(--space-m);overflow-x:auto}._list-photos_16pts_2::-webkit-scrollbar{display:none}._list-photos_16pts_2 li{position:relative;flex-shrink:0;width:var(--space-4xxl);height:var(--space-4xxl);overflow:hidden;border-radius:var(--control-radius);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703}._list-photos_16pts_2 img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}._list-photos_16pts_2 button{position:absolute;top:var(--space-2xs);right:var(--space-2xs)}

package/dist/assets/Uploader.css

@@ -1 +1 @@
-._upload-file__wrapper_165vi_2{position:relative;width:100%}._upload-file__wrapper_165vi_2 label{display:flex;flex-direction:column;gap:var(--space-m);align-items:center;justify-content:center}._upload-file__wrapper_165vi_2 label button{z-index:1}._upload-file__wrapper_165vi_2 label b{color:var(--black-100);font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l2);font-family:var(--font-inter);font-style:normal;line-height:130%;text-align:center}._upload-file__wrapper_165vi_2 label ._upload-text_165vi_25{color:var(--disabled-color);font-weight:var(--font-weight-text-regular);font-size:var(--size-text-m);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-xxs);text-align:center}._upload-file-input_165vi_35{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;opacity:0}
+._upload-file-wrapper_n3hxs_2{position:relative;width:100%}._upload-file-wrapper_n3hxs_2 label{display:flex;flex-direction:column;gap:var(--space-m);align-items:center;justify-content:center}._upload-file-wrapper_n3hxs_2 label button{z-index:1}._upload-file-wrapper_n3hxs_2 label b{color:var(--black-100);font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l2);font-family:var(--font-inter);font-style:normal;line-height:130%;text-align:center}._upload-file-wrapper_n3hxs_2 label ._upload-text_n3hxs_25{color:var(--disabled-color);font-weight:var(--font-weight-text-regular);font-size:var(--size-text-m);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-xxs);text-align:center}._upload-file-input_n3hxs_35{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;opacity:0}

package/dist/assets/UploaderPhotos.css

@@ -1 +1 @@
-._upload-file__wrapper_17bcu_2{display:flex;flex-direction:column;gap:var(--space-m);overflow:hidden}
+._upload-file-wrapper_2zki8_2{display:flex;flex-direction:column;gap:var(--space-m);overflow:hidden}

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[];