mimir-ui-kit 1.15.0 → 1.15.1

package/dist/assets/Image.css

@@ -0,0 +1 @@
+._picture_9zemz_2,._image_9zemz_3{display:block;width:100%;height:auto}._loading_9zemz_9{filter:blur(20px);transition:.3s filter ease}

package/dist/components/Image/Image.d.ts

@@ -5,6 +5,10 @@ type TProps = ComponentProps<'img'> & {
      * Дополнительный класс к компоненту
      */
     className?: string;
+    /**
+     * Дополнительный класс к контейнеру picture
+     */
+    pictureClassName?: string;
     /**
      * Компонент, который буде показываться, пока идет загрузка изображения
      */
@@ -13,6 +17,14 @@ type TProps = ComponentProps<'img'> & {
      * Компонент, который буде показываться, если произошла ошибка при загрузке изображения
      */
     errorFallback?: ReactElement;
+    /**
+     * Изображение для десктопной версии
+     */
+    desktopImage?: string;
+    /**
+     * Изображение для мобильной версии
+     */
+    mobileImage?: string;
 };
 /**
  * Компонент для отображения изображения с возможность показа загрузки и ошибки

package/dist/components/Image/Image.js

@@ -1,10 +1,23 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
 import { memo, useState, useLayoutEffect } from "react";
+import { EMediaQuery, EMinMediaQuery } from "../../hooks/useMediaQuery/constants.js";
+import '../../assets/Image.css';const picture = "_picture_9zemz_2";
+const image = "_image_9zemz_3";
+const loading = "_loading_9zemz_9";
+const cls = {
+  picture,
+  image,
+  loading
+};
 const AppImage = memo((props) => {
   const {
     className,
     src,
     alt = "image",
+    desktopImage,
+    mobileImage,
+    pictureClassName,
     errorFallback,
     fallback,
     ...otherProps
@@ -13,7 +26,7 @@ const AppImage = memo((props) => {
   const [hasError, setHasError] = useState(false);
   useLayoutEffect(() => {
     const img = new Image();
-    img.src = src ?? "";
+    img.src = src ?? desktopImage ?? mobileImage ?? "";
     img.onload = () => {
       setIsLoading(false);
     };
@@ -21,26 +34,40 @@ const AppImage = memo((props) => {
       setIsLoading(false);
       setHasError(true);
     };
-  }, [src]);
+  }, [src, desktopImage, mobileImage]);
   if (isLoading && fallback) {
     return fallback;
   }
   if (hasError && errorFallback) {
     return errorFallback;
   }
-  return /* @__PURE__ */ jsx(
-    "img",
+  return /* @__PURE__ */ jsxs(
+    "picture",
     {
-      ...otherProps,
-      style: {
-        display: "block",
-        filter: `${isLoading ? "blur(20px)" : ""}`,
-        transition: ".3s filter ease"
-      },
-      className,
-      loading: "lazy",
-      src,
-      alt
+      className: classNames(cls.picture, pictureClassName, {
+        [cls.loading]: isLoading
+      }),
+      children: [
+        mobileImage && /* @__PURE__ */ jsx("source", { srcSet: mobileImage, media: EMediaQuery.S }),
+        desktopImage && /* @__PURE__ */ jsx("source", { srcSet: desktopImage, media: EMinMediaQuery.S }),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            ...otherProps,
+            style: {
+              display: "block",
+              filter: `${isLoading ? "blur(20px)" : ""}`,
+              transition: ".3s filter ease"
+            },
+            className: classNames(cls.image, className, {
+              [cls.loading]: isLoading
+            }),
+            loading: "lazy",
+            src,
+            alt
+          }
+        )
+      ]
     }
   );
 });

package/dist/components/Slider/Slider.d.ts

