md-components-mdigial-azamat 0.0.348 → 0.0.349

package/dist/Segments/Segments.js

@@ -1,166 +1,171 @@
-import { jsxs as E, jsx as a } from "react/jsx-runtime";
-import { useState as N, useEffect as A, useCallback as R, lazy as L, Suspense as k } from "react";
-import { b as D } from "../LayoutContext-60bf5495.js";
-import { r as H } from "../tokens-29849cf7.js";
-import { C as T } from "../ComponentContainer-aefde3e0.js";
-import { F as h } from "../Flex-86aee720.js";
-import { c as S } from "../cn-6a4bf187.js";
-import { SegmentsSliderTabs as j } from "./SegmentsSliderTabs.js";
-import { propsToEdit as K } from "./schema.js";
-import { SegmentsVariant as s } from "./types.js";
-function O(t) {
-  var e;
-  return typeof window > "u" || !((e = window.location) != null && e.search) ? null : new URLSearchParams(window.location.search).get(t);
+import { jsx as i, jsxs as S } from "react/jsx-runtime";
+import { useState as A, useEffect as k, useCallback as N, lazy as D, Suspense as T } from "react";
+import { b as H } from "../LayoutContext-60bf5495.js";
+import { r as j } from "../tokens-29849cf7.js";
+import { C as R } from "../ComponentContainer-aefde3e0.js";
+import { F as y } from "../Flex-86aee720.js";
+import { c as C } from "../cn-6a4bf187.js";
+import { SegmentsSliderTabs as K } from "./SegmentsSliderTabs.js";
+import { propsToEdit as O } from "./schema.js";
+import { SegmentsVariant as a } from "./types.js";
+function Y(e) {
+  var t;
+  return typeof window > "u" || !((t = window.location) != null && t.search) ? null : new URLSearchParams(window.location.search).get(e);
 }
-function Y(t, e) {
+function M(e, t) {
   if (typeof window > "u")
     return;
   const n = new URL(window.location.href);
-  n.searchParams.set(t, e), window.history.replaceState(window.history.state, "", n.toString());
+  n.searchParams.set(e, t), window.history.replaceState(window.history.state, "", n.toString());
 }
-function M(t) {
-  const [e, n] = N(() => null);
-  A(() => {
-    const o = () => n(O(t));
+function Q(e) {
+  const [t, n] = A(() => null);
+  k(() => {
+    const o = () => n(Y(e));
     return o(), window.addEventListener("popstate", o), () => window.removeEventListener("popstate", o);
-  }, [t]);
-  const r = R(
+  }, [e]);
+  const r = N(
     (o) => {
-      Y(t, o), n(o);
+      M(e, o), n(o);
     },
-    [t]
+    [e]
   );
-  return [e, r];
+  return [t, r];
 }
-const Q = L(
-  () => import("./SegmentsContent.js").then((t) => ({ default: t.SegmentsContent }))
-), I = {
-  [s.PRIMARY]: {
+const U = D(
+  () => import("./SegmentsContent.js").then((e) => ({ default: e.SegmentsContent }))
+), P = {
+  [a.PRIMARY]: {
     container: "rounded-[20px] bg-[#E3E4E8] p-1",
     item: "rounded-[19px] text-gray-800 font-semibold max-tablet:text-[16px] max-tablet:leading-[27px] max-tablet:px-4 max-tablet:py-2 text-[20px] leading-[30px] px-8 py-4 w-[275px]",
     activeItem: "bg-white"
   },
-  [s.SECONDARY]: {
+  [a.SECONDARY]: {
     container: "rounded-xl bg-white/15 border border-white/15 backdrop-blur-[15px]",
     item: "text-white rounded-[13px] text-sm leading-5 py-[14px] w-[180px] max-tablet:pr-5 max-tablet:pl-4",
     activeItem: "bg-white text-black font-medium"
   },
-  [s.SLIDER]: {
+  [a.SLIDER]: {
     container: "",
     item: "",
     activeItem: ""
   },
-  [s.HEADER]: {
+  [a.HEADER]: {
     container: "rounded-[10px] bg-white p-1 gap-1",
     item: "rounded-[8px] text-[#40474f] font-medium text-[14px] leading-5 px-4 py-2",
     // Фон задаётся цветом из пропса, поэтому в классах его нет
     activeItem: ""
   }
-}, U = "green", F = (t) => {
-  if (!t)
+}, F = "green", _ = (e) => {
+  if (!e)
     return;
-  const e = t.trim().replace("#", ""), n = e.length === 3 ? e.split("").map((i) => i + i).join("") : e, r = n.length === 8 ? n.slice(0, 6) : n;
+  const t = e.trim().replace("#", ""), n = t.length === 3 ? t.split("").map((s) => s + s).join("") : t, r = n.length === 8 ? n.slice(0, 6) : n;
   if (r.length !== 6 || /[^0-9a-f]/i.test(r))
     return;
-  const [o, c, u] = [0, 2, 4].map((i) => parseInt(r.slice(i, i + 2), 16));
+  const [o, c, u] = [0, 2, 4].map((s) => parseInt(r.slice(s, s + 2), 16));
   return (0.299 * o + 0.587 * c + 0.114 * u) / 255 > 0.6 ? "#0e0f11" : "#ffffff";
 };
-function _(t, e) {
+function z(e, t) {
   var r;
-  const n = (r = t == null ? void 0 : t.tabKey) == null ? void 0 : r.trim();
-  return n || String(e);
+  const n = (r = e == null ? void 0 : e.tabKey) == null ? void 0 : r.trim();
+  return n || String(t);
 }
-function z(t, e) {
-  if (!(t != null && t.length) || e == null || e === "")
+function B(e, t) {
+  if (!(e != null && e.length) || t == null || t === "")
     return 0;
-  const n = t.findIndex(
+  const n = e.findIndex(
     (o) => {
       var c;
-      return ((c = o.tabKey) == null ? void 0 : c.trim()) === e;
+      return ((c = o.tabKey) == null ? void 0 : c.trim()) === t;
     }
   );
   if (n >= 0)
     return n;
-  const r = parseInt(e, 10);
-  return Number.isNaN(r) || r < 0 || r >= t.length ? 0 : r;
+  const r = parseInt(t, 10);
+  return Number.isNaN(r) || r < 0 || r >= e.length ? 0 : r;
 }
-const B = ({
-  data: t = [],
-  variant: e = s.PRIMARY,
+const q = ({
+  data: e = [],
+  variant: t = a.PRIMARY,
   queryParamKey: n = "tab",
   title: r,
   active_color: o
 }) => {
-  var v;
-  const [c, u] = M(n), p = z(t, c), i = R(
+  var E;
+  const [c, u] = Q(n), p = B(e, c), s = N(
     (l, x) => {
-      u(_(l, x));
+      u(z(l, x));
     },
     [u]
-  ), b = I[e] || I[s.PRIMARY], d = t[p], g = e === s.HEADER, C = D().kind === "root", w = H(
-    o || (g ? U : void 0)
-  ), P = w ? {
-    backgroundColor: w,
-    color: F(w)
-  } : void 0;
-  return /* @__PURE__ */ E(
-    h,
+  ), b = P[t] || P[a.PRIMARY], d = e[p], g = t === a.HEADER, w = H().kind === "root", h = j(
+    o || (g ? F : void 0)
+  ), L = h ? {
+    backgroundColor: h,
+    color: _(h)
+  } : void 0, v = t === a.SLIDER ? /* @__PURE__ */ i(
+    K,
     {
-      vertical: !0,
-      className: "gap-6",
-      children: [
-        e === s.SLIDER ? /* @__PURE__ */ a(
-          j,
-          {
-            data: t,
-            activeIndex: p,
-            onChange: (l) => i(t[l], l)
-          }
-        ) : (() => {
-          const l = /* @__PURE__ */ a(
-            h,
-            {
-              className: S(
-                "w-fit mx-auto max-tablet:w-full overflow-x-auto no-scrollbar cursor-grab active:cursor-grabbing",
-                // В шапке ряд прижат вправо. Без этого `mx-auto` съедает всё
-                // свободное место раньше, чем сработает justify-between, и
-                // переключатель повисает посреди строки.
-                g && "mx-0",
-                b.container
-              ),
-              children: t.map((m, f) => {
-                var y;
-                return /* @__PURE__ */ a(
-                  "button",
-                  {
-                    onClick: () => i(m, f),
-                    style: f === p ? P : void 0,
-                    className: S(
-                      "bg-transparent cursor-pointer text-center whitespace-nowrap transition-colors duration-200 max-tablet:min-w-min max-tablet:flex-1",
-                      b.item,
-                      f === p && b.activeItem
-                    ),
-                    children: m == null ? void 0 : m.title
-                  },
-                  ((y = m.tabKey) == null ? void 0 : y.trim()) || m.title || f
-                );
-              })
-            }
-          );
-          if (!g)
-            return l;
-          const x = /* @__PURE__ */ E(h, { className: "w-full items-center justify-between gap-4 max-tablet:flex-col max-tablet:items-start", children: [
-            r ? /* @__PURE__ */ a("h2", { className: "text-[#0e0f11] font-bold text-[32px] leading-[40px] max-tablet:text-[24px] max-tablet:leading-[32px]", children: r }) : null,
-            l
-          ] });
-          return C ? /* @__PURE__ */ a(T, { children: x }) : x;
-        })(),
-        (v = d == null ? void 0 : d.components) != null && v.length ? /* @__PURE__ */ a("div", { className: "segments-content w-full", children: /* @__PURE__ */ a(k, { fallback: null, children: /* @__PURE__ */ a(Q, { components: d.components }) }) }) : null
-      ]
+      data: e,
+      activeIndex: p,
+      onChange: (l) => s(e[l], l),
+      edgeInset: w
     }
+  ) : null;
+  return (
+    // min-w-0: во flex-родителе блок иначе раздвигается по ширине ряда
+    // табов, и прокрутка внутри ряда не включается
+    /* @__PURE__ */ S(
+      y,
+      {
+        vertical: !0,
+        className: "min-w-0 gap-6",
+        children: [
+          t === a.SLIDER ? w ? /* @__PURE__ */ i(R, { className: "max-tablet:px-0", children: v }) : v : (() => {
+            const l = /* @__PURE__ */ i(
+              y,
+              {
+                className: C(
+                  "w-fit mx-auto max-tablet:w-full overflow-x-auto no-scrollbar cursor-grab active:cursor-grabbing",
+                  // В шапке ряд прижат вправо. Без этого `mx-auto` съедает всё
+                  // свободное место раньше, чем сработает justify-between, и
+                  // переключатель повисает посреди строки.
+                  g && "mx-0",
+                  b.container
+                ),
+                children: e.map((m, f) => {
+                  var I;
+                  return /* @__PURE__ */ i(
+                    "button",
+                    {
+                      onClick: () => s(m, f),
+                      style: f === p ? L : void 0,
+                      className: C(
+                        "bg-transparent cursor-pointer text-center whitespace-nowrap transition-colors duration-200 max-tablet:min-w-min max-tablet:flex-1",
+                        b.item,
+                        f === p && b.activeItem
+                      ),
+                      children: m == null ? void 0 : m.title
+                    },
+                    ((I = m.tabKey) == null ? void 0 : I.trim()) || m.title || f
+                  );
+                })
+              }
+            );
+            if (!g)
+              return l;
+            const x = /* @__PURE__ */ S(y, { className: "w-full items-center justify-between gap-4 max-tablet:flex-col max-tablet:items-start", children: [
+              r ? /* @__PURE__ */ i("h2", { className: "text-[#0e0f11] font-bold text-[32px] leading-[40px] max-tablet:text-[24px] max-tablet:leading-[32px]", children: r }) : null,
+              l
+            ] });
+            return w ? /* @__PURE__ */ i(R, { children: x }) : x;
+          })(),
+          (E = d == null ? void 0 : d.components) != null && E.length ? /* @__PURE__ */ i("div", { className: "segments-content w-full", children: /* @__PURE__ */ i(T, { fallback: null, children: /* @__PURE__ */ i(U, { components: d.components }) }) }) : null
+        ]
+      }
+    )
   );
 };
-B.propsToEdit = K;
+q.propsToEdit = O;
 export {
-  B as Segments
+  q as Segments
 };

package/dist/Segments/SegmentsSliderTabs.js

@@ -1,56 +1,99 @@
-import { jsx as a, jsxs as b } from "react/jsx-runtime";
-import { useState as h, useRef as p, useEffect as c } from "react";
-import { u as w } from "../useDraggableScroll-440da9b7.js";
-import { c as v } from "../cn-6a4bf187.js";
-const E = ({
-  data: n,
-  activeIndex: r,
-  onChange: f
+import { jsx as c, jsxs as w } from "react/jsx-runtime";
+import { useState as L, useRef as v, useEffect as a } from "react";
+import { u as E } from "../useDraggableScroll-440da9b7.js";
+import { c as m } from "../cn-6a4bf187.js";
+const S = 5, y = ({
+  data: f,
+  activeIndex: s,
+  onChange: h,
+  edgeInset: p = !0
 }) => {
-  const { ref: o, events: m } = w(), [i, u] = h({ left: 0, width: 0 }), l = p([]);
-  return c(() => {
+  const { ref: o, events: x } = E(), [u, b] = L({ left: 0, width: 0 }), i = v([]);
+  return a(() => {
     const t = () => {
-      const e = l.current[r];
-      e && u({
+      const e = i.current[s];
+      e && b({
         left: e.offsetLeft,
         width: e.offsetWidth
       });
     };
     return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
-  }, [r, n]), c(() => {
-    const t = o.current, e = l.current[r];
+  }, [s, f]), a(() => {
+    const t = o.current, e = i.current[s];
     if (!t || !e)
       return;
-    const s = e.offsetLeft - (t.clientWidth - e.offsetWidth) / 2, d = Math.max(t.scrollWidth - t.clientWidth, 0), x = Math.min(Math.max(s, 0), d);
+    const r = e.offsetLeft - (t.clientWidth - e.offsetWidth) / 2, n = Math.max(
+      t.scrollWidth - t.clientWidth,
+      0
+    ), l = Math.min(
+      Math.max(r, 0),
+      n
+    );
     t.scrollTo({
-      left: x,
+      left: l,
       behavior: "smooth"
     });
-  }, [r, o]), /* @__PURE__ */ a(
+  }, [s, o]), a(() => {
+    const t = o.current;
+    if (!t)
+      return;
+    const e = (r) => {
+      if (r.ctrlKey || Math.abs(r.deltaY) <= Math.abs(r.deltaX))
+        return;
+      const n = t.scrollWidth - t.clientWidth;
+      if (n <= 0)
+        return;
+      const l = r.deltaMode === 1 ? r.deltaY * 16 : r.deltaMode === 2 ? r.deltaY * t.clientWidth : r.deltaY;
+      l < 0 && t.scrollLeft <= 1 || l > 0 && t.scrollLeft >= n - 1 || (r.preventDefault(), t.scrollLeft += l);
+    };
+    return t.addEventListener("wheel", e, { passive: !1 }), () => t.removeEventListener("wheel", e);
+  }, [o]), a(() => {
+    const t = o.current;
+    if (!t)
+      return;
+    let e = null;
+    const r = (l) => {
+      e = l.clientX;
+    }, n = (l) => {
+      const d = e;
+      e = null, d !== null && Math.abs(l.clientX - d) > S && (l.preventDefault(), l.stopPropagation());
+    };
+    return t.addEventListener("mousedown", r, !0), t.addEventListener("click", n, !0), () => {
+      t.removeEventListener("mousedown", r, !0), t.removeEventListener("click", n, !0);
+    };
+  }, [o]), // Ряд шире контейнера прокручивается внутри него. Центрирует ряд
+  // `mx-auto` у внутреннего блока, а не justify-center: при нехватке места
+  // justify-center сдвигал ряд влево за край, и первые табы было уже не
+  // достать прокруткой. Автоотступы в такой ситуации обнуляются, и ряд
+  // встаёт от левого края, а лишнее уходит под правый — как в макете.
+  /* @__PURE__ */ c(
     "div",
     {
       ref: o,
-      ...m,
-      className: "mb-6 flex w-full max-w-full justify-center overflow-x-auto no-scrollbar cursor-grab active:cursor-grabbing max-tablet:justify-start max-tablet:px-4",
-      children: /* @__PURE__ */ b("div", { className: "relative mx-auto inline-flex gap-1 rounded-[20px] max-tablet:rounded-2xl bg-[#edeef0] h-[48px] min-w-max", children: [
-        /* @__PURE__ */ a(
+      ...x,
+      className: m(
+        "mb-6 flex w-full max-w-full overflow-x-auto no-scrollbar cursor-grab active:cursor-grabbing",
+        p && "max-tablet:px-4"
+      ),
+      children: /* @__PURE__ */ w("div", { className: "relative mx-auto inline-flex gap-1 rounded-[20px] max-tablet:rounded-2xl bg-[#edeef0] h-[48px] min-w-max", children: [
+        /* @__PURE__ */ c(
           "div",
           {
             className: "absolute top-0 bottom-0 rounded-[20px] max-tablet:rounded-2xl bg-white shadow-sm transition-all duration-300 ease-in-out",
             style: {
-              left: i.left,
-              width: i.width
+              left: u.left,
+              width: u.width
             }
           }
         ),
-        n.map((t, e) => /* @__PURE__ */ a(
+        f.map((t, e) => /* @__PURE__ */ c(
           "button",
           {
-            ref: (s) => l.current[e] = s,
-            onClick: () => f(e),
-            className: v(
+            ref: (r) => i.current[e] = r,
+            onClick: () => h(e),
+            className: m(
               "relative z-10 rounded-[20px] max-tablet:rounded-2xl px-4 py-2 text-[14px] font-medium whitespace-nowrap transition-colors min-w-[180px] max-tablet:min-w-[112px]",
-              r === e ? "text-blackBG" : "text-[#6b7280]"
+              s === e ? "text-blackBG" : "text-[#6b7280]"
             ),
             children: t.title
           },
@@ -61,5 +104,5 @@ const E = ({
   );
 };
 export {
-  E as SegmentsSliderTabs
+  y as SegmentsSliderTabs
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "md-components-mdigial-azamat",
   "author": "Azamat Raimbekov",
   "private": false,
-  "version": "0.0.348",
+  "version": "0.0.349",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",