welcome-ui/dist/Swiper.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as T } from "./jsx-runtime-Bqq1Hxg9.mjs";
import B, { system as lt, css as j, th as it, useTheme as ut } from "@xstyled/styled-components";
import { c as Q, g as ft } from "./_commonjsHelpers-CXJ7dpIk.mjs";
import { useRef as ct, useEffect as X, useState as tt, useMemo as ht, Children as rt, cloneElement as gt, useCallback as Y } from "react";
import { IconsFont as ot } from "./IconsFont.mjs";
import { u as mt } from "./use-viewport-CWpjoHXy.mjs";
import { Button as pt } from "./Button.mjs";
var et, st;
function wt() {
  if (st) return et;
  st = 1;
  var i = "Expected a function", e = NaN, a = "[object Symbol]", f = /^\s+|\s+$/g, s = /^[-+]0x[0-9a-f]+$/i, d = /^0b[01]+$/i, g = /^0o[0-7]+$/i, x = parseInt, D = typeof Q == "object" && Q && Q.Object === Object && Q, P = typeof self == "object" && self && self.Object === Object && self, V = D || P || Function("return this")(), N = Object.prototype, z = N.toString, h = Math.max, H = Math.min, $ = function() {
    return V.Date.now();
  };
  function E(t, r, u) {
    var L, A, W, m, p, S, O = 0, J = !1, C = !1, G = !0;
    if (typeof t != "function")
      throw new TypeError(i);
    r = M(r) || 0, y(u) && (J = !!u.leading, C = "maxWait" in u, W = C ? h(M(u.maxWait) || 0, r) : W, G = "trailing" in u ? !!u.trailing : G);
    function K(n) {
      var b = L, I = A;
      return L = A = void 0, O = n, m = t.apply(I, b), m;
    }
    function R(n) {
      return O = n, p = setTimeout(l, r), J ? K(n) : m;
    }
    function F(n) {
      var b = n - S, I = n - O, Z = r - b;
      return C ? H(Z, W - I) : Z;
    }
    function _(n) {
      var b = n - S, I = n - O;
      return S === void 0 || b >= r || b < 0 || C && I >= W;
    }
    function l() {
      var n = $();
      if (_(n))
        return o(n);
      p = setTimeout(l, F(n));
    }
    function o(n) {
      return p = void 0, G && L ? K(n) : (L = A = void 0, m);
    }
    function c() {
      p !== void 0 && clearTimeout(p), O = 0, L = S = A = p = void 0;
    }
    function w() {
      return p === void 0 ? m : o($());
    }
    function v() {
      var n = $(), b = _(n);
      if (L = arguments, A = this, S = n, b) {
        if (p === void 0)
          return R(S);
        if (C)
          return p = setTimeout(l, r), K(S);
      }
      return p === void 0 && (p = setTimeout(l, r)), m;
    }
    return v.cancel = c, v.flush = w, v;
  }
  function y(t) {
    var r = typeof t;
    return !!t && (r == "object" || r == "function");
  }
  function U(t) {
    return !!t && typeof t == "object";
  }
  function q(t) {
    return typeof t == "symbol" || U(t) && z.call(t) == a;
  }
  function M(t) {
    if (typeof t == "number")
      return t;
    if (q(t))
      return e;
    if (y(t)) {
      var r = typeof t.valueOf == "function" ? t.valueOf() : t;
      t = y(r) ? r + "" : r;
    }
    if (typeof t != "string")
      return t === 0 ? t : +t;
    t = t.replace(f, "");
    var u = d.test(t);
    return u || g.test(t) ? x(t.slice(2), u ? 2 : 8) : s.test(t) ? e : +t;
  }
  return et = E, et;
}
var bt = wt();
const $t = /* @__PURE__ */ ft(bt), k = (i = 3, e, a) => {
  if (e === 0)
    return `${100 / i}%`;
  const s = a(e * (i === 1 ? 4 : 2));
  return `calc(${100 / i}% - ${s})`;
}, dt = B.div`
  overflow-y: hidden;
  position: relative;
  width: 100%;
  height: 100%;

  ${lt}
`, at = B(pt)(
  ({ disabled: i, withDarkUI: e, withNavigation: { desktop: a, mobile: f } }) => j`
    top: 50%;
    transform: translate3d(0, -50%, 0);
    z-index: ${f ? 1 : -1};
    display: ${f ? "flex" : "none"};

    ${!e && j`
      background-color: neutral-10 !important;

      &:hover {
        background-color: neutral-40 !important;
      }
    `}

    @media (min-width: md) {
      z-index: ${a ? 1 : -1};
      display: ${a ? "flex" : "none"};
    }

    ${i && j`
      opacity: 0;
      z-index: -1;
    `};
  `
), yt = B.divBox(
  ({ withPagination: { desktop: i, mobile: e } }) => j`
    justify-content: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: sm;

    z-index: ${e ? 1 : -1};
    display: ${e ? "flex" : "none"};

    @media (min-width: md) {
      z-index: ${i ? 1 : -1};
      display: ${i ? "flex" : "none"};
    }
  `
), vt = B.div(
  ({ active: i, withDarkUI: e }) => j`
    height: 10;
    width: 10;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 xxs;
    ${i ? it("swipers.navigation.bullet.active") : it("swipers.navigation.bullet.default")}
    ${e && j`
      background-color: ${i ? "neutral-90" : "neutral-50"};
    `}
    ${lt}
  `
), xt = B.ulBox(({ fullWidth: i, slidesPerView: { desktop: e, mobile: a, tablet: f }, spaceBetween: s, theme: d }) => j`
    scroll-snap-type: x mandatory;
    display: flex;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    margin: 0;

    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
    height: 100%;
    padding: 0;

    > [aria-roledescription='slide'][aria-hidden='true'] {
      pointer-events: none;
    }

    > * {
      list-style-type: none;
      margin-right: ${s};
      min-width: ${k(a, s, d.toRem)};
      max-width: ${k(a, s, d.toRem)};
      flex: 1;

      &:last-child {
        margin-right: 0;
      }
    }

    @media (min-width: sm) {
      ${a && j`
        > * {
          min-width: ${k(a, s, d.toRem)};
          max-width: ${k(a, s, d.toRem)};

          &:nth-of-type(${a}n + 1) {
            scroll-snap-align: start;
          }
        }
      `}
    }

    @media (min-width: md) {
      ${f && j`
        > * {
          min-width: ${k(f, s, d.toRem)};
          max-width: ${k(f, s, d.toRem)};

          &:nth-of-type(${f}n + 1) {
            scroll-snap-align: start;
          }
        }
      `}
    }

    @media (min-width: lg) {
      ${e && j`
        > * {
          min-width: ${k(e, s, d.toRem)};
          max-width: ${k(e, s, d.toRem)};

          scroll-snap-align: unset;

          &:nth-of-type(${e}n + 1) {
            scroll-snap-align: start;
          }

          &:not(:nth-of-type(${e}n + 1)) {
            scroll-snap-align: unset;
          }
        }
      `}
    }

    @media (min-width: xl) {
      ${e && i && j`
        > * {
          min-width: ${k(e + 2, s, d.toRem)};
          max-width: ${k(e + 2, s, d.toRem)};
        }
      `}
    }
  `), St = (i, e) => {
  const a = ct();
  X(() => {
    a.current = i;
  }, [i]), X(() => {
    function f() {
      a.current();
    }
    if (e !== null) {
      const s = setInterval(f, e);
      return () => clearInterval(s);
    }
  }, [e]);
}, Et = (i = {}) => {
  const {
    autoplay: e = !1,
    centeredSlides: a = !1,
    duration: f = 5e3,
    firstSlideToShow: s = 0,
    fullWidth: d = !1,
    id: g = "swiper",
    loop: x = !1,
    navigationSize: D = "md",
    slidesPerView: P = { desktop: 1, mobile: 1, tablet: 1 },
    spaceBetween: V = 20,
    withDarkUI: N = !1,
    withNavigation: z = { desktop: !0, mobile: !0 },
    withPagination: h = { desktop: !1, mobile: !1 }
  } = i, H = x || e, { width: $ } = mt(), [E, y] = tt(0), [U, q] = tt(!1), [M, t] = tt(!1), r = ct(), { screens: u } = ut(), L = ht(() => $ <= u.md ? P.mobile : $ <= u.lg ? P.tablet : $ >= u["4xl"] && d ? P.desktop + 2 : P.desktop, [d, $, u, P]);
  return {
    autoplay: e,
    centeredSlides: a,
    currentPage: E,
    currentSlidesPerView: L,
    duration: f,
    firstSlideToShow: s,
    fullWidth: d,
    id: g,
    navigationSize: D,
    ref: r,
    setCurrentPage: y,
    setShowLeftArrow: q,
    setShowRightArrow: t,
    shouldLoop: H,
    showLeftArrow: U,
    showRightArrow: M,
    slidesPerView: P,
    spaceBetween: V,
    withDarkUI: N,
    withNavigation: z,
    withPagination: h
  };
}, jt = ({ children: i, dataTestId: e, store: a, ...f }) => {
  const {
    autoplay: s,
    centeredSlides: d,
    currentPage: g,
    currentSlidesPerView: x,
    duration: D,
    firstSlideToShow: P,
    fullWidth: V,
    id: N,
    navigationSize: z,
    ref: h,
    setCurrentPage: H,
    setShowLeftArrow: $,
    setShowRightArrow: E,
    shouldLoop: y,
    showLeftArrow: U,
    showRightArrow: q,
    slidesPerView: M,
    spaceBetween: t,
    withDarkUI: r,
    withNavigation: u,
    withPagination: L
  } = a, A = rt.toArray(i).length, W = Math.ceil(A / x), m = Array.from(Array(W).keys()), p = g === 0, S = g === m.length - 1, O = rt.map(i, (l, o) => {
    const c = `${N}-${o}`, w = o + 1, v = Math.ceil(w / x) - 1, n = S ? A - w >= x : v !== g;
    return gt(l, {
      ...l.props,
      "aria-hidden": n,
      "aria-label": `${w} of ${A}`,
      "aria-roledescription": "slide",
      id: c,
      key: c
    });
  }), J = d ? (
    // if centeredSlides is true, we calculate which number is the middle page
    Math.floor(W / 2)
  ) : (
    // if centeredSlides is false, we calculate on which page the number in firstSlideToShow props is
    Math.ceil(P / x) - 1
  ), C = Y(() => {
    const l = h == null ? void 0 : h.current;
    if (l && !y) {
      const { offsetWidth: o, scrollLeft: c, scrollWidth: w } = l, v = !(c > t), n = !(w - (c + o) > t);
      $(!v), E(!n);
    } else
      $(!0), E(!0);
  }, [h, $, E, y, t]), G = () => {
    var o, c;
    const l = h == null ? void 0 : h.current;
    if (l) {
      const { children: w, offsetWidth: v, scrollLeft: n, scrollWidth: b } = l, I = (c = (o = w == null ? void 0 : w[0]) == null ? void 0 : o.getBoundingClientRect()) == null ? void 0 : c.width, nt = !(b - (n + v) > t) ? m.length - 1 : Math.round(n / ((I + t) * x));
      nt !== g && H(nt);
    }
  }, K = $t(() => {
    C(), G();
  }, 100), R = Y(
    (l, o = !1) => {
      var v, n, b;
      const c = h == null ? void 0 : h.current, w = (b = (n = (v = c == null ? void 0 : c.children) == null ? void 0 : v[0]) == null ? void 0 : n.getBoundingClientRect()) == null ? void 0 : b.width;
      c == null || c.scrollTo({
        // We don't want to have a scroll effect when we first render the swiper
        behavior: o ? "auto" : "smooth",
        left: l * (w + t) * x,
        top: 0
      });
    },
    [x, t, h]
  ), F = Y(() => {
    R(y && S ? 0 : g + 1);
  }, [g, R, S, y]), _ = Y(() => {
    R(p && y ? m.length - 1 : g - 1);
  }, [m.length, g, R, p, y]);
  return St(
    () => {
      s && F();
    },
    s ? D : null
  ), X(() => {
    const l = (o) => {
      o.code === "ArrowLeft" && _(), o.code === "ArrowRight" && F();
    };
    return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
  }, [_, F]), X(() => {
    R(J, !0);
  }, []), X(() => {
    C();
  }, [C, i]), /* @__PURE__ */ T.jsxs(dt, { "data-testid": e, ...f, children: [
    /* @__PURE__ */ T.jsx(
      xt,
      {
        fullWidth: V,
        onScroll: K,
        ref: h,
        slidesPerView: M,
        spaceBetween: t,
        children: O
      }
    ),
    /* @__PURE__ */ T.jsx(
      at,
      {
        "aria-label": "Previous slide",
        "data-testid": e ? `${e}-prev-button` : null,
        disabled: !U,
        left: 10,
        onClick: _,
        position: "absolute",
        shape: "circle",
        size: z,
        variant: r ? "secondary" : "ghost",
        withDarkUI: r,
        withNavigation: u,
        children: /* @__PURE__ */ T.jsx(ot.Left, {})
      }
    ),
    /* @__PURE__ */ T.jsx(
      at,
      {
        "aria-label": "Next slide",
        "data-testid": e ? `${e}-next-button` : null,
        disabled: !q,
        onClick: F,
        position: "absolute",
        right: 10,
        shape: "circle",
        size: z,
        variant: r ? "secondary" : "ghost",
        withDarkUI: r,
        withNavigation: u,
        children: /* @__PURE__ */ T.jsx(ot.Right, {})
      }
    ),
    /* @__PURE__ */ T.jsx(
      yt,
      {
        className: "swiper-pagination",
        "data-testid": e ? `${e}-pagination` : null,
        role: "tablist",
        withPagination: L,
        children: m.length > 1 && m.map((l, o) => {
          const c = {
            "aria-controls": `${N}-${o}`,
            "aria-label": `${o + 1} of ${m.length}`,
            "aria-selected": o === g,
            idx: o,
            onClick: () => R(o),
            role: "tab"
          };
          return /* @__PURE__ */ T.jsx(
            vt,
            {
              active: o === g,
              withDarkUI: r,
              ...c
            },
            `bullet-${o + 1}`
          );
        })
      }
    )
  ] });
};
jt.displayName = "Swiper";
const Wt = dt;
export {
  Wt as StyledSwiper,
  jt as Swiper,
  Et as useSwiper
};