@@ -21,6 +21,8 @@ type TProps = {
      */
     images?: {
         image?: string;
+        imageDesktop?: string;
+        imageMobile?: string;
         url?: string;
         id?: number;
     }[];

package/dist/components/Slider/Slider.js

@@ -323,7 +323,7 @@ const Slider = ({
   swiperClassName,
   slideClassName,
   imageClassName,
-  delay = 3e3
+  delay = 3e5
 }) => {
   const progressBar = useRef(null);
   const swiperRef = useRef(null);
@@ -401,7 +401,9 @@ const Slider = ({
                 AppImage,
                 {
                   className: classNames(cls.image, imageClassName),
-                  src: img.image
+                  src: img.image,
+                  desktopImage: img.imageDesktop,
+                  mobileImage: img.imageMobile
                 }
               )
             },

package/dist/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export { useMediaQuery, EMediaQuery } from './useMediaQuery';
+export { useMediaQuery, EMediaQuery, EMinMediaQuery } from './useMediaQuery';
 export { useLockBodyScroll } from './useLockBodyScroll';
 export { useInterval } from './useInterval';
 export { useTimer } from './useTimer';

package/dist/hooks/index.js

@@ -1,11 +1,12 @@
 import { useMediaQuery } from "./useMediaQuery/useMediaQuery.js";
-import { EMediaQuery } from "./useMediaQuery/constants.js";
+import { EMediaQuery, EMinMediaQuery } from "./useMediaQuery/constants.js";
 import { useLockBodyScroll } from "./useLockBodyScroll/useLockBodyScroll.js";
 import { useInterval } from "./useInterval/useInterval.js";
 import { useTimer } from "./useTimer/index.js";
 import { useCopyToClipboard } from "./useCopyToClipboard/useCopyToClipboard.js";
 export {
   EMediaQuery,
+  EMinMediaQuery,
   useCopyToClipboard,
   useInterval,
   useLockBodyScroll,

package/dist/hooks/useMediaQuery/constants.d.ts

@@ -8,3 +8,13 @@ export declare enum EMediaQuery {
     XL = "(max-width: 1440px)",
     XXL = "(max-width: 1920px)"
 }
+export declare enum EMinMediaQuery {
+    XSS = "(min-width: 375px)",
+    XS = "(min-width: 600px)",
+    XS1 = "(min-width: 767px)",
+    S = "(min-width: 768px)",
+    M = "(min-width: 960px)",
+    L = "(min-width: 1280px)",
+    XL = "(min-width: 1440px)",
+    XXL = "(min-width: 1920px)"
+}

package/dist/hooks/useMediaQuery/constants.js

@@ -9,6 +9,18 @@ var EMediaQuery = /* @__PURE__ */ ((EMediaQuery2) => {
   EMediaQuery2["XXL"] = "(max-width: 1920px)";
   return EMediaQuery2;
 })(EMediaQuery || {});
+var EMinMediaQuery = /* @__PURE__ */ ((EMinMediaQuery2) => {
+  EMinMediaQuery2["XSS"] = "(min-width: 375px)";
+  EMinMediaQuery2["XS"] = "(min-width: 600px)";
+  EMinMediaQuery2["XS1"] = "(min-width: 767px)";
+  EMinMediaQuery2["S"] = "(min-width: 768px)";
+  EMinMediaQuery2["M"] = "(min-width: 960px)";
+  EMinMediaQuery2["L"] = "(min-width: 1280px)";
+  EMinMediaQuery2["XL"] = "(min-width: 1440px)";
+  EMinMediaQuery2["XXL"] = "(min-width: 1920px)";
+  return EMinMediaQuery2;
+})(EMinMediaQuery || {});
 export {
-  EMediaQuery
+  EMediaQuery,
+  EMinMediaQuery
 };

package/dist/hooks/useMediaQuery/index.d.ts

@@ -1,2 +1,2 @@
 export { useMediaQuery } from './useMediaQuery';
-export { EMediaQuery } from './constants';
+export { EMediaQuery, EMinMediaQuery } from './constants';

package/dist/hooks/useMediaQuery/index.js

@@ -1,6 +1,7 @@
 import { useMediaQuery } from "./useMediaQuery.js";
-import { EMediaQuery } from "./constants.js";
+import { EMediaQuery, EMinMediaQuery } from "./constants.js";
 export {
   EMediaQuery,
+  EMinMediaQuery,
   useMediaQuery
 };

package/dist/index.js

@@ -38,7 +38,7 @@ import { EToastPosition, EToastVariant } from "./components/Toasts/constants.js"
 import { UploaderPhotos } from "./components/UploaderPhotos/UploaderPhotos.js";
 import { Uploader } from "./components/Uploader/Uploader.js";
 import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
-import { EMediaQuery } from "./hooks/useMediaQuery/constants.js";
+import { EMediaQuery, EMinMediaQuery } from "./hooks/useMediaQuery/constants.js";
 import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
 import { useInterval } from "./hooks/useInterval/useInterval.js";
 import { useTimer } from "./hooks/useTimer/index.js";
@@ -62,6 +62,7 @@ import './assets/index.css';export {
   EInputVariant,
   EMediaQuery,
   EMergedButtonVariantRound,
+  EMinMediaQuery,
   ESelectSearchSize,
   EStepsPrimaryColor,
   EStepsSecondaryColor,

package/package.json

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