mimir-ui-kit 1.42.1 → 1.42.2

package/dist/assets/CardTrail.css

@@ -1 +1 @@
-._card-trail_c21mz_3{display:flex;flex-direction:column}._card-trail-header_c21mz_7{display:flex;align-items:flex-end;justify-content:space-between}._card-trail-header_c21mz_7:not(:last-child){margin-bottom:var(--mimir-space-xs)}._card-trail-header-title_c21mz_15{margin-bottom:0;font-weight:var(--mimir-font-weight-text-medium);font-size:var(--mimir-size-text-l);font-family:var(--mimir-font-montserrat);line-height:var(--mimir-line-height-text-s1);letter-spacing:calc(var(--mimir-size-text-l) * -.02)}@media (max-width: 600px){._card-trail-header-title_c21mz_15{font-size:var(--mimir-size-text-m);letter-spacing:calc(var(--mimir-size-text-m) * -.02)}}._card-trail-header-merged-button_c21mz_29{margin-left:auto}._card-trail-list_c21mz_32{display:flex;margin-bottom:0;padding:0;overflow:auto;white-space:nowrap;scroll-behavior:smooth;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}._card-trail-list_c21mz_32::-webkit-scrollbar{display:none}._card-trail-list-item_c21mz_45{white-space:normal;white-space:initial;scroll-snap-align:start}._card-trail-list-item_c21mz_45._pointer_c21mz_49{cursor:pointer}
+._card-trail_1wzbr_3{display:flex;flex-direction:column}._card-trail-header_1wzbr_7{display:flex;align-items:flex-end;justify-content:space-between}._card-trail-header_1wzbr_7:not(:last-child){margin-bottom:var(--mimir-space-xs)}._card-trail-header-title_1wzbr_15{margin-bottom:0;font-weight:var(--mimir-font-weight-text-medium);font-size:var(--mimir-size-text-l);font-family:var(--mimir-font-montserrat);line-height:var(--mimir-line-height-text-s1);letter-spacing:calc(var(--mimir-size-text-l) * -.02)}@media (max-width: 600px){._card-trail-header-title_1wzbr_15{font-size:var(--mimir-size-text-m);letter-spacing:calc(var(--mimir-size-text-m) * -.02)}}._card-trail-header-merged-button_1wzbr_29{margin-left:auto}._card-trail-list_1wzbr_32{display:flex;margin-bottom:0;padding:0;overflow:auto;white-space:nowrap;scroll-behavior:smooth;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}._card-trail-list_1wzbr_32::-webkit-scrollbar{display:none}._card-trail-list-item_1wzbr_46{white-space:normal;white-space:initial;scroll-snap-align:start}._card-trail-list-item_1wzbr_46._pointer_1wzbr_50{cursor:pointer}

package/dist/components/CardTrail/CardTrail.js

@@ -6,52 +6,53 @@ import { hasHorizontalScroll as g, isScrollAtEdge as T } from "./utils.js";
 import { useMergeRefs as Q } from "../../hooks/useMergeRefs/useMergeRefs.js";
 import { useThrottledCallback as Z } from "../../hooks/useThrottledCallback/index.js";
 import { MergedButton as rr } from "../MergedButton/MergedButton.js";
