mimir-ui-kit 1.41.0 → 1.41.2

package/dist/assets/CardTrail.css

@@ -1 +1 @@
-._card-trail_13qtm_3{display:flex;flex-direction:column}._card-trail-header_13qtm_7{display:flex;align-items:flex-end;justify-content:space-between}._card-trail-header_13qtm_7:not(:last-child){margin-bottom:var(--mimir-space-xs)}._card-trail-header-title_13qtm_15{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_13qtm_15{font-size:var(--mimir-size-text-m);letter-spacing:calc(var(--mimir-size-text-m) * -.02)}}._card-trail-list_13qtm_28{display:flex;padding:0;overflow:auto;white-space:nowrap;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}._card-trail-list_13qtm_28::-webkit-scrollbar{display:none}._card-trail-list-item_13qtm_40{scroll-snap-align:start;white-space:normal;white-space:initial}._card-trail-list-item_13qtm_40._pointer_13qtm_44{cursor:pointer}
+._card-trail_vv8gl_3{display:flex;flex-direction:column}._card-trail-header_vv8gl_7{display:flex;align-items:flex-end;justify-content:space-between}._card-trail-header_vv8gl_7:not(:last-child){margin-bottom:var(--mimir-space-xs)}._card-trail-header-title_vv8gl_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_vv8gl_15{font-size:var(--mimir-size-text-m);letter-spacing:calc(var(--mimir-size-text-m) * -.02)}}._card-trail-header-merged-button_vv8gl_29{margin-left:auto}._card-trail-list_vv8gl_32{display:flex;margin-bottom:0;padding:0;overflow:auto;white-space:nowrap;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}._card-trail-list_vv8gl_32::-webkit-scrollbar{display:none}._card-trail-list-item_vv8gl_45{white-space:normal;white-space:initial;scroll-snap-align:start}._card-trail-list-item_vv8gl_45._pointer_vv8gl_49{cursor:pointer}

package/dist/assets/MergedButton.css

