@athbnb/ui 0.0.2 → 0.0.3

package/dist/ui/Slider.js

@@ -0,0 +1,232 @@
+import { c as e } from "react/compiler-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import * as r from "react";
+//#region src/ui/Slider.tsx
+var i = 768, a = 1024;
+function o() {
+	let t = e(2), [n, o] = r.useState(3), s, c;
+	return t[0] === Symbol.for("react.memo_cache_sentinel") ? (s = () => {
+		let e = () => {
+			let e = window.innerWidth;
+			o(e < i ? 1 : e < a ? 2 : 3);
+		};
+		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, c = [], t[0] = s, t[1] = c) : (s = t[0], c = t[1]), r.useEffect(s, c), n;
+}
+function s(e) {
+	return e === 1 ? "100vw" : e === 2 ? "50vw" : "33.3333vw";
+}
+function c(n) {
+	let i = e(40), { children: a, className: c, autoPlay: l, intervalMs: u } = n, d = c === void 0 ? "" : c, f = l === void 0 ? !0 : l, p = u === void 0 ? 4e3 : u, m = o(), [h, g] = r.useState(0), [_, v] = r.useState(f), [y, b] = r.useState(0), [x, S] = r.useState(0), C, w;
+	i[0] === f ? (C = i[1], w = i[2]) : (C = () => {
+		v(f);
+	}, w = [f], i[0] = f, i[1] = C, i[2] = w), r.useEffect(C, w);
+	let T = r.Children.toArray(a).filter(r.isValidElement), E = T.length, D = Math.max(0, E - m), O = s(m), k, A;
+	i[3] !== h || i[4] !== D ? (k = () => {
+		h > D && g(0);
+	}, A = [h, D], i[3] = h, i[4] = D, i[5] = k, i[6] = A) : (k = i[5], A = i[6]), r.useEffect(k, A), r.useEffect(() => {
+		if (!_ || T.length === 0 || D === 0) return;
+		let e = window.setInterval(() => {
+			g((e) => {
+				let t = e + 1;
+				return t > D ? 0 : t;
+			});
+		}, p);
+		return () => window.clearInterval(e);
+	}, [
+		_,
+		D,
+		T.length,
+		p
+	]);
+	let j;
+	i[7] === D ? j = i[8] : (j = () => {
+		g((e) => {
+			let t = e + 1;
+			return t > D ? 0 : t;
+		});
+	}, i[7] = D, i[8] = j);
+	let M = j, N;
+	i[9] === D ? N = i[10] : (N = () => {
+		g((e) => {
+			let t = e - 1;
+			return t < 0 ? D : t;
+		});
+	}, i[9] = D, i[10] = N);
+	let P = N, F;
+	i[11] === Symbol.for("react.memo_cache_sentinel") ? (F = (e) => {
+		b(e.targetTouches[0].clientX), v(!1);
+	}, i[11] = F) : F = i[11];
+	let I = F, L;
+	i[12] === Symbol.for("react.memo_cache_sentinel") ? (L = (e) => {
+		S(e.targetTouches[0].clientX);
+	}, i[12] = L) : L = i[12];
+	let R = L, z;
+	i[13] !== f || i[14] !== M || i[15] !== P || i[16] !== x || i[17] !== y ? (z = () => {
+		if (!y || !x) return;
+		let e = y - x;
+		e > 50 && M(), e < -50 && P(), b(0), S(0), window.setTimeout(() => v(f), 1e3);
+	}, i[13] = f, i[14] = M, i[15] = P, i[16] = x, i[17] = y, i[18] = z) : z = i[18];
+	let B = z, V;
+	i[19] !== f || i[20] !== M || i[21] !== P ? (V = (e) => {
+		let t = e.currentTarget.getBoundingClientRect(), n = e.clientX - t.left;
+		v(!1), n < t.width / 2 ? P() : M(), window.setTimeout(() => v(f), 1e3);
+	}, i[19] = f, i[20] = M, i[21] = P, i[22] = V) : V = i[22];
+	let H = V;
+	if (E === 0) return null;
+	if (E <= m) {
+		let e = `relative w-full py-16 md:py-[4.5rem] justify-center items-center overflow-hidden flex gap-8 ${d}`, n;
+		return i[23] === e ? n = i[24] : (n = e.trim(), i[23] = e, i[24] = n), /* @__PURE__ */ t("div", {
+			className: n,
+			children: /* @__PURE__ */ t("div", {
+				className: "flex w-full",
+				children: T.map((e, t) => r.cloneElement(e, {
+					key: t,
+					className: ["shrink-0", e.props.className].filter(Boolean).join(" "),
+					style: {
+						...e.props.style ?? {},
+						width: O,
+						minWidth: O
+					}
+				}))
+			})
+		});
+	}
+	let U = `relative w-full py-16 md:py-[4.5rem] justify-center items-center overflow-hidden cursor-pointer ${d}`, W;
+	i[25] === U ? W = i[26] : (W = U.trim(), i[25] = U, i[26] = W);
+	let G = `translateX(-${100 / m * h}vw)`, K = `${T.length * 100 / m}vw`, q;
+	i[27] !== G || i[28] !== K ? (q = {
+		transform: G,
+		width: K
+	}, i[27] = G, i[28] = K, i[29] = q) : q = i[29];
+	let J = T.map((e, t) => r.cloneElement(e, {
+		key: t,
+		className: ["shrink-0", e.props.className].filter(Boolean).join(" "),
+		style: {
+			...e.props.style ?? {},
+			width: O,
+			minWidth: O
+		}
+	})), Y;
+	i[30] !== q || i[31] !== J ? (Y = /* @__PURE__ */ t("div", {
+		className: "flex transition-transform duration-500 ease-in-out",
+		style: q,
+		children: J
+	}), i[30] = q, i[31] = J, i[32] = Y) : Y = i[32];
+	let X;
+	return i[33] !== H || i[34] !== B || i[35] !== R || i[36] !== I || i[37] !== W || i[38] !== Y ? (X = /* @__PURE__ */ t("div", {
+		className: W,
+		onClick: H,
+		onTouchStart: I,
+		onTouchMove: R,
+		onTouchEnd: B,
+		role: "region",
+		"aria-roledescription": "carousel",
+		children: Y
+	}), i[33] = H, i[34] = B, i[35] = R, i[36] = I, i[37] = W, i[38] = Y, i[39] = X) : X = i[39], X;
+}
+var l = 1024;
+function u(t) {
+	let n = e(3), [i, a] = r.useState(typeof window < "u" ? window.innerWidth < t : !0), o, s;
+	return n[0] === t ? (o = n[1], s = n[2]) : (o = () => {
+		let e = () => a(window.innerWidth < t);
+		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, s = [t], n[0] = t, n[1] = o, n[2] = s), r.useEffect(o, s), i;
+}
+function d(i) {
+	let a = e(36), { slides: o, className: s } = i, c = s === void 0 ? "" : s, d = r.useRef(null), f = u(l), [p, m] = r.useState(0), h;
+	a[0] === f ? h = a[1] : (h = () => {
+		if (!f || !d.current) return;
+		let e = d.current.scrollLeft, t = d.current.clientWidth;
+		m(Math.round(e / t));
+	}, a[0] = f, a[1] = h);
+	let g = h, _ = r.useRef(!1), v = r.useRef(0), y = r.useRef(0), b;
+	a[2] === f ? b = a[3] : (b = (e) => {
+		!f || !d.current || (_.current = !0, d.current.classList.add("cursor-grabbing"), v.current = e.pageX - d.current.offsetLeft, y.current = d.current.scrollLeft);
+	}, a[2] = f, a[3] = b);
+	let x = b, S;
+	a[4] === Symbol.for("react.memo_cache_sentinel") ? (S = () => {
+		_.current = !1, d.current?.classList.remove("cursor-grabbing");
+	}, a[4] = S) : S = a[4];
+	let C = S, w;
+	a[5] === f ? w = a[6] : (w = (e) => {
+		if (!f || !_.current || !d.current) return;
+		e.preventDefault();
+		let t = (e.pageX - d.current.offsetLeft - v.current) * 1.2;
+		d.current.scrollLeft = y.current - t;
+	}, a[5] = f, a[6] = w);
+	let T = w, E;
+	a[7] === c ? E = a[8] : (E = ["w-full", c].filter(Boolean), a[7] = c, a[8] = E);
+	let D = E.join(" "), O = f ? "cursor-grab" : "", k;
+	a[9] === O ? k = a[10] : (k = ["w-full overflow-x-auto no-scrollbar px-4 select-none", O].filter(Boolean), a[9] = O, a[10] = k);
+	let A = k.join(" "), j = f ? "x mandatory" : "none", M;
+	a[11] === j ? M = a[12] : (M = {
+		WebkitOverflowScrolling: "touch",
+		scrollSnapType: j,
+		scrollBehavior: "smooth"
+	}, a[11] = j, a[12] = M);
+	let N = f ? "flex transition-all duration-300" : "flex justify-center flex-wrap gap-6 transition-all duration-300", P;
+	if (a[13] !== f || a[14] !== o) {
+		let e;
+		a[16] === f ? e = a[17] : (e = (e, r) => /* @__PURE__ */ n("div", {
+			className: "shrink-0 rounded-2xl flex flex-col items-center pe-4 sm:pe-6",
+			style: {
+				width: f ? "100%" : "30%",
+				minWidth: f ? "100%" : "280px",
+				maxWidth: f ? "100%" : "450px",
+				height: "auto",
+				scrollSnapAlign: f ? "center" : "none"
+			},
+			children: [
+				/* @__PURE__ */ t("img", {
+					src: e.image,
+					alt: typeof e.imageAlt == "string" ? e.imageAlt : typeof e.title == "string" ? e.title : "Slide",
+					className: "rounded-xl w-full h-[180px] xs:h-[220px] sm:h-[260px] md:h-[300px] object-cover mb-3 sm:mb-4",
+					draggable: !1
+				}),
+				/* @__PURE__ */ t("div", {
+					className: "font-bold text-primary title-text mb-1 sm:mb-2 text-center px-2",
+					children: e.title
+				}),
+				/* @__PURE__ */ t("div", {
+					className: "text-secondary paragraph-text text-center px-2 pb-2",
+					children: e.description
+				})
+			]
+		}, r), a[16] = f, a[17] = e), P = o.map(e), a[13] = f, a[14] = o, a[15] = P;
+	} else P = a[15];
+	let F;
+	a[18] !== N || a[19] !== P ? (F = /* @__PURE__ */ t("div", {
+		className: N,
+		children: P
+	}), a[18] = N, a[19] = P, a[20] = F) : F = a[20];
+	let I;
+	a[21] !== x || a[22] !== T || a[23] !== g || a[24] !== A || a[25] !== M || a[26] !== F ? (I = /* @__PURE__ */ t("div", {
+		ref: d,
+		className: A,
+		style: M,
+		onScroll: g,
+		onMouseDown: x,
+		onMouseLeave: C,
+		onMouseUp: C,
+		onMouseMove: T,
+		children: F
+	}), a[21] = x, a[22] = T, a[23] = g, a[24] = A, a[25] = M, a[26] = F, a[27] = I) : I = a[27];
+	let L;
+	a[28] !== p || a[29] !== f || a[30] !== o ? (L = f ? /* @__PURE__ */ t("div", {
+		className: "flex justify-center mt-3",
+		role: "tablist",
+		"aria-label": "Slides",
+		children: o.map((e, n) => /* @__PURE__ */ t("div", {
+			role: "presentation",
+			className: ["h-2 w-2 mx-1 rounded-full transition-all duration-300", p === n ? "bg-primary scale-125" : "bg-gray-400"].join(" ")
+		}, n))
+	}) : null, a[28] = p, a[29] = f, a[30] = o, a[31] = L) : L = a[31];
+	let R;
+	return a[32] !== I || a[33] !== L || a[34] !== D ? (R = /* @__PURE__ */ n("div", {
+		className: D,
+		children: [I, L]
+	}), a[32] = I, a[33] = L, a[34] = D, a[35] = R) : R = a[35], R;
+}
+//#endregion
+export { c as Slider, d as SliderCards };

package/dist/ui/Tabs.js

@@ -0,0 +1,70 @@
+import { c as e } from "react/compiler-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/ui/Tabs.tsx
+function r(e, n) {
+	return e ? /* @__PURE__ */ t(e, { className: n }) : null;
+}
+function i(i) {
+	let a = e(30), { items: o, activeId: s, onActiveIdChange: c, className: l, desktopNavClassName: u, mobileScrollClassName: d } = i, f = l === void 0 ? "" : l, p = u === void 0 ? "" : u, m = d === void 0 ? "" : d;
+	if (!o.length) return null;
+	let h;
+	a[0] === f ? h = a[1] : (h = f.trim() || void 0, a[0] = f, a[1] = h);
+	let g = `hidden lg:block space-y-1 ${p}`, _;
+	a[2] === g ? _ = a[3] : (_ = g.trim(), a[2] = g, a[3] = _);
+	let v;
+	if (a[4] !== s || a[5] !== o || a[6] !== c) {
+		let e;
+		a[8] !== s || a[9] !== c ? (e = (e) => {
+			let i = e.id === s;
+			return /* @__PURE__ */ n("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": i,
+				onClick: () => c(e.id),
+				className: "flex w-full cursor-pointer items-center gap-3 py-3 title-text",
+				children: [r(e.icon, "h-6 w-6 shrink-0 fill-primary text-primary"), /* @__PURE__ */ t("span", {
+					className: i ? "font-bold text-secondary" : "font-semibold text-secondary/80",
+					children: e.label
+				})]
+			}, e.id);
+		}, a[8] = s, a[9] = c, a[10] = e) : e = a[10], v = o.map(e), a[4] = s, a[5] = o, a[6] = c, a[7] = v;
+	} else v = a[7];
+	let y;
+	a[11] !== _ || a[12] !== v ? (y = /* @__PURE__ */ t("nav", {
+		className: _,
+		role: "tablist",
+		"aria-orientation": "vertical",
+		children: v
+	}), a[11] = _, a[12] = v, a[13] = y) : y = a[13];
+	let b = `flex gap-2 overflow-x-auto pb-2 no-scrollbar lg:hidden ${m}`, x;
+	a[14] === b ? x = a[15] : (x = b.trim(), a[14] = b, a[15] = x);
+	let S;
+	if (a[16] !== s || a[17] !== o || a[18] !== c) {
+		let e;
+		a[20] !== s || a[21] !== c ? (e = (e) => {
+			let t = e.id === s;
+			return /* @__PURE__ */ n("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": t,
+				onClick: () => c(e.id),
+				className: `title-text flex shrink-0 items-center gap-1 rounded-lg px-3 py-2 whitespace-nowrap ${t ? "bg-primary text-white" : "border border-primary text-secondary"}`.trim(),
+				children: [r(e.icon, t ? "h-4 w-4 shrink-0 fill-white text-white" : "h-4 w-4 shrink-0 fill-primary text-primary"), e.label]
+			}, e.id);
+		}, a[20] = s, a[21] = c, a[22] = e) : e = a[22], S = o.map(e), a[16] = s, a[17] = o, a[18] = c, a[19] = S;
+	} else S = a[19];
+	let C;
+	a[23] !== x || a[24] !== S ? (C = /* @__PURE__ */ t("div", {
+		className: x,
+		role: "tablist",
+		"aria-orientation": "horizontal",
+		children: S
+	}), a[23] = x, a[24] = S, a[25] = C) : C = a[25];
+	let w;
+	return a[26] !== C || a[27] !== h || a[28] !== y ? (w = /* @__PURE__ */ n("div", {
+		className: h,
+		children: [y, C]
+	}), a[26] = C, a[27] = h, a[28] = y, a[29] = w) : w = a[29], w;
+}
+//#endregion
+export { i as Tabs };