@dgshahr/ui-kit 1.4.0 → 1.5.1

package/dist/Slide-CyQuarjr.js

@@ -1,331 +0,0 @@
-"use client";
-import { jsx as r, jsxs as N, Fragment as V } from "react/jsx-runtime";
-import { c as p } from "./clsx-OuTLNxxd.js";
-import { createContext as F, useContext as $, useState as C, useEffect as x, forwardRef as K, useRef as M, useImperativeHandle as z, useId as X } from "react";
-import { I as q } from "./IconArrowLeft2-cxcPyDqS.js";
-import { I as H } from "./IconArrowRight2-BoXg0Gkw.js";
-import A from "./Button/index.mjs";
-const B = F({
-  slidesPerView: 1,
-  spaceBetween: 0,
-  navigationVariant: "outside",
-  showNavigationDots: !0,
-  showPaginationText: !1,
-  childrenCount: 0,
-  sliderId: ""
-}), L = () => $(B);
-function G({
-  active: i,
-  autoplay: e,
-  variant: n = "outside"
-}) {
-  return [
-    {
-      inside: "dgsuikit:bg-gray-500/50 dgsuikit:hover:bg-gray-500/80",
-      outside: "dgsuikit:bg-gray-200 dgsuikit:hover:bg-gray-300"
-    }[n],
-    i ? "dgsuikit:w-[22px]" : "dgsuikit:w-[6px]",
-    e ? "dgsuikit:p-[1px]" : ""
-  ];
-}
-const J = (i) => {
-  const { active: e, onClick: n, onNavigateToNext: o, index: t } = i, { autoplay: a, navigationVariant: k = "outside" } = L(), [d, l] = C(0);
-  return x(() => {
-    if (!e || !a) return;
-    const f = typeof a == "boolean" ? 7e3 : a?.delay ?? 7e3;
-    let m = Date.now();
-    const u = setInterval(() => {
-      const c = Date.now() - m, g = c / f * 100;
-      l(Math.min(g, 100)), c >= f && typeof o == "function" && (o(), l(0), clearInterval(u));
-    }, 100);
-    return function() {
-      return l(0), m = Date.now(), clearInterval(u);
-    };
-  }, [e, a, o]), /* @__PURE__ */ r(
-    "button",
-    {
-      className: p(
-        "dgsuikit:rounded-full dgsuikit:overflow-hidden dgsuikit:transition-all dgsuikit:h-[6px]",
-        G({ active: e, autoplay: a, variant: k })
-      ),
-      onClick: n,
-      "aria-label": `slider-navigation-dot-${t + 1}`,
-      children: e && /* @__PURE__ */ r(
-        "div",
-        {
-          className: p("dgsuikit:h-full dgsuikit:rounded-full", {
-            "dgsuikit:bg-white": k === "inside",
-            "dgsuikit:bg-gray-700": k === "outside"
-          }),
-          style: { width: a ? `${d}%` : "100%" }
-        }
-      )
-    }
-  );
-}, Q = (i) => {
-  const { onNavigate: e, slideIndex: n, slidesCount: o } = i, {
-    navigationButtonsShowType: t = "hide",
-    dotsClassName: a,
-    navigationContainerClassName: k,
-    navigationVariant: d = "outside",
-    showNavigationDots: l = !0,
-    showPaginationText: f
-  } = L(), m = /* @__PURE__ */ N(
-    "div",
-    {
-      className: p("dgsuikit:flex dgsuikit:gap-2", {
-        "dgsuikit:absolute dgsuikit:bottom-0 dgsuikit:left-[5.5%]": d === "inside" && t !== "onSides",
-        "dgsuikit:absolute dgsuikit:justify-between dgsuikit:top-1/2 dgsuikit:-translate-y-1/2 dgsuikit:w-full dgsuikit:px-[5.5%]": t === "onSides",
-        "dgsuikit:opacity-0 dgsuikit:group-hover:opacity-100 dgsuikit:transition": t === "hover" || t === "onSides"
-      }),
-      children: [
-        /* @__PURE__ */ r(
-          A,
-          {
-            type: "button",
-            variant: "secondary",
-            onClick: () => e(n - 1),
-            rightIcon: /* @__PURE__ */ r(H, {}),
-            "aria-label": "slider-previous-button"
-          }
-        ),
-        /* @__PURE__ */ r(
-          A,
-          {
-            type: "button",
-            variant: "secondary",
-            onClick: () => e(n + 1),
-            rightIcon: /* @__PURE__ */ r(q, {}),
-            "aria-label": "slider-next-button"
-          }
-        )
-      ]
-    }
-  );
-  return /* @__PURE__ */ N(V, { children: [
-    t && t !== "hide" && t === "onSides" && m,
-    /* @__PURE__ */ N(
-      "div",
-      {
-        className: p(
-          "dgsuikit:flex",
-          {
-            "dgsuikit:items-center dgsuikit:mt-2": d === "outside",
-            "dgsuikit:absolute dgsuikit:bottom-4 dgsuikit:w-full dgsuikit:justify-center": d === "inside",
-            "dgsuikit:justify-between": d === "outside" && t !== "hide" && t !== "onSides",
-            "dgsuikit:justify-center": d === "outside" && (t === "hide" || t === "onSides")
-          },
-          k
-        ),
-        children: [
-          t && t !== "hide" && t !== "onSides" && m,
-          (l || f) && /* @__PURE__ */ N("div", { className: "dgsuikit:flex dgsuikit:items-center dgsuikit:gap-3", children: [
-            f && /* @__PURE__ */ N("div", { className: "dgsuikit:flex dgsuikit:items-center dgsuikit:gap-1 dgsuikit:font-caption-regular dgsuikit:text-gray-400 dgsuikit:ss02", children: [
-              /* @__PURE__ */ r(
-                "span",
-                {
-                  className: p("dgsuikit:font-bold", {
-                    "dgsuikit:text-gray-600": d === "outside",
-                    "dgsuikit:text-white": d === "inside"
-                  }),
-                  children: n + 1
-                }
-              ),
-              /* @__PURE__ */ r("span", { children: "از" }),
-              /* @__PURE__ */ r("span", { children: o })
-            ] }),
-            l && /* @__PURE__ */ r(
-              "div",
-              {
-                className: p(
-                  "dgsuikit:flex dgsuikit:items-center dgsuikit:justify-center dgsuikit:gap-2",
-                  a
-                ),
-                children: Array.from(Array(o).keys()).map((u, c) => /* @__PURE__ */ r(
-                  J,
-                  {
-                    active: n === c,
-                    index: c,
-                    onClick: () => e(c),
-                    onNavigateToNext: () => e(n + 1)
-                  },
-                  u + o
-                ))
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
-}, U = K((i, e) => {
-  const [n, o] = C(i), {
-    className: t = "",
-    containerClassName: a = "",
-    showNavigationDots: k = !0,
-    slidesPerView: d = 1,
-    navigationButtonsShowType: l = "hide",
-    spaceBetween: f = 0,
-    showPaginationText: m,
-    onSlideIndexChange: u,
-    initialSlide: c,
-    containerXPadding: g = 0
-  } = n, [S, I] = C(0), [W, D] = C(0), R = Object.fromEntries(
-    Object.entries(n).filter(([s]) => s !== "children")
-  ), h = M(null), v = Math.ceil(W / Math.floor(d)), E = (k || l && l !== "hide" || m) && v > 1;
-  function O(s) {
-    if (Math.ceil(Math.abs(s.currentTarget.scrollLeft)) + s.currentTarget.clientWidth + 1 + g >= s.currentTarget.scrollWidth) {
-      I(v - 1);
-      return;
-    }
-    const w = s.currentTarget.scrollWidth - g * 2, b = w / v, y = (w - s.currentTarget.scrollLeft - g) / b;
-    if (y <= v) {
-      I(0);
-      return;
-    }
-    I(Math.round(y % v));
-  }
-  function P(s) {
-    if (!h.current) return;
-    const w = h.current.offsetWidth, b = S - s, y = h.current.scrollWidth / v, j = b * y;
-    s < 0 ? h.current.scrollTo({ behavior: "smooth", left: -(w * v) }) : s >= v ? h.current.scrollTo({ behavior: "smooth", left: 0 }) : h.current.scrollBy({ behavior: "smooth", left: j });
-  }
-  function T() {
-    const w = Object.keys(i.responsive).sort(
-      (y, j) => Number(y) - Number(j)
-    ).findLast(
-      (y) => Number(y) <= window.innerWidth
-    ), b = w ? i.responsive[Number(w)] : null;
-    o(b ? { ...n, ...b } : i);
-  }
-  return z(e, () => ({
-    element: h.current,
-    navigate: (s) => P(Math.max(0, s - 1))
-  })), x(() => {
-    if (!h.current) return;
-    let s = h.current.childElementCount;
-    g > 0 && (s -= 2), D(s);
-  }, [i.children, h, g]), x(() => {
-    if (!(!i.responsive || Object.keys(i.responsive).length <= 0))
-      return T(), window.addEventListener("resize", T), () => {
-        window.removeEventListener("resize", T);
-      };
-  }, [i.responsive]), x(() => {
-    u && typeof u == "function" && u(S);
-  }, [S]), x(() => {
-    typeof c == "number" && h.current && P(Math.max(0, c - 1));
-  }, [c, h.current]), /* @__PURE__ */ r(B.Provider, { value: { ...R, childrenCount: W, sliderId: X() }, children: /* @__PURE__ */ N(
-    "div",
-    {
-      className: p("dgsuikit:overflow-hidden dgsuikit:relative dgsuikit:group", t),
-      style: { direction: "rtl" },
-      children: [
-        /* @__PURE__ */ N(
-          "div",
-          {
-            className: p(
-              "dgsuikit:flex dgsuikit:snap-x dgsuikit:snap-mandatory dgsuikit:overflow-x-auto dgsuikit:no-scrollbar",
-              a
-            ),
-            style: { marginLeft: -f },
-            onScroll: O,
-            ref: h,
-            children: [
-              g > 0 && /* @__PURE__ */ r(
-                "div",
-                {
-                  className: "dgsuikit:shrink-0",
-                  style: {
-                    width: g,
-                    paddingLeft: f
-                  }
-                }
-              ),
-              i.children,
-              g > 0 && /* @__PURE__ */ r(
-                "div",
-                {
-                  className: "dgsuikit:shrink-0",
-                  style: {
-                    width: g,
-                    paddingLeft: f
-                  }
-                }
-              )
-            ]
-          }
-        ),
-        E && /* @__PURE__ */ r(
-          Q,
-          {
-            onNavigate: P,
-            slideIndex: S,
-            slidesCount: v
-          }
-        )
-      ]
-    }
-  ) });
-});
-U.displayName = "Slider";
-function Y({
-  slidesPerView: i,
-  childIndex: e,
-  centerMode: n,
-  childrenCount: o,
-  haveContainerPadding: t
-}) {
-  const a = e % Math.floor(i) === 0, k = i % 1 !== 0, d = e === 0, l = e === o - 1;
-  if (!a) return "none";
-  if (n) {
-    if (k && !t) {
-      if (d) return "start";
-      if (l) return "end";
-    }
-    return "center";
-  }
-  return "start";
-}
-const st = (i) => {
-  const { children: e, className: n, style: o, ...t } = i, {
-    slidesPerView: a = 1,
-    spaceBetween: k = 0,
-    centerMode: d = !1,
-    containerXPadding: l = 0,
-    childrenCount: f = 0,
-    sliderId: m
-  } = L(), u = M(null), [c, g] = C(0);
-  return x(() => {
-    u.current && g(
-      Array.prototype.indexOf.call(
-        document.querySelectorAll(`[id='slide-item-${m}']`),
-        u.current
-      )
-    );
-  }, [u, f, l]), /* @__PURE__ */ r(
-    "div",
-    {
-      ...t,
-      ref: u,
-      id: `slide-item-${m}`,
-      className: p("dgsuikit:shrink-0 dgsuikit:snap-normal", n),
-      style: {
-        width: 100 / (a ?? 1) + "%",
-        paddingLeft: k,
-        scrollSnapAlign: Y({
-          slidesPerView: a,
-          childIndex: c,
-          centerMode: d,
-          childrenCount: f || 0,
-          haveContainerPadding: l > 0
-        }),
-        ...o
-      },
-      children: e
-    }
-  );
-};
-export {
-  U as S,
-  st as a
-};