konsolpro-custom-ui 0.0.327

package/dist/lib/ui/customizable-carousel.js

@@ -0,0 +1,431 @@
+var W = Object.defineProperty;
+var y = Object.getOwnPropertySymbols;
+var D = Object.prototype.hasOwnProperty, H = Object.prototype.propertyIsEnumerable;
+var O = (e, s, t) => s in e ? W(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t, N = (e, s) => {
+  for (var t in s || (s = {}))
+    D.call(s, t) && O(e, t, s[t]);
+  if (y)
+    for (var t of y(s))
+      H.call(s, t) && O(e, t, s[t]);
+  return e;
+};
+var j = (e, s) => {
+  var t = {};
+  for (var n in e)
+    D.call(e, n) && s.indexOf(n) < 0 && (t[n] = e[n]);
+  if (e != null && y)
+    for (var n of y(e))
+      s.indexOf(n) < 0 && H.call(e, n) && (t[n] = e[n]);
+  return t;
+};
+import { jsxs as h, jsx as c } from "react/jsx-runtime";
+import { createContext as $, useState as k, useCallback as b, useEffect as q, useContext as F } from "react";
+import { c as P } from "../../chunks/index-BO6p208a.js";
+import { u as G } from "../../chunks/embla-carousel-react.esm-ZaRSnfTq.js";
+import { c as a } from "../../chunks/utils-TbLXCoKm.js";
+const J = {
+  show: !0,
+  position: "outside",
+  align: "center",
+  activeClassName: "bg-default",
+  inactiveClassName: "bg-default opacity-40"
+};
+function R(e) {
+  const I = e || {}, { indicators: s, defaultActive: t = 0 } = I, n = j(I, ["indicators", "defaultActive"]), r = N({
+    align: "start",
+    loop: !1,
+    slidesToScroll: 1,
+    containScroll: "trimSnaps"
+  }, n), o = N(N({}, J), s), [u, i] = G(r), [f, d] = k(t), [l, m] = k(!1), [v, C] = k(!1), p = b(() => {
+    i && (d(i.selectedScrollSnap()), m(i.canScrollNext()), C(i.canScrollPrev()));
+  }, [i]);
+  q(() => {
+    if (i)
+      return i.on("select", p), i.on("reInit", p), t > 0 && t < i.slideNodes().length && i.scrollTo(t), p(), () => {
+        i.off("select", p), i.off("reInit", p);
+      };
+  }, [i, p, t]);
+  const g = b((S) => {
+    i && i.scrollTo(S);
+  }, [i]), V = b(() => {
+    i && i.scrollNext();
+  }, [i]), E = b(() => {
+    i && i.scrollPrev();
+  }, [i]), _ = b((S) => {
+    g(S);
+  }, [g]);
+  return {
+    active: f,
+    emblaRef: u,
+    embla: i,
+    indicatorOptions: o,
+    next: V,
+    prev: E,
+    scrollTo: g,
+    onChange: _,
+    canScrollNext: l,
+    canScrollPrev: v
+  };
+}
+const T = $(null);
+function x() {
+  const e = F(T);
+  if (!e)
+    throw new Error("Компоненты карусели должны использоваться внутри Carousel");
+  return e;
+}
+function K({ children: e, className: s, options: t }) {
+  const n = R(t);
+  return /* @__PURE__ */ c(T.Provider, { value: n, children: /* @__PURE__ */ c("div", { className: a("relative w-full", s), children: e }) });
+}
+function L({ items: e, className: s, slideClassName: t }) {
+  const { emblaRef: n } = x();
+  return /* @__PURE__ */ c("div", { ref: n, className: a("overflow-hidden", s), children: /* @__PURE__ */ c("div", { className: "flex", children: e.map((r, o) => /* @__PURE__ */ c(
+    "div",
+    {
+      className: a("flex-[0_0_100%] min-w-0", t),
+      style: { flex: "0 0 100%" },
+      children: r
+    },
+    o
+  )) }) });
+}
+function M({
+  items: e,
+  className: s,
+  titleClassName: t,
+  textClassName: n
+}) {
+  const { active: r } = x(), o = e[r] || {};
+  return /* @__PURE__ */ h("div", { className: a(s), children: [
+    o.title && /* @__PURE__ */ c("div", { className: a(t), children: o.title }),
+    o.text && /* @__PURE__ */ c("div", { className: a(n), children: o.text })
+  ] });
+}
+function Q({
+  item: e,
+  className: s,
+  titleClassName: t,
+  textClassName: n
+}) {
+  return /* @__PURE__ */ h("div", { className: a(s), children: [
+    e.title && /* @__PURE__ */ c("div", { className: a(t), children: e.title }),
+    e.text && /* @__PURE__ */ c("div", { className: a(n), children: e.text })
+  ] });
+}
+const z = P(
+  "flex transition-opacity",
+  {
+    variants: {
+      position: {
+        inside: "absolute z-10",
+        // Внутри контейнера
+        outside: "mt-4"
+        // Вне контейнера
+      },
+      align: {
+        start: "justify-start",
+        // Выравнивание слева
+        center: "justify-center gap-4",
+        // Выравнивание по центру
+        end: "justify-end",
+        // Выравнивание справа
+        sides: "justify-between"
+        // По краям
+      }
+    },
+    compoundVariants: [
+      { position: "inside", align: "sides", class: "inset-y-0 inset-x-0 items-center px-4" },
+      { position: "inside", align: "start", class: "left-4 top-1/2 -translate-y-1/2 gap-2" },
+      { position: "inside", align: "center", class: "left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2" },
+      { position: "inside", align: "end", class: "right-4 top-1/2 -translate-y-1/2 gap-2" }
+    ],
+    defaultVariants: {
+      position: "inside",
+      align: "sides"
+    }
+  }
+);
+function U({
+  prevButton: e,
+  nextButton: s,
+  className: t,
+  buttonsPosition: n = "inside",
+  buttonsAlign: r = "sides",
+  showOnlyOnHover: o = !1,
+  hideDisabled: u = !1
+}) {
+  const { prev: i, next: f, canScrollPrev: d, canScrollNext: l } = x();
+  if (!e && !s)
+    return null;
+  const m = u && !d, v = u && !l, C = () => !e || m ? null : typeof e == "function" ? e({ onClick: i, disabled: !d }) : /* @__PURE__ */ c(
+    "div",
+    {
+      onClick: i,
+      className: a(
+        "cursor-pointer",
+        !d && "opacity-50 cursor-not-allowed"
+      ),
+      "aria-disabled": !d,
+      children: e
+    }
+  ), p = () => !s || v ? null : typeof s == "function" ? s({ onClick: f, disabled: !l }) : /* @__PURE__ */ c(
+    "div",
+    {
+      onClick: f,
+      className: a(
+        "cursor-pointer",
+        !l && "opacity-50 cursor-not-allowed"
+      ),
+      "aria-disabled": !l,
+      children: s
+    }
+  );
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      className: a(
+        z({ position: n, align: r }),
+        o && "opacity-0 group-hover:opacity-100",
+        t
+      ),
+      children: [
+        C(),
+        p()
+      ]
+    }
+  );
+}
+function X({
+  onPrev: e,
+  onNext: s,
+  canScrollPrev: t,
+  canScrollNext: n,
+  prevButton: r,
+  nextButton: o,
+  className: u,
+  buttonsPosition: i = "inside",
+  buttonsAlign: f = "sides",
+  showOnlyOnHover: d = !1,
+  hideDisabled: l = !1
+}) {
+  if (!r && !o)
+    return null;
+  const m = l && !t, v = l && !n, C = () => !r || m ? null : typeof r == "function" ? r({ onClick: e, disabled: !t }) : /* @__PURE__ */ c(
+    "div",
+    {
+      onClick: e,
+      className: a(
+        "cursor-pointer",
+        !t && "opacity-50 cursor-not-allowed"
+      ),
+      "aria-disabled": !t,
+      children: r
+    }
+  ), p = () => !o || v ? null : typeof o == "function" ? o({ onClick: s, disabled: !n }) : /* @__PURE__ */ c(
+    "div",
+    {
+      onClick: s,
+      className: a(
+        "cursor-pointer",
+        !n && "opacity-50 cursor-not-allowed"
+      ),
+      "aria-disabled": !n,
+      children: o
+    }
+  );
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      className: a(
+        z({ position: i, align: f }),
+        d && "opacity-0 group-hover:opacity-100",
+        u
+      ),
+      children: [
+        C(),
+        p()
+      ]
+    }
+  );
+}
+const Y = P(
+  "flex gap-2 transition-all",
+  {
+    variants: {
+      position: {
+        inside: "absolute z-10",
+        // Внутри контейнера
+        outside: "mt-6"
+        // Вне контейнера
+      },
+      align: {
+        start: "justify-start px-4",
+        // Выравнивание слева
+        center: "justify-center",
+        // Выравнивание по центру
+        end: "justify-end px-4",
+        // Выравнивание справа
+        stretch: "justify-between px-4"
+        // Растянуть на всю ширину
+      }
+    },
+    compoundVariants: [
+      // Компаунд-варианты для позиции индикаторов внутри контейнера
+      { position: "inside", align: "start", class: "left-0 bottom-6" },
+      { position: "inside", align: "center", class: "left-1/2 -translate-x-1/2 bottom-6" },
+      { position: "inside", align: "end", class: "right-0 bottom-6" },
+      { position: "inside", align: "stretch", class: "left-0 right-0 bottom-6" }
+    ],
+    defaultVariants: {
+      position: "outside",
+      align: "center"
+    }
+  }
+);
+function A({
+  active: e,
+  count: s,
+  onChange: t,
+  show: n = !0,
+  position: r = "outside",
+  align: o = "center",
+  className: u,
+  activeClassName: i = "bg-default",
+  inactiveClassName: f = "bg-default opacity-40"
+}) {
+  return !n || s <= 1 ? null : /* @__PURE__ */ c(
+    "div",
+    {
+      className: a(
+        Y({ position: r, align: o }),
+        u
+      ),
+      role: "tablist",
+      "aria-label": "Индикаторы карусели",
+      children: Array.from({ length: s }).map((d, l) => /* @__PURE__ */ c(
+        "div",
+        {
+          onClick: () => t(l),
+          className: a(
+            "h-[3px] rounded-full transition-all duration-300 cursor-pointer focus:outline-none focus:ring-[#251D35]",
+            l === e ? a("w-6", i) : (
+              // 24px для активного (w-6)
+              a("w-4", f)
+            )
+            // 16px для неактивного (w-4)
+          ),
+          role: "tab",
+          tabIndex: 0,
+          "aria-label": `Перейти к слайду ${l + 1}`,
+          "aria-selected": l === e
+        },
+        l
+      ))
+    }
+  );
+}
+function Z({ className: e, count: s }) {
+  const { active: t, onChange: n, indicatorOptions: r } = x(), { show: o, position: u, align: i, className: f, activeClassName: d, inactiveClassName: l } = r;
+  return /* @__PURE__ */ c(
+    A,
+    {
+      active: t,
+      count: s || 0,
+      onChange: n,
+      show: o,
+      position: u,
+      align: i,
+      className: a(f, e),
+      activeClassName: d,
+      inactiveClassName: l
+    }
+  );
+}
+const w = {
+  Root: K,
+  Items: L,
+  Dots: Z,
+  DotsView: A,
+  // Экспортируем view-компонент для использования вне контекста
+  Content: M,
+  ContentView: Q,
+  Buttons: U,
+  // Добавляем компонент кнопок
+  ButtonsView: X
+  // Экспортируем view-компонент кнопок для использования вне контекста
+};
+function oe(v) {
+  var C = v, {
+    items: e,
+    renderSlide: s,
+    options: t,
+    className: n,
+    slideClassName: r,
+    prevButton: o,
+    nextButton: u,
+    buttonsPosition: i,
+    buttonsAlign: f,
+    showButtonsOnlyOnHover: d,
+    hideDisabledButtons: l
+  } = C, m = j(C, [
+    "items",
+    "renderSlide",
+    "options",
+    "className",
+    "slideClassName",
+    "prevButton",
+    "nextButton",
+    "buttonsPosition",
+    "buttonsAlign",
+    "showButtonsOnlyOnHover",
+    "hideDisabledButtons"
+  ]);
+  const p = !!(o || u);
+  return /* @__PURE__ */ h(w.Root, { options: t, className: a("group", n), children: [
+    /* @__PURE__ */ h("div", { className: "relative", children: [
+      /* @__PURE__ */ c(
+        w.Items,
+        N({
+          items: e.map((g, V) => s(g, V)),
+          slideClassName: r
+        }, m)
+      ),
+      p && /* @__PURE__ */ c(
+        w.Buttons,
+        {
+          prevButton: o,
+          nextButton: u,
+          buttonsPosition: i,
+          buttonsAlign: f,
+          showOnlyOnHover: d,
+          hideDisabled: l
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c(w.Dots, { count: e.length })
+  ] });
+}
+function ae({
+  items: e,
+  options: s,
+  renderItems: t,
+  renderControls: n,
+  className: r
+}) {
+  const o = R(s);
+  return /* @__PURE__ */ h("div", { className: a("relative w-full", r), children: [
+    t(o, e),
+    n && n(o, e)
+  ] });
+}
+export {
+  w as Carousel,
+  X as CarouselButtonsView,
+  Q as CarouselContentView,
+  A as CarouselDotsView,
+  oe as DefaultCustomizableCarousel,
+  ae as HeadlessCarousel,
+  R as useCarousel,
+  x as useCarouselContext
+};