@@ -1 +1 @@
-._buttons_l320r_2{display:inline-flex}._merged-button_l320r_6{--button-height: var(--button-height-m);--button-space: var(--mimir-control-space-xs)}._merged-button_l320r_6:first-child{border-radius:0;border-top-left-radius:var(--mimir-control-radius);border-bottom-left-radius:var(--mimir-control-radius)}._merged-button_l320r_6:last-child{border-radius:0;border-top-right-radius:var(--mimir-control-radius);border-bottom-right-radius:var(--mimir-control-radius)}._merged-button_l320r_6:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._merged-button_l320r_6:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._merged-button_l320r_6._gray_l320r_28{--button-bg-color: var(--black-5);--button-bg-color-hover: var(--black-5);--button-bg-color-active: var(--asphalt-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._merged-button_l320r_6._white_l320r_36{--button-bg-color: var(--white-normal);--button-bg-color-active: var(--asphalt-normal);--button-bg-color-hover: var(--white-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._merged-button_l320r_6._transparent_l320r_44{--button-bg-color: var(--black-5);--button-bg-color-hover: var(--black-5);--button-bg-color-active: var(--asphalt-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--light-text);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._merged-button_l320r_6._is-icon_l320r_53{width:var(--button-height-m);padding:0}._merged-button_l320r_6._one-button_l320r_57{border-radius:var(--mimir-control-radius)}._merged-button_l320r_6:disabled{--button-cursor: not-allowed;color:var(--disabled-color);background-color:var(--black-5)}._merged-button_l320r_6:disabled:hover,._merged-button_l320r_6:disabled:active,._merged-button_l320r_6:disabled:focus{color:var(--disabled-color);background-color:var(--black-5);box-shadow:none}
+._buttons_8yyst_2{display:inline-flex}._merged-button_8yyst_6{--button-height: var(--button-height-m);--button-space: var(--mimir-control-space-xs)}._merged-button_8yyst_6:first-child{border-radius:0;border-top-left-radius:var(--mimir-control-radius);border-bottom-left-radius:var(--mimir-control-radius)}._merged-button_8yyst_6:last-child{border-radius:0;border-top-right-radius:var(--mimir-control-radius);border-bottom-right-radius:var(--mimir-control-radius)}._merged-button_8yyst_6:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover)}._merged-button_8yyst_6:active{color:var(--button-color-active);background:var(--button-bg-color-active)}._merged-button_8yyst_6._gray_8yyst_28{--button-bg-color: var(--black-5);--button-bg-color-hover: var(--black-5);--button-bg-color-active: var(--asphalt-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._merged-button_8yyst_6._white_8yyst_36{--button-bg-color: var(--white-normal);--button-bg-color-active: var(--asphalt-normal);--button-bg-color-hover: var(--white-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._merged-button_8yyst_6._transparent_8yyst_44{--button-bg-color: var(--black-5);--button-bg-color-hover: var(--black-5);--button-bg-color-active: var(--asphalt-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--light-text);--button-color-hover: var(--sapphire-normal);--button-color-active: var(--light-text)}._merged-button_8yyst_6._is-icon_8yyst_53{width:var(--button-height);min-width:var(--button-height);padding:0}._merged-button_8yyst_6._is-icon_8yyst_53._s_8yyst_58{--button-height: 32px;width:32px;width:var(--button-height)}._merged-button_8yyst_6._is-icon_8yyst_53._m_8yyst_6{--button-height: 40px;width:40px;width:var(--button-height)}._merged-button_8yyst_6._one-button_8yyst_66{border-radius:var(--mimir-control-radius)}._merged-button_8yyst_6:disabled{--button-cursor: not-allowed;color:var(--disabled-color);background-color:var(--black-5)}._merged-button_8yyst_6:disabled:hover,._merged-button_8yyst_6:disabled:active,._merged-button_8yyst_6:disabled:focus{color:var(--disabled-color);background-color:var(--black-5);box-shadow:none}

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

@@ -36,6 +36,10 @@ export type TProps = {
      * Класс, применяемый к списку карточек (ul).
      */
     cardTrailListClassName?: string;
+    /**
+     * Класс, применяемый к кнопкам переключения (MergedButton).
+     */
+    cardTrailMergedButtonClassName?: string;
     /**
      * Класс, применяемый к карточке.
      */

package/dist/components/CardTrail/CardTrail.js

@@ -1,101 +1,115 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { c as n } from "../../index-DIxK0V-G.js";
-import { forwardRef as W, useRef as D, useState as _, useEffect as I, Children as M } from "react";
-import { DEFAULT_SPACE_BETWEEN as x, DEFAULT_SCROLL_STEP as H } from "./constants.js";
-import { hasHorizontalScroll as p, isScrollAtEdge as B } from "./utils.js";
-import { useMergeRefs as R } from "../../hooks/useMergeRefs/useMergeRefs.js";
-import { useThrottledCallback as j } from "../../hooks/useThrottledCallback/index.js";
-import { MergedButton as F } from "../MergedButton/MergedButton.js";
-import '../../assets/CardTrail.css';const U = "_pointer_13qtm_44", c = {
-  "card-trail": "_card-trail_13qtm_3",
-  "card-trail-header": "_card-trail-header_13qtm_7",
-  "card-trail-header-title": "_card-trail-header-title_13qtm_15",
-  "card-trail-list": "_card-trail-list_13qtm_28",
-  "card-trail-list-item": "_card-trail-list-item_13qtm_40",
-  pointer: U
-}, X = W((C, S) => {
+import { jsxs as v, jsx as s } from "react/jsx-runtime";
+import { c as i } from "../../index-DIxK0V-G.js";
+import { forwardRef as I, useRef as p, useState as C, useEffect as x, Children as H } from "react";
+import { DEFAULT_SPACE_BETWEEN as O, DEFAULT_SCROLL_STEP as R } from "./constants.js";
+import { hasHorizontalScroll as u, isScrollAtEdge as b } from "./utils.js";
+import { useMergeRefs as j } from "../../hooks/useMergeRefs/useMergeRefs.js";
+import { useThrottledCallback as F } from "../../hooks/useThrottledCallback/index.js";
+import { MergedButton as U } from "../MergedButton/MergedButton.js";
+import '../../assets/CardTrail.css';const $ = "_pointer_vv8gl_49", l = {
+  "card-trail": "_card-trail_vv8gl_3",
+  "card-trail-header": "_card-trail-header_vv8gl_7",
+  "card-trail-header-title": "_card-trail-header-title_vv8gl_15",
+  "card-trail-header-merged-button": "_card-trail-header-merged-button_vv8gl_29",
+  "card-trail-list": "_card-trail-list_vv8gl_32",
+  "card-trail-list-item": "_card-trail-list-item_vv8gl_45",
+  pointer: $
+}, Z = I((B, N) => {
   const {
-    cardClassName: g,
-    cardTrailClassName: N,
-    cardTrailHeaderClassName: E,
-    cardTrailListClassName: b,
-    children: d,
-    title: h,
-    spaceBetween: s = x,
-    scrollStep: m = H,
-    mergedButtonProps: l,
-    scrollToCard: u = !1
-  } = C, t = D(null), [i, T] = _({
+    cardClassName: S,
+    cardTrailClassName: E,
+    cardTrailHeaderClassName: T,
+    cardTrailListClassName: k,
+    cardTrailMergedButtonClassName: L,
+    children: h,
+    title: m,
+    spaceBetween: d = O,
+    scrollStep: f = R,
+    mergedButtonProps: c,
+    scrollToCard: _ = !1
+  } = B, r = p(null), n = p(null), [o, w] = C({
     leftButton: !0,
     rightButton: !1
-  }), [k, L] = _(
-    () => p(t == null ? void 0 : t.current)
-  ), q = R(t, S), v = j(() => {
-    const e = !B(t.current, "left"), r = !B(t.current, "right");
-    T({
-      leftButton: !e,
-      rightButton: !r
+  }), [y, g] = C(
+    () => u(r == null ? void 0 : r.current)
+  ), A = j(r, N), W = F(() => {
+    const t = !b(r.current, "left"), e = !b(r.current, "right");
+    w({
+      leftButton: !t,
+      rightButton: !e
     });
-  }, 300), y = (e) => () => {
+  }, 300), z = (t) => () => {
     var a;
-    if (!u)
+    if (!_)
       return;
-    const r = (a = t == null ? void 0 : t.current) == null ? void 0 : a.querySelector(
-      `[data-active-card='${e}']`
+    const e = (a = r == null ? void 0 : r.current) == null ? void 0 : a.querySelector(
+      `[data-active-card='${t}']`
     );
-    r && (r == null || r.scrollIntoView({
+    e && (e == null || e.scrollIntoView({
       behavior: "smooth",
       block: "nearest",
       inline: "center"
     }));
-  }, A = () => {
+  }, M = () => {
     var a;
-    if (!t.current || i.leftButton) return;
-    const e = t.current, r = ((a = e.children[0]) == null ? void 0 : a.clientWidth) ?? 0;
-    e.scrollBy({
-      left: -(r + s) * m,
+    if (!r.current || o.leftButton) return;
+    const t = r.current, e = ((a = t.children[0]) == null ? void 0 : a.clientWidth) ?? 0;
+    t.scrollBy({
+      left: -(e + d) * f,
       behavior: "smooth"
     });
-  }, w = () => {
+  }, D = () => {
     var a;
-    if (!t.current || i.rightButton) return;
-    const e = t.current, r = ((a = e.children[0]) == null ? void 0 : a.clientWidth) ?? 0;
-    e.scrollBy({
-      left: (r + s) * m,
+    if (!r.current || o.rightButton) return;
+    const t = r.current, e = ((a = t.children[0]) == null ? void 0 : a.clientWidth) ?? 0;
+    t.scrollBy({
+      left: (e + d) * f,
       behavior: "smooth"
     });
   };
-  return I(() => {
-    L(p(t == null ? void 0 : t.current));
-  }, [d]), /* @__PURE__ */ f("section", { className: n(c["card-trail"], N), children: [
-    /* @__PURE__ */ f(
+  return x(() => {
+    const t = r.current;
+    if (t)
+      return n.current = new ResizeObserver(() => {
+        g(u(r == null ? void 0 : r.current));
+      }), n.current.observe(t), g(u(r == null ? void 0 : r.current)), () => {
+        n.current && n.current.disconnect();
+      };
+  }, [h]), /* @__PURE__ */ v("section", { className: i(l["card-trail"], E), children: [
+    /* @__PURE__ */ v(
       "header",
       {
-        className: n(
-          c["card-trail-header"],
-          E
+        className: i(
+          l["card-trail-header"],
+          T
         ),
         children: [
-          h && /* @__PURE__ */ o("h3", { className: c["card-trail-header-title"], children: h }),
-          k && /* @__PURE__ */ o(
-            F,
+          m && /* @__PURE__ */ s("h3", { className: l["card-trail-header-title"], children: m }),
+          y && /* @__PURE__ */ s(
+            U,
             {
+              buttonsWrapperClassName: i(
+                l["card-trail-header-merged-button"],
+                L
+              ),
               buttons: [
                 {
                   isIconButton: !0,
                   iconName: "ArrowLeft16px",
                   variant: "gray",
-                  onClick: A,
-                  disabled: i.leftButton,
-                  ...l == null ? void 0 : l.leftButton
+                  onClick: M,
+                  disabled: o.leftButton,
+                  size: "s",
+                  ...c == null ? void 0 : c.leftButton
                 },
                 {
                   isIconButton: !0,
                   iconName: "ArrowRight16px",
                   variant: "gray",
-                  onClick: w,
-                  disabled: i.rightButton,
-                  ...l == null ? void 0 : l.rightButton
+                  onClick: D,
+                  size: "s",
+                  disabled: o.rightButton,
+                  ...c == null ? void 0 : c.rightButton
                 }
               ]
             }
@@ -103,25 +117,25 @@ import '../../assets/CardTrail.css';const U = "_pointer_13qtm_44", c = {
         ]
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ s(
       "ul",
       {
-        onScroll: v,
-        style: { gap: s },
-        className: n(c["card-trail-list"], b),
-        ref: q,
-        children: M.map(d, (e, r) => /* @__PURE__ */ o(
+        onScroll: W,
+        style: { gap: d },
+        className: i(l["card-trail-list"], k),
+        ref: A,
+        children: H.map(h, (t, e) => /* @__PURE__ */ s(
           "li",
           {
-            onClick: y(r),
-            "data-active-card": r,
-            "data-testid": `card-trail-item-${r}`,
-            className: n(
-              c["card-trail-list-item"],
-              { [c.pointer]: u },
-              g
+            onClick: z(e),
+            "data-active-card": e,
+            "data-testid": `card-trail-item-${e}`,
+            className: i(
+              l["card-trail-list-item"],
+              { [l.pointer]: _ },
+              S
             ),
-            children: e
+            children: t
           }
         ))
       }
@@ -129,5 +143,5 @@ import '../../assets/CardTrail.css';const U = "_pointer_13qtm_44", c = {
   ] });
 });
 export {
-  X as CardTrail
+  Z as CardTrail
 };

package/dist/components/MergedButton/MergedButton.d.ts

@@ -1,18 +1,22 @@
 import { EMergedButtonVariantRound } from './constants';
-import { TButtonProps } from '../Button';
+import { TButtonProps, EButtonSize } from '../Button';
 
-export type TButtonPropsWithoutStyles = Omit<TButtonProps, 'clear' | 'variant' | 'form'> & {
+export type TButtonPropsWithoutStyles = Omit<TButtonProps, 'clear' | 'variant' | 'form' | 'size'> & {
     variant?: `${EMergedButtonVariantRound}` | EMergedButtonVariantRound;
     'data-testid'?: string;
+    size?: Exclude<EButtonSize, 'xl' | 'l' | 'ms' | 'xs' | 'xxl' | 'm-s'> | `${Exclude<EButtonSize, 'xl' | 'l' | 'ms' | 'xs' | 'xxl' | 'm-s'>}`;
 };
-type TProps = {
+export type TProps = {
     /**
      * Массив кнопок,  который отрисуется в контейнере
      * */
     buttons: TButtonPropsWithoutStyles[];
+    /**
+     * Класс, применяемый к списку карточек (ul).
+     */
+    buttonsWrapperClassName?: string;
 };
 /**
  * Компонент объединенных кнопок, с округлением у первой и последней кнопки, а так же с другими variant, нежели у обычного Button.
  */
-export declare const MergedButton: import('react').MemoExoticComponent<({ buttons }: TProps) => import("react/jsx-runtime").JSX.Element>;
-export {};
+export declare const MergedButton: import('react').MemoExoticComponent<({ buttons, buttonsWrapperClassName }: TProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/MergedButton/MergedButton.js

@@ -1,48 +1,58 @@
 import { jsx as e } from "react/jsx-runtime";
-import { c as _ } from "../../index-DIxK0V-G.js";
-import { memo as l } from "react";
-import { EMergedButtonVariantRound as u } from "./constants.js";
-import { Button as g } from "../Button/Button.js";
-import '../../assets/MergedButton.css';const p = "_buttons_l320r_2", d = "_gray_l320r_28", B = "_white_l320r_36", I = "_transparent_l320r_44", o = {
-  buttons: p,
-  "merged-button": "_merged-button_l320r_6",
-  gray: d,
-  white: B,
-  transparent: I,
-  "is-icon": "_is-icon_l320r_53",
-  "one-button": "_one-button_l320r_57"
-}, f = l(({ buttons: r }) => /* @__PURE__ */ e("div", { className: o.buttons, children: r.map(
-  ({
-    variant: s = u.White,
-    disabled: n,
-    className: c,
-    ...t
-  }, i) => {
-    const a = {
-      ...t,
-      isIconButton: t.isIconButton ?? !1,
-      iconName: t.isIconButton ? t.iconName : void 0,
-      leftIcon: t.isIconButton ? void 0 : t.leftIcon,
-      rightIcon: t.isIconButton ? void 0 : t.rightIcon
-    }, m = _(o["merged-button"], c, {
-      [o[s]]: !n,
-      [o.disabled]: n,
-      [o["is-icon"]]: t.isIconButton,
-      [o["one-button"]]: r.length === 1
-    });
-    return /* @__PURE__ */ e(
-      g,
-      {
-        clear: !0,
-        disabled: n,
-        className: m,
-        ...a
-      },
-      i
-    );
-  }
-) }));
-f.displayName = "MergedButton";
+import { c as r } from "../../index-DIxK0V-G.js";
+import { memo as g } from "react";
+import { EMergedButtonVariantRound as p } from "./constants.js";
+import { Button as d } from "../Button/Button.js";
+import '../../assets/MergedButton.css';const l = "_buttons_8yyst_2", B = "_gray_8yyst_28", I = "_white_8yyst_36", f = "_transparent_8yyst_44", h = "_s_8yyst_58", N = "_m_8yyst_6", o = {
+  buttons: l,
+  "merged-button": "_merged-button_8yyst_6",
+  gray: B,
+  white: I,
+  transparent: f,
+  "is-icon": "_is-icon_8yyst_53",
+  s: h,
+  m: N,
+  "one-button": "_one-button_8yyst_66"
+}, v = g(
+  ({ buttons: s, buttonsWrapperClassName: c }) => /* @__PURE__ */ e("div", { className: r(o.buttons, c), children: s.map(
+    ({
+      variant: i = p.White,
+      disabled: n,
+      className: m,
+      size: _ = "m",
+      ...t
+    }, a) => {
+      const y = {
+        ...t,
+        isIconButton: t.isIconButton ?? !1,
+        iconName: t.isIconButton ? t.iconName : void 0,
+        leftIcon: t.isIconButton ? void 0 : t.leftIcon,
+        rightIcon: t.isIconButton ? void 0 : t.rightIcon
+      }, u = r(
+        o["merged-button"],
+        o[_ ?? "m"],
+        m,
+        {
+          [o[i]]: !n,
+          [o.disabled]: n,
+          [o["is-icon"]]: t.isIconButton,
+          [o["one-button"]]: s.length === 1
+        }
+      );
+      return /* @__PURE__ */ e(
+        d,
+        {
+          clear: !0,
+          disabled: n,
+          className: u,
+          ...y
+        },
+        a
+      );
+    }
+  ) })
+);
+v.displayName = "MergedButton";
 export {
-  f as MergedButton
+  v as MergedButton
 };

package/package.json

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