welcome-ui/dist/Swiper.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import './Swiper.css';
import { jsx as $ } from "react/jsx-runtime";
import { a as z, g as pe, c as K, u as fe } from "./index-B6iGEm-i.js";
import { useRef as Z, useEffect as W, Children as se, cloneElement as ge, createContext as me, useContext as be, useState as H, useMemo as ee, useCallback as A } from "react";
import { u as we } from "./use-viewport-DuW6YjHT.js";
import { Button as oe } from "./Button.js";
import { Icon as le } from "./Icon.js";
var Y, ae;
function he() {
  if (ae) return Y;
  ae = 1;
  var i = "Expected a function", l = NaN, f = "[object Symbol]", o = /^\s+|\s+$/g, s = /^[-+]0x[0-9a-f]+$/i, m = /^0b[01]+$/i, t = /^0o[0-7]+$/i, n = parseInt, b = typeof z == "object" && z && z.Object === Object && z, r = typeof self == "object" && self && self.Object === Object && self, c = b || r || Function("return this")(), v = Object.prototype, E = v.toString, V = Math.max, M = Math.min, S = function() {
    return c.Date.now();
  };
  function N(e, u, w) {
    var _, L, B, O, a, g, p = 0, I = !1, P = !1, k = !0;
    if (typeof e != "function")
      throw new TypeError(i);
    u = j(u) || 0, x(w) && (I = !!w.leading, P = "maxWait" in w, B = P ? V(j(w.maxWait) || 0, u) : B, k = "trailing" in w ? !!w.trailing : k);
    function C(d) {
      var T = _, F = L;
      return _ = L = void 0, p = d, O = e.apply(F, T), O;
    }
    function J(d) {
      return p = d, a = setTimeout(q, u), I ? C(d) : O;
    }
    function ne(d) {
      var T = d - g, F = d - p, ie = u - T;
      return P ? M(ie, B - F) : ie;
    }
    function R(d) {
      var T = d - g, F = d - p;
      return g === void 0 || T >= u || T < 0 || P && F >= B;
    }
    function q() {
      var d = S();
      if (R(d))
        return re(d);
      a = setTimeout(q, ne(d));
    }
    function re(d) {
      return a = void 0, k && _ ? C(d) : (_ = L = void 0, O);
    }
    function de() {
      a !== void 0 && clearTimeout(a), p = 0, _ = g = L = a = void 0;
    }
    function ue() {
      return a === void 0 ? O : re(S());
    }
    function Q() {
      var d = S(), T = R(d);
      if (_ = arguments, L = this, g = d, T) {
        if (a === void 0)
          return J(g);
        if (P)
          return a = setTimeout(q, u), C(g);
      }
      return a === void 0 && (a = setTimeout(q, u)), O;
    }
    return Q.cancel = de, Q.flush = ue, Q;
  }
  function x(e) {
    var u = typeof e;
    return !!e && (u == "object" || u == "function");
  }
  function y(e) {
    return !!e && typeof e == "object";
  }
  function D(e) {
    return typeof e == "symbol" || y(e) && E.call(e) == f;
  }
  function j(e) {
    if (typeof e == "number")
      return e;
    if (D(e))
      return l;
    if (x(e)) {
      var u = typeof e.valueOf == "function" ? e.valueOf() : e;
      e = x(u) ? u + "" : u;
    }
    if (typeof e != "string")
      return e === 0 ? e : +e;
    e = e.replace(o, "");
    var w = m.test(e);
    return w || t.test(e) ? n(e.slice(2), w ? 2 : 8) : s.test(e) ? l : +e;
  }
  return Y = N, Y;
}
var Se = he();
const xe = /* @__PURE__ */ pe(Se), ve = "_root_eam2c_3", _e = "_container_eam2c_11", Pe = "_arrow_eam2c_77", U = {
  root: ve,
  container: _e,
  "container-mobile": "_container-mobile_eam2c_41",
  "container-tablet": "_container-tablet_eam2c_50",
  "container-desktop": "_container-desktop_eam2c_59",
  "container-full-width": "_container-full-width_eam2c_72",
  "arrow-placement-side": "_arrow-placement-side_eam2c_77",
  "arrow-placement-side-left": "_arrow-placement-side-left_eam2c_84",
  "arrow-placement-side-right": "_arrow-placement-side-right_eam2c_87",
  "arrow-mobile": "_arrow-mobile_eam2c_90",
  arrow: Pe,
  "arrow-desktop": "_arrow-desktop_eam2c_99",
  "arrow-background": "_arrow-background_eam2c_104"
}, ke = K(U), ye = ({
  children: i,
  className: l,
  placement: f = "side",
  size: o = "md",
  variant: s,
  ...m
}) => {
  const {
    navigation: { desktop: t, goNext: n, isNextDisabled: b, mobile: r }
  } = te();
  return /* @__PURE__ */ $(
    oe,
    {
      "aria-label": "Next slide",
      className: ke(
        "arrow",
        t && "arrow-desktop",
        r && "arrow-mobile",
        f === "side" && "arrow-placement-side",
        f === "side" && "arrow-placement-side-right",
        l
      ),
      disabled: b,
      onClick: n,
      size: o,
      variant: s ?? "secondary",
      ...m,
      children: i ?? /* @__PURE__ */ $(le, { name: "angle-right-b" })
    }
  );
}, Le = K(U), Ie = ({
  children: i,
  className: l,
  placement: f = "side",
  size: o = "md",
  variant: s,
  ...m
}) => {
  const {
    navigation: { desktop: t, goPrev: n, isPrevDisabled: b, mobile: r }
  } = te();
  return /* @__PURE__ */ $(
    oe,
    {
      "aria-label": "Previous slide",
      className: Le(
        "arrow",
        t && "arrow-mobile",
        r && "arrow-desktop",
        f === "side" && "arrow-placement-side",
        f === "side" && "arrow-placement-side-left",
        l
      ),
      disabled: b,
      onClick: n,
      size: o,
      variant: s ?? "secondary",
      ...m,
      children: i ?? /* @__PURE__ */ $(le, { name: "angle-left-b" })
    }
  );
}, Ve = (i, l) => {
  const f = Z();
  W(() => {
    f.current = i;
  }, [i]), W(() => {
    function o() {
      f.current();
    }
    if (l !== null) {
      const s = setInterval(o, l);
      return () => clearInterval(s);
    }
  }, [l]);
}, G = (i, l) => {
  if (l === 0)
    return `${100 / i}%`;
  const o = l * (i === 1 ? 4 : 2) / 16;
  return `calc(${100 / i}% - ${o}rem)`;
}, Oe = K(U), Ce = ({ children: i, className: l }) => {
  const {
    slides: {
      currentPage: f,
      currentSlidesPerView: o,
      expandOnLargeScreens: s,
      gap: m,
      handleScroll: t,
      id: n,
      isLastPage: b,
      length: r,
      perView: c,
      ref: v,
      setLength: E
    }
  } = te(), V = se.toArray(i);
  W(() => {
    E(V.length);
  }, [V.length, E]);
  const M = se.map(V, (S, N) => {
    const x = `${n}-${N}`, y = N + 1, D = Math.ceil(y / o) - 1, j = b ? r - y >= o : D !== f;
    return typeof S == "object" && S && "props" in S ? ge(S, {
      ...S.props,
      "aria-hidden": j,
      "aria-label": `${y} of ${r}`,
      "aria-roledescription": "slide",
      id: x,
      key: x
    }) : S;
  });
  return /* @__PURE__ */ $(
    "ul",
    {
      className: Oe(
        "container",
        c.mobile && "container-mobile",
        c.desktop && "container-desktop",
        c.tablet && "container-tablet",
        c.desktop && s && "container-full-width",
        l
      ),
      onScroll: t,
      ref: v,
      style: {
        "--slideDesktop": c.desktop,
        "--slideMobile": c.mobile,
        "--slideTablet": c.tablet,
        "--slideWidthDesktop": G(c.desktop, m),
        "--slideWidthMobile": G(c.mobile, m),
        "--slideWidthTablet": G(c.tablet, m),
        "--slideWithDesktopFullWidth": G(c.desktop + 2, m),
        "--spaceBetween": `${m / 16}rem`
      },
      children: M
    }
  );
}, Te = K(U), ce = me(null), te = () => {
  const i = be(ce);
  if (!i)
    throw new Error("Swiper components must be used within a Swiper component");
  return i;
}, h = {
  autoplay: { duration: 5e3, enabled: !1, loop: !1 },
  navigation: { desktop: !0, mobile: !0 },
  slides: {
    alignment: "default",
    expandOnLargeScreens: !1,
    gap: 20,
    id: "swiper",
    initialIndex: 0,
    perView: { desktop: 1, mobile: 1, tablet: 1 }
  }
}, Ne = {
  autoplay: h.autoplay,
  navigation: h.navigation,
  slides: {
    alignment: h.slides.alignment,
    currentPage: 0,
    currentSlidesPerView: h.slides.perView.desktop,
    expandOnLargeScreens: h.slides.expandOnLargeScreens,
    gap: h.slides.gap,
    id: h.slides.id,
    initialIndex: h.slides.initialIndex,
    perView: h.slides.perView,
    setCurrentPage: () => {
    }
  }
}, Be = (i = h) => {
  var v;
  const [l, f] = H(0), o = {
    autoplay: { ...h.autoplay, ...i.autoplay },
    navigation: { ...h.navigation, ...i.navigation },
    slides: {
      ...h.slides,
      ...i.slides,
      perView: {
        ...h.slides.perView,
        ...(v = i.slides) == null ? void 0 : v.perView
      }
    }
  }, {
    autoplay: s,
    navigation: m,
    slides: { expandOnLargeScreens: t, perView: n }
  } = o, { width: b } = we(), r = fe(), c = ee(() => b <= r.md ? n.mobile : b <= r.lg ? n.tablet : b >= r["4xl"] && t ? n.desktop + 2 : n.desktop, [b, r, t, n]);
  return {
    autoplay: s,
    navigation: m,
    slides: {
      alignment: o.slides.alignment,
      currentPage: l,
      currentSlidesPerView: c,
      expandOnLargeScreens: o.slides.expandOnLargeScreens,
      gap: o.slides.gap,
      id: o.slides.id,
      initialIndex: o.slides.initialIndex,
      perView: n,
      setCurrentPage: f
    }
  };
}, X = ({
  children: i,
  className: l,
  store: f = Ne,
  ...o
}) => {
  const { autoplay: s, navigation: m, slides: t } = f, { currentPage: n, setCurrentPage: b } = t, r = Z(), c = Z(!1), [v, E] = H(0), [V, M] = H(!1), [S, N] = H(!1), x = Math.ceil(v / t.currentSlidesPerView) || 1, y = A(() => {
    const a = r == null ? void 0 : r.current;
    if (a && !s.enabled) {
      const { offsetWidth: g, scrollLeft: p, scrollWidth: I } = a, P = !(p > t.gap), k = !(I - (p + g) > t.gap);
      M(P), N(k);
    } else
      M(!1), N(!1);
  }, [s.enabled, t.gap]), D = A(() => {
    var g, p;
    const a = r == null ? void 0 : r.current;
    if (a) {
      const { children: I, offsetWidth: P, scrollLeft: k, scrollWidth: C } = a, J = (p = (g = I == null ? void 0 : I[0]) == null ? void 0 : g.getBoundingClientRect()) == null ? void 0 : p.width, R = !(C - (k + P) > t.gap) ? x - 1 : Math.round(k / ((J + t.gap) * t.currentSlidesPerView));
      R !== n && b(R);
    }
  }, [x, n, t.currentSlidesPerView, r, b, t.gap]), j = ee(
    () => xe(() => {
      y(), D();
    }, 100),
    [y, D]
  ), e = A(
    (a, g = !1) => {
      var P, k, C;
      const p = r == null ? void 0 : r.current, I = (C = (k = (P = p == null ? void 0 : p.children) == null ? void 0 : P[0]) == null ? void 0 : k.getBoundingClientRect()) == null ? void 0 : C.width;
      p == null || p.scrollTo({
        // We don't want to have a scroll effect when we first render the swiper
        behavior: g ? "auto" : "smooth",
        left: a * (I + t.gap) * t.currentSlidesPerView,
        top: 0
      });
    },
    [t.currentSlidesPerView, t.gap, r]
  ), u = n === 0, w = n === x - 1, _ = A(() => {
    s.enabled && s.loop && w ? e(0) : e(n + 1);
  }, [n, e, w, s.enabled, s.loop]), L = A(() => {
    u && s.enabled && s.loop ? e(x - 1) : e(n - 1);
  }, [x, n, e, u, s.enabled, s.loop]);
  Ve(
    () => {
      s.enabled && _();
    },
    s.enabled ? s.duration : null
  ), W(() => {
    const a = (g) => {
      g.code === "ArrowLeft" && L(), g.code === "ArrowRight" && _();
    };
    return window.addEventListener("keydown", a), () => window.removeEventListener("keydown", a);
  }, [L, _]);
  const B = t.alignment === "center" ? (
    // if centeredSlides is true, we calculate which number is the middle page
    Math.floor(x / 2)
  ) : (
    // if centeredSlides is false, we calculate on which page the number in firstSlideToShow props is
    Math.ceil(t.initialIndex / t.currentSlidesPerView) - 1
  );
  W(() => {
    v > 0 && !c.current && (e(B, !0), c.current = !0);
  }, [v]), W(() => {
    y();
  }, [y, i]), W(() => {
    c.current && e(n);
  }, [n, e]);
  const O = ee(
    () => ({
      navigation: {
        goNext: _,
        goPrev: L,
        isNextDisabled: S,
        isPrevDisabled: V,
        ...m
      },
      slides: {
        alignment: t.alignment,
        currentPage: n,
        currentSlidesPerView: t.currentSlidesPerView,
        expandOnLargeScreens: t.expandOnLargeScreens,
        gap: t.gap,
        handleScroll: j,
        id: t.id,
        initialIndex: t.initialIndex,
        isLastPage: w,
        length: v,
        perView: t.perView,
        ref: r,
        setLength: E
      }
    }),
    [
      _,
      L,
      S,
      V,
      m,
      n,
      j,
      w,
      v,
      t
    ]
  );
  return /* @__PURE__ */ $(ce.Provider, { value: O, children: /* @__PURE__ */ $("div", { className: Te("root", l), ...o, children: i }) });
};
X.PrevButton = Ie;
X.NextButton = ye;
X.Slides = Ce;
X.displayName = "Swiper";
export {
  X as Swiper,
  U as swiperClasses,
  Be as useSwiper,
  te as useSwiperContext
};