mimir-ui-kit 1.24.3 → 1.24.4

package/dist/assets/Drawer.css

@@ -1 +1 @@
-._drawer_1atax_3{--drawer-width: 808px;--drawer-z-index: 10000;position:fixed;z-index:10000;z-index:var(--drawer-z-index);display:flex;flex-direction:column;width:808px;width:var(--drawer-width);height:100%;overflow:auto;background-color:var(--black-5);transition:all .3s ease;pointer-events:none}._drawer_1atax_3::-webkit-scrollbar{width:3px}._drawer_1atax_3::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:2px}._drawer_1atax_3::-webkit-scrollbar-track{background-color:var(--white)}._drawer_1atax_3 ._content_1atax_27{position:relative;display:flex;flex:1;flex-direction:column;padding:var(--space-m) var(--space-4xl) var(--space-4xl);transition:all .3s ease}@media (max-width: 600px){._drawer_1atax_3 ._content_1atax_27{--drawer-width: 100%;padding:var(--space-m)}}._drawer_1atax_3 ._content_1atax_27._is-loading_1atax_41{align-items:center;justify-content:center}._drawer_1atax_3 ._header_1atax_45{display:flex;gap:var(--space-xs);min-height:68px}._drawer_1atax_3 ._header_1atax_45:not(:last-child){margin-bottom:var(--space-2xl)}._drawer_1atax_3 ._header_1atax_45._sticky-header_1atax_53{position:-webkit-sticky;position:sticky;top:0;left:0;background-color:var(--black-5)}._drawer_1atax_3 ._header_1atax_45 ._title_1atax_59{flex:1;align-self:flex-end;font-weight:var(--font-weight-text-medium);font-size:var(--size-text-xl3);line-height:var(--line-height-text-s1);letter-spacing:.7px}@media (max-width: 600px){._drawer_1atax_3 ._header_1atax_45 ._title_1atax_59{font-size:var(--size-text-xl2);line-height:var(--line-height-text-xs)}}._drawer_1atax_3 ._header_1atax_45 ._space_1atax_73{flex:0 0 var(--button-height-m)}@media (max-width: 600px){._drawer_1atax_3 ._header_1atax_45{min-height:55px}._drawer_1atax_3 ._header_1atax_45:not(:last-child){margin-bottom:var(--space-m)}}._drawer_1atax_3 ._inner_1atax_84{flex:1}._drawer_1atax_3 ._button_1atax_87{position:absolute;top:var(--space-m);right:var(--space-m)}._drawer_1atax_3 ._footer_1atax_92{display:block;padding-top:var(--space-4xl)}@media (max-width: 600px){._drawer_1atax_3 ._footer_1atax_92{padding-top:var(--space-m)}}._drawer_1atax_3 ._footer-button_1atax_101{display:block;margin-left:auto}._drawer_1atax_3._left_1atax_105{top:0;left:-100%}._drawer_1atax_3._right_1atax_109{top:0;right:-100%}._drawer_1atax_3._full_1atax_113{top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-height:100vh;border-radius:0;transform:scale(.95);opacity:0;transition:transform .3s ease-in-out,opacity .3s ease-in-out}._drawer_1atax_3._bottom_1atax_123{--drawer-width: calc(100% - var(--space-m));right:50%;bottom:-100%;left:50%;height:-webkit-max-content;height:-moz-max-content;height:max-content;max-height:calc(100% - var(--space-xs));border-top-left-radius:var(--control-radius);border-top-right-radius:var(--control-radius);transform:translate(-50%)}._drawer_1atax_3._bottom_1atax_123._full-bottom-height_1atax_134{height:calc(100% - var(--space-xs))}._drawer_1atax_3._bottom_1atax_123._is-loading_1atax_41{height:50vh}._drawer_1atax_3._opened_1atax_140{transition:all .3s ease;pointer-events:auto}._drawer_1atax_3._opened_1atax_140._left_1atax_105{left:0%;transition:left .3s ease}._drawer_1atax_3._opened_1atax_140._right_1atax_109{right:0%;transition:right .3s ease}._drawer_1atax_3._opened_1atax_140._bottom_1atax_123{bottom:0%}._drawer_1atax_3._opened_1atax_140._full_1atax_113{transform:scale(1);opacity:1}._drawer_1atax_3._is-closing_1atax_159._left_1atax_105{left:-100%}._drawer_1atax_3._is-closing_1atax_159._right_1atax_109{right:-100%}._drawer_1atax_3._is-closing_1atax_159._bottom_1atax_123{bottom:-100%}._drawer_1atax_3._is-closing_1atax_159._full_1atax_113{transform:scale(.95);opacity:0}@media (max-width: 1440px){._drawer_1atax_3{--drawer-width: 608px}}@media (max-width: 1280px){._drawer_1atax_3{--drawer-width: 648px}}@media (max-width: 768px){._drawer_1atax_3{--drawer-width: 584px}}@media (max-width: 600px){._drawer_1atax_3{--drawer-width: 100%}._drawer_1atax_3._bottom_1atax_123{--drawer-width: calc(100% - var(--space-xs))}}._overlay_1atax_196{--overlay-z-index: 9990;position:fixed;top:0;left:0;z-index:9990;z-index:var(--overlay-z-index);width:100%;height:100%;background-color:#0009;opacity:0;transition:all .3s ease}._overlay_1atax_196._opened_1atax_140{opacity:1;transition:all .3s ease}._overlay_1atax_196._is-closing_1atax_159{opacity:0;transition:all .3s ease}
+._drawer_91s5k_3{--drawer-width: 808px;--drawer-z-index: 10000;position:fixed;z-index:10000;z-index:var(--drawer-z-index);display:flex;flex-direction:column;width:808px;width:var(--drawer-width);height:100%;overflow:auto;background-color:var(--black-5);transition:all .3s ease;pointer-events:none}._drawer_91s5k_3::-webkit-scrollbar{width:3px}._drawer_91s5k_3::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:2px}._drawer_91s5k_3::-webkit-scrollbar-track{background-color:var(--white)}._drawer_91s5k_3 ._content_91s5k_27{position:relative;display:flex;flex:1;flex-direction:column;padding:var(--space-m) var(--space-4xl) var(--space-4xl);transition:all .3s ease}@media (max-width: 600px){._drawer_91s5k_3 ._content_91s5k_27{--drawer-width: 100%;padding:var(--space-m)}}._drawer_91s5k_3 ._content_91s5k_27._is-loading_91s5k_41{align-items:center;justify-content:center}._drawer_91s5k_3 ._header_91s5k_45{display:flex;gap:var(--space-xs);min-height:68px}._drawer_91s5k_3 ._header_91s5k_45:not(:last-child){margin-bottom:var(--space-2xl)}._drawer_91s5k_3 ._header_91s5k_45._sticky-header_91s5k_53{position:-webkit-sticky;position:sticky;top:0;left:0;background-color:var(--black-5)}._drawer_91s5k_3 ._header_91s5k_45 ._title_91s5k_59{flex:1;align-self:flex-end;font-weight:var(--font-weight-text-medium);font-size:var(--size-text-xl3);line-height:var(--line-height-text-s1);letter-spacing:.7px}@media (max-width: 600px){._drawer_91s5k_3 ._header_91s5k_45 ._title_91s5k_59{font-size:var(--size-text-xl2);line-height:var(--line-height-text-xs)}}._drawer_91s5k_3 ._header_91s5k_45 ._space_91s5k_73{flex:0 0 var(--button-height-m)}@media (max-width: 600px){._drawer_91s5k_3 ._header_91s5k_45{min-height:55px}._drawer_91s5k_3 ._header_91s5k_45:not(:last-child){margin-bottom:var(--space-m)}}._drawer_91s5k_3 ._inner_91s5k_84{flex:1}._drawer_91s5k_3 ._button_91s5k_87{position:absolute;top:var(--space-m);right:var(--space-m)}._drawer_91s5k_3 ._footer_91s5k_92{display:block;padding-top:var(--space-4xl)}@media (max-width: 600px){._drawer_91s5k_3 ._footer_91s5k_92{padding-top:var(--space-m)}}._drawer_91s5k_3 ._footer-button_91s5k_101{display:block;margin-left:auto}._drawer_91s5k_3._left_91s5k_105{top:0;left:-100%}._drawer_91s5k_3._right_91s5k_109{top:0;right:-100%}._drawer_91s5k_3._full_91s5k_113{top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-height:100vh;border-radius:0;transform:scale(.95);opacity:0;transition:transform .3s ease-in-out,opacity .3s ease-in-out}._drawer_91s5k_3._bottom_91s5k_123{--drawer-width: calc(100% - var(--space-m));right:50%;bottom:-100%;left:50%;height:-webkit-max-content;height:-moz-max-content;height:max-content;max-height:calc(100% - var(--space-xs));border-top-left-radius:var(--control-radius);border-top-right-radius:var(--control-radius);transform:translate(-50%)}._drawer_91s5k_3._bottom_91s5k_123._full-bottom-height_91s5k_134{height:calc(100% - var(--space-xs))}._drawer_91s5k_3._bottom_91s5k_123._is-loading_91s5k_41{height:50vh}._drawer_91s5k_3._opened_91s5k_140{transition:all .3s ease;pointer-events:auto}._drawer_91s5k_3._opened_91s5k_140._left_91s5k_105{left:0%;transition:left .3s ease}._drawer_91s5k_3._opened_91s5k_140._right_91s5k_109{right:0%;transition:right .3s ease}._drawer_91s5k_3._opened_91s5k_140._bottom_91s5k_123{bottom:0%}._drawer_91s5k_3._opened_91s5k_140._full_91s5k_113{transform:scale(1);opacity:1}._drawer_91s5k_3._is-closing_91s5k_159._left_91s5k_105{left:-100%}._drawer_91s5k_3._is-closing_91s5k_159._right_91s5k_109{right:-100%}._drawer_91s5k_3._is-closing_91s5k_159._bottom_91s5k_123{bottom:-100%}._drawer_91s5k_3._is-closing_91s5k_159._full_91s5k_113{transform:scale(.95);opacity:0}@media (max-width: 1440px){._drawer_91s5k_3{--drawer-width: 608px}}@media (max-width: 1280px){._drawer_91s5k_3{--drawer-width: 648px}}@media (max-width: 768px){._drawer_91s5k_3{--drawer-width: 584px}}@media (max-width: 600px){._drawer_91s5k_3{--drawer-width: 100%}._drawer_91s5k_3._bottom_91s5k_123{--drawer-width: calc(100% - var(--space-xs))}}._overlay_91s5k_196{--overlay-z-index: 9990;position:fixed;top:0;left:0;z-index:9990;z-index:var(--overlay-z-index);width:100%;height:100%;background-color:#0009;opacity:0;transition:all .3s ease}._overlay_91s5k_196._opened_91s5k_140{opacity:1;transition:all .3s ease}._overlay_91s5k_196._opened_91s5k_140._unmount_91s5k_212{z-index:var(--overlay-z-index);-webkit-appearance:none;-moz-appearance:none;appearance:none}._overlay_91s5k_196._is-closing_91s5k_159{opacity:0;transition:all .3s ease}._overlay_91s5k_196._unmount_91s5k_212{z-index:-1;-webkit-appearance:none;-moz-appearance:none;appearance:none}

package/dist/assets/ListFiles.css

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

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_1m1u4_2{display:flex;gap:var(--space-m);overflow-x:auto}._list-photos_1m1u4_2::-webkit-scrollbar{display:none}._list-photos_1m1u4_2 ._list-photos-item_1m1u4_10{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_1m1u4_2 ._list-photos-image_1m1u4_19{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}._list-photos_1m1u4_2 ._delete-button_1m1u4_24{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/components/Drawer/Drawer.d.ts

@@ -10,6 +10,10 @@ type TProps = {
      * Флаг отвечачающий за показ/скрытие.
      */
     isOpen?: boolean;
+    /**
+     * Флаг отвечачающий за то, должен ли компонент полность размонтироваться .
+     */
+    unmount?: boolean;
     /**
      * Настраиваемый паддинг для body, что бы избежать скачка контента при overflow: hidden
      */
@@ -48,5 +52,5 @@ type TProps = {
 /**
  * Компонент шторки, который может выезжать слева, справа или внизу.
  */
-export declare const Drawer: ({ isOpen, onClose, title, className, isLoading, stickyHeader, fullBottomHeight, position, paddingRight, footer, children }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Drawer: ({ isOpen, onClose, title, className, unmount, isLoading, stickyHeader, fullBottomHeight, position, paddingRight, footer, children }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Drawer/Drawer.js

@@ -10,40 +10,42 @@ import { Button } from "../Button/Button.js";
 import { EButtonVariantDefault, EButtonSize } from "../Button/constants.js";
 import { Loader } from "../Loader/Loader.js";
 import { Portal } from "../Portal/Portal.js";
-import '../../assets/Drawer.css';const drawer = "_drawer_1atax_3";
-const content = "_content_1atax_27";
-const header = "_header_1atax_45";
-const title = "_title_1atax_59";
-const space = "_space_1atax_73";
-const inner = "_inner_1atax_84";
-const button = "_button_1atax_87";
-const footer = "_footer_1atax_92";
-const left = "_left_1atax_105";
-const right = "_right_1atax_109";
-const full = "_full_1atax_113";
-const bottom = "_bottom_1atax_123";
-const opened = "_opened_1atax_140";
-const overlay = "_overlay_1atax_196";
+import '../../assets/Drawer.css';const drawer = "_drawer_91s5k_3";
+const content = "_content_91s5k_27";
+const header = "_header_91s5k_45";
+const title = "_title_91s5k_59";
+const space = "_space_91s5k_73";
+const inner = "_inner_91s5k_84";
+const button = "_button_91s5k_87";
+const footer = "_footer_91s5k_92";
+const left = "_left_91s5k_105";
+const right = "_right_91s5k_109";
+const full = "_full_91s5k_113";
+const bottom = "_bottom_91s5k_123";
+const opened = "_opened_91s5k_140";
+const overlay = "_overlay_91s5k_196";
+const unmount = "_unmount_91s5k_212";
 const cls = {
   drawer,
   content,
-  "is-loading": "_is-loading_1atax_41",
+  "is-loading": "_is-loading_91s5k_41",
   header,
-  "sticky-header": "_sticky-header_1atax_53",
+  "sticky-header": "_sticky-header_91s5k_53",
   title,
   space,
   inner,
   button,
   footer,
-  "footer-button": "_footer-button_1atax_101",
+  "footer-button": "_footer-button_91s5k_101",
   left,
   right,
   full,
   bottom,
-  "full-bottom-height": "_full-bottom-height_1atax_134",
+  "full-bottom-height": "_full-bottom-height_91s5k_134",
   opened,
-  "is-closing": "_is-closing_1atax_159",
-  overlay
+  "is-closing": "_is-closing_91s5k_159",
+  overlay,
+  unmount
 };
 const ANIMATION_DELAY = 300;
 const Drawer = ({
@@ -51,6 +53,7 @@ const Drawer = ({
   onClose,
   title: title2,
   className,
+  unmount: unmount2 = true,
   isLoading = false,
   stickyHeader,
   fullBottomHeight = false,
@@ -107,7 +110,7 @@ const Drawer = ({
     [cls["full-bottom-height"]]: fullBottomHeight,
     [cls["is-loading"]]: isLoading
   };
-  if (!isOpen) {
+  if (!isOpen && unmount2) {
     return null;
   }
   return /* @__PURE__ */ jsxs(Portal, { children: [
@@ -163,7 +166,19 @@ const Drawer = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: classNames(cls.overlay, mods), onClick: handleClose })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(
+          cls.overlay,
+          {
+            [cls.unmount]: !unmount2
+          },
+          mods
+        ),
+        onClick: handleClose
+      }
+    )
   ] });
 };
 export {

package/dist/components/ListFiles/ListFiles.d.ts

@@ -0,0 +1,26 @@
+export type TListFiles = {
+    /**
+     * Массив фото
+     */
+    value: TFilesDetail[];
+    /**
+     * функция -callback, которая вызывается при изменении списка и передает обновленный список и deleteId,
+     */
+    onChange?: (e: TFileValue) => void;
+};
+export type TFileItem = {
+    id: number;
+    url: string;
+};
+export type TFileValue = {
+    deleteId?: number;
+    list: TFilesDetail[];
+};
+export type TFilesDetail = {
+    id: number;
+    url: string;
+    name: string;
+    size?: number;
+    type?: string;
+};
+export declare function ListFiles({ value, onChange }: TListFiles): import("react/jsx-runtime").JSX.Element;

package/dist/components/ListFiles/ListFiles.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { formating } from "../../utils/index.js";
+import { Button } from "../Button/Button.js";
+import '../../assets/ListFiles.css';const cls = {
+  "file-info": "_file-info_exvu6_2",
+  "file-info-size": "_file-info-size_exvu6_8",
+  "file-info-name-wrapper": "_file-info-name-wrapper_exvu6_16",
+  "file-info-name": "_file-info-name_exvu6_16",
+  "file-upload-container": "_file-upload-container_exvu6_34",
+  "file-upload-container-item": "_file-upload-container-item_exvu6_42",
+  "delete-button": "_delete-button_exvu6_51"
+};
+function ListFiles({ value, onChange }) {
+  const [list, setList] = useState(value);
+  useEffect(() => {
+    setList(value);
+  }, [value]);
+  const onDelete = async (id) => {
+    const newList = [...list.filter((el) => el.id !== id)];
+    setList(newList);
+    onChange == null ? void 0 : onChange({ deleteId: id, list: newList });
+  };
+  return /* @__PURE__ */ jsx("ul", { className: cls["file-upload-container"], children: list.map((el, key) => /* @__PURE__ */ jsxs("li", { className: cls["file-upload-container-item"], children: [
+    /* @__PURE__ */ jsxs("div", { className: cls["file-info"], children: [
+      (el == null ? void 0 : el.size) && /* @__PURE__ */ jsxs("span", { className: cls["file-info-size"], children: [
+        " ",
+        formating.Size(el == null ? void 0 : el.size)
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: cls["file-info-name-wrapper"], children: /* @__PURE__ */ jsx("div", { className: cls["file-info-name"], children: el.name }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        isIconButton: true,
+        iconName: "Close12px",
+        size: "m-s",
+        variant: "secondary-gray",
+        className: cls["delete-button"],
+        onClick: () => onDelete(el.id)
+      }
+    )
+  ] }, key)) });
+}
+export {
+  ListFiles
+};

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

@@ -0,0 +1,3 @@
+import { TFilesDetail } from './ListFiles';
+
+export declare const photos: TFilesDetail[];

package/dist/components/ListFiles/constants.js

@@ -0,0 +1,33 @@
+const photos = [
+  {
+    id: 111,
+    name: "ООО “КИЗ-СТРОЙ” - Свидетельство о регистрации (06.12.2003).xls",
+    url: "https://i.pinimg.com/736x/5a/e6/12/5ae612a7ecf50870c8f41961fefc332f.jpg",
+    size: 1024,
+    type: "image/png"
+  },
+  {
+    id: 112,
+    name: "ООО “КИЗ-СТРОЙ” - Доверенность (20.10.2005).xls",
+    url: "https://i1.sndcdn.com/artworks-rQAPPfrs44UvRwIz-WJkvyQ-t500x500.jpg",
+    size: 1024,
+    type: "image/png"
+  },
+  {
+    id: 113,
+    name: "Скан паспорта.pdf",
+    url: "https://i1.sndcdn.com/avatars-000095020320-0pmjnu-t500x500.jpg",
+    size: 2064,
+    type: "image/png"
+  },
+  {
+    id: 114,
+    name: "Прочие документы.xls",
+    url: "https://i1.sndcdn.com/avatars-000151937348-27m28p-t500x500.jpg",
+    size: 1024,
+    type: "image/png"
+  }
+];
+export {
+  photos
+};

package/dist/components/ListFiles/index.d.ts

@@ -0,0 +1,2 @@
+export { ListFiles } from './ListFiles';
+export type { ListFiles as TListFiles } from './ListFiles';

package/dist/components/ListFiles/index.js

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

package/dist/components/ListPhotos/ListPhotos.js

@@ -2,7 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Button } from "../Button/Button.js";
 import '../../assets/ListPhotos.css';const cls = {
-  "list-photos": "_list-photos_19pfh_2"
+  "list-photos": "_list-photos_1m1u4_2",
+  "list-photos-item": "_list-photos-item_1m1u4_10",
+  "list-photos-image": "_list-photos-image_1m1u4_19",
+  "delete-button": "_delete-button_1m1u4_24"
 };
 function ListPhotos({ value, onChange }) {
   const [list, setList] = useState(value);
@@ -14,8 +17,8 @@ function ListPhotos({ value, onChange }) {
     setList(newList);
     onChange == null ? void 0 : onChange({ deleteId: id, list: newList });
   };
-  return /* @__PURE__ */ jsx("ul", { className: cls["list-photos"], children: list.map((el) => /* @__PURE__ */ jsxs("li", { children: [
-    /* @__PURE__ */ jsx("img", { src: el.url, alt: "" }),
+  return /* @__PURE__ */ jsx("ul", { className: cls["list-photos"], children: list.map((el) => /* @__PURE__ */ jsxs("li", { className: cls["list-photos-item"], children: [
+    /* @__PURE__ */ jsx("img", { className: cls["list-photos-image"], src: el.url, alt: "" }),
     onChange && /* @__PURE__ */ jsx(
       Button,
       {
@@ -23,6 +26,7 @@ function ListPhotos({ value, onChange }) {
         iconName: "Close12px",
         size: "m-s",
         variant: "secondary-gray",
+        className: cls["delete-button"],
         onClick: () => onDelete(el.id)
       }
     )

package/dist/components/Uploader/Uploader.js

@@ -3,9 +3,9 @@ import { forwardRef, useRef, useId } from "react";
 import { Icon } from "../../icons/Icon.js";
 import { Button } from "../Button/Button.js";
 import '../../assets/Uploader.css';const cls = {
-  "upload-file__wrapper": "_upload-file__wrapper_165vi_2",
-  "upload-text": "_upload-text_165vi_25",
-  "upload-file-input": "_upload-file-input_165vi_35"
+  "upload-file-wrapper": "_upload-file-wrapper_n3hxs_2",
+  "upload-text": "_upload-text_n3hxs_25",
+  "upload-file-input": "_upload-file-input_n3hxs_35"
 };
 const MIME = {
   jpeg: "image/jpeg",
@@ -52,7 +52,7 @@ const Uploader = forwardRef(
       var _a;
       (_a = uploaderRef.current) == null ? void 0 : _a.click();
     };
-    return /* @__PURE__ */ jsxs("div", { className: cls["upload-file__wrapper"], ref, children: [
+    return /* @__PURE__ */ jsxs("div", { className: cls["upload-file-wrapper"], ref, children: [
       /* @__PURE__ */ jsx(
         "input",
         {

package/dist/components/UploaderFiles/UploaderFiles.d.ts

@@ -0,0 +1,38 @@
+import { TFilesDetail } from '../ListFiles/ListFiles';
+import { imageTypesArr } from '../Uploader/constants';
+import { TFileItem } from '../Uploader/Uploader';
+
+export type TUploaderFiles = {
+    /**
+     * Массив разрешенных типов файлов для настройки валидации
+     * 'jpeg' | 'jpg' | 'png' | 'tiff' | 'gif' | 'doc' | 'xls' | 'pdf' |'docx' |  'txt'
+     */
+    filesType: imageTypesArr[];
+    /**
+     * Наименование передаваемого массива файлов
+     */
+    arrayName: string;
+    /**
+     * Максимальный размер файлов.
+     */
+    maxSize: number;
+    /**
+     * Функция обратного вызова, передает параметры type и data,
+     * type 'add' в data передает массив файлов,
+     * type:'delete' в data передает id удаленного файла
+     */
+    onChange: (j: TOnChangeFilesUpdate) => void;
+    /**
+     * Передаваемые файлы.
+     */
+    value?: TFilesDetail[];
+    /**
+     * Максимальное количество файлов.
+     */
+    maxFiles: number;
+};
+export type TOnChangeFilesUpdate = {
+    type: string;
+    data: TFileItem[] | number;
+};
+export declare const UploaderFiles: import('react').ForwardRefExoticComponent<TUploaderFiles & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/UploaderFiles/UploaderFiles.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { forwardRef, useState, useEffect } from "react";
+import { ListFiles } from "../ListFiles/ListFiles.js";
+import { Uploader } from "../Uploader/Uploader.js";
+import '../../assets/UploaderPhotos.css';const cls = {
+  "upload-file-wrapper": "_upload-file-wrapper_2zki8_2"
+};
+const UploaderFiles = forwardRef(
+  (props, ref) => {
+    const { filesType, arrayName, maxSize, onChange, value, maxFiles } = props;
+    const [files, setFiles] = useState(value || []);
+    const isMaxFilesReached = files.length >= maxFiles;
+    useEffect(() => {
+      if (value) {
+        setFiles(value);
+      }
+    }, [value]);
+    const onChangeValue = (e) => {
+      const newFiles = [
+        ...files,
+        ...e.value.map((el) => {
+          var _a, _b, _c;
+          return {
+            id: el.id,
+            url: "",
+            size: (_a = el == null ? void 0 : el.file) == null ? void 0 : _a.size,
+            name: (_b = el == null ? void 0 : el.file) == null ? void 0 : _b.name,
+            type: (_c = el == null ? void 0 : el.file) == null ? void 0 : _c.type
+          };
+        })
+      ];
+      setFiles(newFiles);
+      onChange == null ? void 0 : onChange({ type: "add", data: e.value });
+    };
+    const onDelete = (j) => {
+      setFiles(j.list);
+      if (j.deleteId) onChange == null ? void 0 : onChange({ type: "delete", data: j.deleteId });
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames(
+          cls["upload-file-wrapper"],
+          isMaxFilesReached && cls.disabled
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Uploader,
+            {
+              filesType,
+              arrayName,
+              maxSize,
+              onChangeValue,
+              ref,
+              maxFiles,
+              isDisabled: isMaxFilesReached
+            }
+          ),
+          /* @__PURE__ */ jsx(ListFiles, { value: files, onChange: onDelete })
+        ]
+      }
+    );
+  }
+);
+export {
+  UploaderFiles
+};

package/dist/components/UploaderFiles/index.d.ts

@@ -0,0 +1,2 @@
+export { UploaderFiles } from './UploaderFiles';
+export type { TUploaderFiles, TOnChangeFilesUpdate } from './UploaderFiles';

package/dist/components/UploaderFiles/index.js

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

package/dist/components/UploaderPhotos/UploaderPhotos.js

@@ -4,7 +4,7 @@ import { forwardRef, useState, useEffect } from "react";
 import { ListPhotos } from "../ListPhotos/ListPhotos.js";
 import { Uploader } from "../Uploader/Uploader.js";
 import '../../assets/UploaderPhotos.css';const cls = {
-  "upload-file__wrapper": "_upload-file__wrapper_17bcu_2"
+  "upload-file-wrapper": "_upload-file-wrapper_2zki8_2"
 };
 const UploaderPhotos = forwardRef(
   (props, ref) => {
@@ -43,7 +43,7 @@ const UploaderPhotos = forwardRef(
       "div",
       {
         className: classNames(
-          cls["upload-file__wrapper"],
+          cls["upload-file-wrapper"],
           isMaxFilesReached && cls.disabled
         ),
         children: [

package/dist/utils/formating/FileSize.d.ts

@@ -0,0 +1 @@
+export default function Size(size: number): string;

package/dist/utils/formating/FileSize.js

@@ -0,0 +1,15 @@
+function Size(size) {
+  if (!size) return "";
+  let i = -1;
+  const b = [" Kb", " Mb", " Gb", " Tb", "Pb", "Eb", "Zb", "Yb"];
+  const sistemParams = 1024;
+  const maxValue = 0.1;
+  do {
+    size /= sistemParams;
+    i += 1;
+  } while (size > sistemParams);
+  return Math.max(size, maxValue).toFixed(1) + b[i];
+}
+export {
+  Size as default
+};

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 import { default as Date } from './formating/Date';
+import { default as Size } from './formating/FileSize';
 import { default as Month } from './formating/Month';
 import { default as Number } from './formating/Numbers';
 import { default as UUIDv4 } from './UUID4';
@@ -8,4 +9,5 @@ export declare const formating: {
     Month: typeof Month;
     Date: typeof Date;
     UUIDv4: typeof UUIDv4;
+    Size: typeof Size;
 };

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 import _Date from "./formating/Date.js";
+import Size from "./formating/FileSize.js";
 import Month from "./formating/Month.js";
 import Numbers from "./formating/Numbers.js";
 import UUIDv4 from "./UUID4.js";
@@ -6,7 +7,8 @@ const formating = {
   Number: Numbers,
   Month,
   Date: _Date,
-  UUIDv4
+  UUIDv4,
+  Size
 };
 export {
   formating

package/package.json

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