welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
365 lines (364 loc) • 11.4 kB
JavaScript
"use client";
import { jsxs as ae, jsx as R } from "react/jsx-runtime";
import { a as K, g as le, c as ce } from "./index-PAaZGbyz.js";
import { useRef as ie, useEffect as H, useState as Z, useMemo as de, Children as oe, cloneElement as ue, useCallback as X } from "react";
import { Button as re } from "./Button.js";
import "./Icon-BisRi8B3.js";
import { L as fe } from "./index-CWVOLBDY.js";
import { R as pe } from "./index-Dcq5gh3E.js";
import { u as he } from "./use-viewport-CgrficYB.js";
var ee, ne;
function be() {
if (ne) return ee;
ne = 1;
var i = "Expected a function", s = NaN, f = "[object Symbol]", m = /^\s+|\s+$/g, P = /^[-+]0x[0-9a-f]+$/i, j = /^0b[01]+$/i, h = /^0o[0-7]+$/i, k = parseInt, F = typeof K == "object" && K && K.Object === Object && K, y = typeof self == "object" && self && self.Object === Object && self, z = F || y || Function("return this")(), E = Object.prototype, M = E.toString, c = Math.max, V = Math.min, w = function() {
return z.Date.now();
};
function N(e, o, a) {
var v, x, W, b, g, $, T = 0, O = !1, I = !1, G = !0;
if (typeof e != "function")
throw new TypeError(i);
o = d(o) || 0, _(a) && (O = !!a.leading, I = "maxWait" in a, W = I ? c(d(a.maxWait) || 0, o) : W, G = "trailing" in a ? !!a.trailing : G);
function A(t) {
var l = v, p = x;
return v = x = void 0, T = t, b = e.apply(p, l), b;
}
function Q(t) {
return T = t, g = setTimeout(L, o), O ? A(t) : b;
}
function Y(t) {
var l = t - $, p = t - T, C = o - l;
return I ? V(C, W - p) : C;
}
function S(t) {
var l = t - $, p = t - T;
return $ === void 0 || l >= o || l < 0 || I && p >= W;
}
function L() {
var t = w();
if (S(t))
return B(t);
g = setTimeout(L, Y(t));
}
function B(t) {
return g = void 0, G && v ? A(t) : (v = x = void 0, b);
}
function u() {
g !== void 0 && clearTimeout(g), T = 0, v = $ = x = g = void 0;
}
function r() {
return g === void 0 ? b : B(w());
}
function n() {
var t = w(), l = S(t);
if (v = arguments, x = this, $ = t, l) {
if (g === void 0)
return Q($);
if (I)
return g = setTimeout(L, o), A($);
}
return g === void 0 && (g = setTimeout(L, o)), b;
}
return n.cancel = u, n.flush = r, n;
}
function _(e) {
var o = typeof e;
return !!e && (o == "object" || o == "function");
}
function U(e) {
return !!e && typeof e == "object";
}
function q(e) {
return typeof e == "symbol" || U(e) && M.call(e) == f;
}
function d(e) {
if (typeof e == "number")
return e;
if (q(e))
return s;
if (_(e)) {
var o = typeof e.valueOf == "function" ? e.valueOf() : e;
e = _(o) ? o + "" : o;
}
if (typeof e != "string")
return e === 0 ? e : +e;
e = e.replace(m, "");
var a = j.test(e);
return a || h.test(e) ? k(e.slice(2), a ? 2 : 8) : P.test(e) ? s : +e;
}
return ee = N, ee;
}
var ge = be();
const me = /* @__PURE__ */ le(ge), we = { $type: "dimension", "2xl": { $value: "1440px" }, "3xl": { $value: "1620px" }, "4xl": { $value: "1920px" }, lg: { $value: "980px" }, md: { $value: "736px" }, sm: { $value: "480px" }, xl: { $value: "1280px" }, xs: { $value: "0px" } }, _e = {
breakpoint: we
};
function ke() {
return Object.entries(_e.breakpoint).reduce((i, [s, f]) => {
if (s !== "$type" && typeof f == "object" && "$value" in f) {
const m = typeof f.$value == "string" ? Number(f.$value.replace("px", "")) : f.$value;
isNaN(m) || (i[s] = m);
}
return i;
}, {});
}
const ve = "_root_136s1_3", Se = "_dark_136s1_9", ye = "_bullet_136s1_9", $e = "_container_136s1_15", xe = "_arrow_136s1_80", Le = "_pagination_136s1_117", Pe = {
root: ve,
dark: Se,
bullet: ye,
"bullet-active": "_bullet-active_136s1_12",
container: $e,
"container-mobile": "_container-mobile_136s1_44",
"container-tablet": "_container-tablet_136s1_53",
"container-desktop": "_container-desktop_136s1_62",
"container-full-width": "_container-full-width_136s1_75",
arrow: xe,
"arrow-left": "_arrow-left_136s1_91",
"arrow-right": "_arrow-right_136s1_94",
"arrow-mobile": "_arrow-mobile_136s1_97",
"arrow-desktop": "_arrow-desktop_136s1_106",
"arrow-background": "_arrow-background_136s1_111",
pagination: Le,
"pagination-mobile": "_pagination-mobile_136s1_126",
"pagination-desktop": "_pagination-desktop_136s1_135"
}, Te = (i, s) => {
const f = ie();
H(() => {
f.current = i;
}, [i]), H(() => {
function m() {
f.current();
}
if (s !== null) {
const P = setInterval(m, s);
return () => clearInterval(P);
}
}, [s]);
}, J = (i, s) => {
if (s === 0)
return `${100 / i}%`;
const m = s * (i === 1 ? 4 : 2) / 16;
return `calc(${100 / i}% - ${m}rem)`;
}, D = ce(Pe), Oe = (i = {}) => {
const {
autoplay: s = !1,
centeredSlides: f = !1,
duration: m = 5e3,
firstSlideToShow: P = 0,
fullWidth: j = !1,
id: h = "swiper",
loop: k = !1,
navigationSize: F = "md",
slidesPerView: y = { desktop: 1, mobile: 1, tablet: 1 },
spaceBetween: z = 20,
withDarkUI: E = !1,
withNavigation: M = { desktop: !0, mobile: !0 },
withPagination: c = { desktop: !1, mobile: !1 }
} = i, V = k || s, { width: w } = he(), [N, _] = Z(0), [U, q] = Z(!1), [d, e] = Z(!1), o = ie(), a = ke(), v = de(() => w <= a.md ? y.mobile : w <= a.lg ? y.tablet : w >= a["4xl"] && j ? y.desktop + 2 : y.desktop, [w, a, j, y]);
return {
autoplay: s,
centeredSlides: f,
currentPage: N,
currentSlidesPerView: v,
duration: m,
firstSlideToShow: P,
fullWidth: j,
id: h,
navigationSize: F,
ref: o,
setCurrentPage: _,
setShowLeftArrow: q,
setShowRightArrow: e,
shouldLoop: V,
showLeftArrow: U,
showRightArrow: d,
slidesPerView: y,
spaceBetween: z,
withDarkUI: E,
withNavigation: M,
withPagination: c
};
}, Be = ({ children: i, className: s, store: f, ...m }) => {
const {
autoplay: P,
centeredSlides: j,
currentPage: h,
currentSlidesPerView: k,
duration: F,
firstSlideToShow: y,
fullWidth: z,
id: E,
navigationSize: M,
ref: c,
setCurrentPage: V,
setShowLeftArrow: w,
setShowRightArrow: N,
shouldLoop: _,
showLeftArrow: U,
showRightArrow: q,
slidesPerView: d,
spaceBetween: e,
withDarkUI: o,
withNavigation: a,
withPagination: v
} = f, x = oe.toArray(i).length, W = Math.ceil(x / k), b = Array.from(Array(W).keys()), g = a.mobile || !1, $ = a.desktop || !1, T = h === 0, O = h === b.length - 1, I = oe.map(i, (u, r) => {
const n = `${E}-${r}`, t = r + 1, l = Math.ceil(t / k) - 1, p = O ? x - t >= k : l !== h;
return ue(u, {
...u.props,
"aria-hidden": p,
"aria-label": `${t} of ${x}`,
"aria-roledescription": "slide",
id: n,
key: n
});
}), G = j ? (
// 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(y / k) - 1
), A = X(() => {
const u = c == null ? void 0 : c.current;
if (u && !_) {
const { offsetWidth: r, scrollLeft: n, scrollWidth: t } = u, l = !(n > e), p = !(t - (n + r) > e);
w(!l), N(!p);
} else
w(!0), N(!0);
}, [c, w, N, _, e]), Q = () => {
var r, n;
const u = c == null ? void 0 : c.current;
if (u) {
const { children: t, offsetWidth: l, scrollLeft: p, scrollWidth: C } = u, se = (n = (r = t == null ? void 0 : t[0]) == null ? void 0 : r.getBoundingClientRect()) == null ? void 0 : n.width, te = !(C - (p + l) > e) ? b.length - 1 : Math.round(p / ((se + e) * k));
te !== h && V(te);
}
}, Y = me(() => {
A(), Q();
}, 100), S = X(
(u, r = !1) => {
var l, p, C;
const n = c == null ? void 0 : c.current, t = (C = (p = (l = n == null ? void 0 : n.children) == null ? void 0 : l[0]) == null ? void 0 : p.getBoundingClientRect()) == null ? void 0 : C.width;
n == null || n.scrollTo({
// We don't want to have a scroll effect when we first render the swiper
behavior: r ? "auto" : "smooth",
left: u * (t + e) * k,
top: 0
});
},
[k, e, c]
), L = X(() => {
S(_ && O ? 0 : h + 1);
}, [h, S, O, _]), B = X(() => {
S(T && _ ? b.length - 1 : h - 1);
}, [b.length, h, S, T, _]);
return Te(
() => {
P && L();
},
P ? F : null
), H(() => {
const u = (r) => {
r.code === "ArrowLeft" && B(), r.code === "ArrowRight" && L();
};
return window.addEventListener("keydown", u), () => window.removeEventListener("keydown", u);
}, [B, L]), H(() => {
S(G, !0);
}, []), H(() => {
A();
}, [A, i]), /* @__PURE__ */ ae("div", { className: D("root", o && "dark", s), ...m, children: [
/* @__PURE__ */ R(
"ul",
{
className: D(
"container",
d.mobile && "container-mobile",
d.desktop && "container-desktop",
d.tablet && "container-tablet",
d.desktop && z && "container-full-width"
),
onScroll: Y,
ref: c,
style: {
"--slideDesktop": d.desktop,
"--slideMobile": d.mobile,
"--slideTablet": d.tablet,
"--slideWidthDesktop": J(d.desktop, e),
"--slideWidthMobile": J(d.mobile, e),
"--slideWidthTablet": J(d.tablet, e),
"--slideWithDesktopFullWidth": J(d.desktop + 2, e),
"--spaceBetween": `${e / 16}rem`
},
children: I
}
),
/* @__PURE__ */ R(
re,
{
"aria-label": "Previous slide",
className: D(
"arrow",
"arrow-left",
!o && "arrow-background",
g && "arrow-mobile",
$ && "arrow-desktop"
),
disabled: !U,
onClick: B,
shape: "circle",
size: M,
variant: o ? "secondary" : "ghost",
children: /* @__PURE__ */ R(fe, {})
}
),
/* @__PURE__ */ R(
re,
{
"aria-label": "Next slide",
className: D(
"arrow",
"arrow-right",
!o && "arrow-background",
g && "arrow-mobile",
$ && "arrow-desktop"
),
disabled: !q,
onClick: L,
shape: "circle",
size: M,
variant: o ? "secondary" : "ghost",
children: /* @__PURE__ */ R(pe, {})
}
),
/* @__PURE__ */ R(
"div",
{
className: D(
"pagination",
v.mobile && "pagination-mobile",
v.desktop && "pagination-desktop"
),
role: "tablist",
children: b.length > 1 && b.map((u, r) => {
const n = {
"aria-controls": `${E}-${r}`,
"aria-label": `${r + 1} of ${b.length}`,
"aria-selected": r === h,
idx: r,
onClick: () => S(r),
role: "tab"
};
return /* @__PURE__ */ R(
"div",
{
className: D("bullet", r === h && "bullet-active"),
...n
},
`bullet-${r + 1}`
);
})
}
)
] });
};
export {
Be as Swiper,
Oe as useSwiper
};