-import '../../assets/CardTrail.css';const tr = "_pointer_c21mz_49", c = {
-  "card-trail": "_card-trail_c21mz_3",
-  "card-trail-header": "_card-trail-header_c21mz_7",
-  "card-trail-header-title": "_card-trail-header-title_c21mz_15",
-  "card-trail-header-merged-button": "_card-trail-header-merged-button_c21mz_29",
-  "card-trail-list": "_card-trail-list_c21mz_32",
-  "card-trail-list-item": "_card-trail-list-item_c21mz_45",
+import '../../assets/CardTrail.css';const tr = "_pointer_1wzbr_50", i = {
+  "card-trail": "_card-trail_1wzbr_3",
+  "card-trail-header": "_card-trail-header_1wzbr_7",
+  "card-trail-header-title": "_card-trail-header-title_1wzbr_15",
+  "card-trail-header-merged-button": "_card-trail-header-merged-button_1wzbr_29",
+  "card-trail-list": "_card-trail-list_1wzbr_32",
+  "card-trail-list-item": "_card-trail-list-item_1wzbr_46",
   pointer: tr
 };
 let v = {};
-const dr = q((D, L) => {
+const dr = q((w, D) => {
   const {
-    cardClassName: z,
-    cardTrailClassName: W,
-    cardTrailHeaderClassName: A,
-    cardTrailListClassName: R,
-    cardTrailMergedButtonClassName: k,
-    children: p,
-    title: C,
+    cardClassName: L,
+    cardTrailClassName: z,
+    cardTrailHeaderClassName: W,
+    cardTrailListClassName: A,
+    cardTrailMergedButtonClassName: R,
+    children: b,
+    title: p,
     spaceBetween: o = Y,
-    scrollStep: B = G,
-    dividedCardWidth: I = J,
+    scrollStep: C = G,
+    dividedCardWidth: k = J,
     currentCardIndex: h = K,
-    mergedButtonProps: i,
-    scrollToCard: b = !1,
-    needButtons: w = !0,
+    mergedButtonProps: c,
+    scrollToCard: B = !1,
+    needButtons: I = !0,
     padding: l = 0
-  } = D, r = f(null), N = f(!0), s = f(null), [d, y] = _({
+  } = w, r = f(null), N = f(!0), s = f(null), [d, y] = _({
     leftButton: !0,
     rightButton: !1
   }), [M, x] = _(0), [U, E] = _(
     () => g(r == null ? void 0 : r.current)
-  ), F = Q(r, L), H = Z(() => {
+  ), F = Q(r, D), H = Z(() => {
     var a;
     if (N.current) {
       N.current = !1;
       const m = r.current, V = ((a = m == null ? void 0 : m.children[h]) == null ? void 0 : a.clientWidth) ?? 0;
       x(
-        V / I + l + o
-      ), v = {
-        paddingLeft: l,
-        paddingRight: l,
-        marginLeft: -l,
-        marginRight: -l
-      };
+        V / k + l + o
+      );
     }
+    v = {
+      paddingLeft: l,
+      paddingRight: l,
+      marginLeft: -l,
+      marginRight: -l
+    };
     const t = !T(r.current, "left"), e = !T(r.current, "right");
     y({
       leftButton: !t,
@@ -59,7 +60,7 @@ const dr = q((D, L) => {
     });
   }, 300), O = (t) => () => {
     var a;
-    if (!b)
+    if (!B)
       return;
     const e = (a = r == null ? void 0 : r.current) == null ? void 0 : a.querySelector(
       `[data-active-card='${t}']`
@@ -74,7 +75,7 @@ const dr = q((D, L) => {
     if (!r.current || d.leftButton) return;
     const t = r.current, e = ((a = t.children[h]) == null ? void 0 : a.clientWidth) ?? 0;
     t.scrollBy({
-      left: -(e + o) * B,
+      left: -(e + o) * C,
       behavior: "smooth"
     });
   }, j = () => {
@@ -82,7 +83,7 @@ const dr = q((D, L) => {
     if (!r.current || d.rightButton) return;
     const t = r.current, e = ((a = t.children[h]) == null ? void 0 : a.clientWidth) ?? 0;
     t.scrollBy({
-      left: (e + o) * B,
+      left: (e + o) * C,
       behavior: "smooth"
     });
   };
@@ -94,22 +95,22 @@ const dr = q((D, L) => {
       }), s.current.observe(t), E(g(r == null ? void 0 : r.current)), () => {
         s.current && s.current.disconnect();
       };
-  }, [p]), /* @__PURE__ */ S("section", { className: n(c["card-trail"], W), children: [
+  }, [b]), /* @__PURE__ */ S("section", { className: n(i["card-trail"], z), children: [
     /* @__PURE__ */ S(
       "header",
       {
         className: n(
-          c["card-trail-header"],
-          A
+          i["card-trail-header"],
+          W
         ),
         children: [
-          C && /* @__PURE__ */ u("h3", { className: c["card-trail-header-title"], children: C }),
-          U && w && /* @__PURE__ */ u(
+          p && /* @__PURE__ */ u("h3", { className: i["card-trail-header-title"], children: p }),
+          U && I && /* @__PURE__ */ u(
             rr,
             {
               buttonsWrapperClassName: n(
-                c["card-trail-header-merged-button"],
-                k
+                i["card-trail-header-merged-button"],
+                R
               ),
               buttons: [
                 {
@@ -119,7 +120,7 @@ const dr = q((D, L) => {
                   onClick: $,
                   disabled: d.leftButton,
                   size: "s",
-                  ...i == null ? void 0 : i.leftButton
+                  ...c == null ? void 0 : c.leftButton
                 },
                 {
                   isIconButton: !0,
@@ -128,7 +129,7 @@ const dr = q((D, L) => {
                   onClick: j,
                   size: "s",
                   disabled: d.rightButton,
-                  ...i == null ? void 0 : i.rightButton
+                  ...c == null ? void 0 : c.rightButton
                 }
               ]
             }
@@ -145,18 +146,18 @@ const dr = q((D, L) => {
           scrollPadding: `0 ${M}px`,
           ...v
         },
-        className: n(c["card-trail-list"], R),
+        className: n(i["card-trail-list"], A),
         ref: F,
-        children: X.map(p, (t, e) => /* @__PURE__ */ u(
+        children: X.map(b, (t, e) => /* @__PURE__ */ u(
           "li",
           {
             onClick: O(e),
             "data-active-card": e,
             "data-testid": `card-trail-item-${e}`,
             className: n(
-              c["card-trail-list-item"],
-              { [c.pointer]: b },
-              z
+              i["card-trail-list-item"],
+              { [i.pointer]: B },
+              L
             ),
             children: t
           }

package/dist/components/CardTrail/utils.d.ts

@@ -7,4 +7,3 @@
  */
 export declare const isScrollAtEdge: (container: HTMLElement | null, direction: "left" | "right", tolerance?: number) => boolean;
 export declare const hasHorizontalScroll: (element: HTMLElement | null) => boolean;
-export declare const getCardWidth: <E extends Element>(element?: E) => number;

package/dist/components/CardTrail/utils.js

@@ -1,10 +1,9 @@
-const o = (t, l, r = 1) => {
-  if (!t) return !0;
-  const { scrollLeft: i, scrollWidth: s, clientWidth: c } = t;
-  return l === "left" ? i <= r : i >= s - c - r;
-}, n = (t) => t ? t.scrollWidth > t.clientWidth : !1, d = (t) => t ? t.clientWidth : 0;
+const c = (r, i, t = 1) => {
+  if (!r) return !0;
+  const { scrollLeft: l, scrollWidth: s, clientWidth: o } = r;
+  return i === "left" ? l <= t : l >= s - o - t;
+}, e = (r) => r ? r.scrollWidth > r.clientWidth : !1;
 export {
-  d as getCardWidth,
-  n as hasHorizontalScroll,
-  o as isScrollAtEdge
+  e as hasHorizontalScroll,
+  c as isScrollAtEdge
 };

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

@@ -25,6 +25,22 @@ type TProps = ComponentProps<'img'> & {
      * Изображение для мобильной версии
      */
     mobileImage?: string;
+    /**
+     * Изображение для Retina (2x) десктопной версии
+     */
+    desktopImage2x?: string;
+    /**
+     * Изображение для Retina (2x) мобильной версии
+     */
+    mobileImage2x?: string;
+    /**
+     * Изображение для Super Retina (3x) десктопной версии
+     */
+    desktopImage3x?: string;
+    /**
+     * Изображение для Super Retina (3x) мобильной версии
+     */
+    mobileImage3x?: string;
 };
 /**
  * Компонент для отображения изображения с возможность показа загрузки и ошибки

package/dist/components/Image/Image.js

@@ -1,49 +1,77 @@
-import { jsxs as E, jsx as i } from "react/jsx-runtime";
-import { c as l } from "../../index-DIxK0V-G.js";
-import { memo as I, useState as g, useLayoutEffect as N } from "react";
-import { EMediaQuery as S, EMinMediaQuery as y } from "../../hooks/useMediaQuery/constants.js";
-import '../../assets/Image.css';const b = "_picture_1hx49_2", k = "_image_1hx49_3", L = "_loading_1hx49_10", r = {
-  picture: b,
-  image: k,
-  loading: L
-}, z = I((u) => {
+import { jsxs as M, jsx as m } from "react/jsx-runtime";
+import { c as S } from "../../index-DIxK0V-G.js";
+import { memo as j, useState as _, useLayoutEffect as Q } from "react";
+import { EMediaQuery as $, EMinMediaQuery as w } from "../../hooks/useMediaQuery/constants.js";
+import '../../assets/Image.css';const z = "_picture_1hx49_2", A = "_image_1hx49_3", C = "_loading_1hx49_10", a = {
+  picture: z,
+  image: A,
+  loading: C
+}, q = j((h) => {
   const {
-    className: d,
-    src: s,
-    alt: p = "image",
-    desktopImage: e,
-    mobileImage: a,
-    pictureClassName: f,
-    errorFallback: c,
-    fallback: m,
-    ..._
-  } = u, [o, n] = g(!0), [h, x] = g(!1);
-  return N(() => {
-    const t = new Image();
-    t.src = s ?? e ?? a ?? "", t.onload = () => {
-      n(!1);
-    }, t.onerror = () => {
-      n(!1), x(!0);
+    className: b,
+    src: o,
+    alt: k = "image",
+    desktopImage: r,
+    mobileImage: s,
+    pictureClassName: E,
+    errorFallback: l,
+    fallback: n,
+    desktopImage2x: g,
+    mobileImage2x: u,
+    desktopImage3x: d,
+    mobileImage3x: p,
+    ...N
+  } = h, [t, f] = _(!0), [y, L] = _(!1);
+  if (Q(() => {
+    const e = new Image();
+    e.src = o ?? r ?? s ?? "", e.onload = () => {
+      f(!1);
+    }, e.onerror = () => {
+      f(!1), L(!0);
     };
-  }, [s, e, a]), o && m ? m : h && c ? c : /* @__PURE__ */ E(
+  }, [o, r, s]), t && n)
+    return n;
+  if (y && l)
+    return l;
+  const i = (e, x, I) => {
+    let c = e;
+    return x && (c += `, ${x} 2x`), I && (c += `, ${I} 3x`), c;
+  };
+  return /* @__PURE__ */ M(
     "picture",
     {
-      className: l(r.picture, f, {
-        [r.loading]: o
+      className: S(a.picture, E, {
+        [a.loading]: t
       }),
       children: [
-        a && /* @__PURE__ */ i("source", { srcSet: a, media: S.XS1 }),
-        e && /* @__PURE__ */ i("source", { srcSet: e, media: y.S }),
-        /* @__PURE__ */ i(
+        s && /* @__PURE__ */ m(
+          "source",
+          {
+            srcSet: i(s, u, p),
+            media: $.XS1
+          }
+        ),
+        r && /* @__PURE__ */ m(
+          "source",
+          {
+            srcSet: i(r, g, d),
+            media: w.S
+          }
+        ),
+        /* @__PURE__ */ m(
           "img",
           {
-            ..._,
-            className: l(r.image, d, {
-              [r.loading]: o
+            ...N,
+            className: S(a.image, b, {
+              [a.loading]: t
             }),
             loading: "lazy",
-            src: s,
-            alt: p
+            srcSet: i(
+              o ?? "",
+              g ?? u,
+              d ?? p
+            ),
+            alt: k
           }
         )
       ]
@@ -51,5 +79,5 @@ import '../../assets/Image.css';const b = "_picture_1hx49_2", k = "_image_1hx49_
   );
 });
 export {
-  z as AppImage
+  q as AppImage
 };

package/package.json

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