haze-ui 1.33.0 → 1.34.0

package/dist/components/Card/Card.js

@@ -3,21 +3,23 @@ import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
 import { jsx as t } from "react/jsx-runtime";
 //#region src/lib/components/Card/Card.tsx
-var n = "haze-Card__base", r = {
+var n = "haze-Card__base", r = "haze-Card__anchorShape", i = {
 	elevated: "haze-Card__elevated",
 	outlined: "haze-Card__outlined",
 	filled: "haze-Card__filled"
 };
-function i({ variant: i = "elevated", className: a, children: o }) {
-	return /* @__PURE__ */ t("div", {
+function a({ variant: a = "elevated", as: o, className: s, children: c, ...l }) {
+	return /* @__PURE__ */ t(o ?? "div", {
 		"data-slot": "card",
+		...l,
 		className: e([
 			n,
-			r[i],
-			a
+			i[a],
+			o !== void 0 && r,
+			s
 		]),
-		children: o
+		children: c
 	});
 }
 //#endregion
-export { i as default };
+export { a as default, i as variants };

package/dist/components/Card/index.js

@@ -1,2 +1,2 @@
-import e from "./Card.js";
-export { e as Card };
+import e, { variants as t } from "./Card.js";
+export { e as Card, t as cardVariants };

package/dist/components/Carousel/Carousel.js

@@ -5,187 +5,204 @@ import { getDirection as t } from "../../utils/direction.js";
 import { formatString as n } from "../LocaleProvider/locale.js";
 import { useStrings as r } from "../LocaleProvider/useStrings.js";
 /* empty css                   */
-import { Children as i, cloneElement as a, isValidElement as o, useCallback as s, useEffect as c, useRef as l } from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Children as i, cloneElement as a, isValidElement as o, useCallback as s, useEffect as c, useImperativeHandle as l, useRef as u } from "react";
+import { Fragment as ee, jsx as d, jsxs as f } from "react/jsx-runtime";
 import { useControl as p } from "react-use-control";
 //#region src/lib/components/Carousel/Carousel.tsx
-var m = 4, h = .25, g = () => void 0, ee = "haze-Carousel__wrapper", _ = "haze-Carousel__track", v = "haze-Carousel__fadeTrack", y = "haze-Carousel__navBtn", b = "haze-Carousel__prevBtn", te = "haze-Carousel__nextBtn", x = "haze-Carousel__indicators", S = "haze-Carousel__dot", C = "haze-Carousel__dotActive";
-function w({ value: w, autoPlay: T = !1, interval: E = 5e3, effect: ne = "slide", pauseOnHover: D = !1, className: O, children: k }) {
-	let [A, j] = p(w, 0), M = l(null), N = l(null), P = i.count(k), F = r("carousel"), I = ne === "fade";
+var m = 4, te = .25, h = () => void 0, g = "haze-Carousel__wrapper", _ = "haze-Carousel__track", ne = "haze-Carousel__fadeTrack", v = "haze-Carousel__navBtn", y = "haze-Carousel__prevBtn", b = "haze-Carousel__nextBtn", x = "haze-Carousel__indicators", S = "haze-Carousel__dot", re = "haze-Carousel__dotActive";
+function C({ value: C, autoPlay: w = !1, interval: T = 5e3, effect: E = "slide", pauseOnHover: D = !1, className: O, children: k, ref: A }) {
+	let [j, M] = p(C, 0), N = u(null), P = u(null), F = i.count(k), I = r("carousel"), L = E === "fade";
 	c(() => {
-		if (I) return;
-		let e = M.current;
+		if (L) return;
+		let e = N.current;
 		if (!e) return;
-		let t = e.children[A];
+		let t = e.children[j];
 		t && t.scrollIntoView({
 			behavior: "smooth",
 			block: "nearest",
 			inline: "start"
 		});
-	}, [A, I]);
-	let L = () => j((e) => (e - 1 + P) % P), R = () => j((e) => (e + 1) % P), z = l(null), B = l(0), V = l(0), H = l(!1), U = l(!1), W = l(!1), G = l(!1), K = l(g), q = l(g);
+	}, [j, L]);
+	let R = s(() => M((e) => (e - 1 + F) % F), [F, M]), z = s(() => M((e) => (e + 1) % F), [F, M]);
+	l(A, () => ({
+		next: () => {
+			F !== 0 && z();
+		},
+		prev: () => {
+			F !== 0 && R();
+		},
+		scrollTo: (e) => {
+			F !== 0 && M(Math.max(0, Math.min(F - 1, Math.floor(e))));
+		}
+	}), [
+		z,
+		R,
+		F,
+		M
+	]);
+	let B = u(null), V = u(0), H = u(0), U = u(!1), W = u(!1), G = u(!1), K = u(!1), q = u(h), J = u(h);
 	c(() => {
-		if (!T || P <= 1) {
-			K.current = g, q.current = g;
+		if (!w || F <= 1) {
+			q.current = h, J.current = h;
 			return;
 		}
-		let e = () => j((e) => (e + 1) % P), t = () => {
-			B.current = Date.now(), z.current = setTimeout(() => {
-				z.current = null, e(), V.current = E, H.current || t();
-			}, V.current);
+		let e = () => M((e) => (e + 1) % F), t = () => {
+			V.current = Date.now(), B.current = setTimeout(() => {
+				B.current = null, e(), H.current = T, U.current || t();
+			}, H.current);
 		}, n = () => {
-			z.current !== null && (clearTimeout(z.current), z.current = null, V.current = Math.max(1, V.current - (Date.now() - B.current)));
+			B.current !== null && (clearTimeout(B.current), B.current = null, H.current = Math.max(1, H.current - (Date.now() - V.current)));
 		};
-		return K.current = n, q.current = () => {
-			z.current === null && V.current > 0 && t();
-		}, V.current = E, H.current || t(), n;
+		return q.current = n, J.current = () => {
+			B.current === null && H.current > 0 && t();
+		}, H.current = T, U.current || t(), n;
 	}, [
+		w,
 		T,
-		E,
-		P,
-		j
+		F,
+		M
 	]);
-	let J = s(() => {
-		H.current = G.current || D && (U.current || W.current), H.current ? K.current() : q.current();
-	}, [D]), Y = l(null), X = l(!1), Z = (e, t) => {
+	let Y = s(() => {
+		U.current = K.current || D && (W.current || G.current), U.current ? q.current() : J.current();
+	}, [D]), X = u(null), Z = u(!1), ie = (e, t) => {
 		try {
 			e.setPointerCapture(t);
 		} catch {}
-		e.style.userSelect = "none", I || (e.style.scrollBehavior = "auto", e.style.scrollSnapType = "none");
+		e.style.userSelect = "none", L || (e.style.scrollBehavior = "auto", e.style.scrollSnapType = "none");
 	}, Q = (e) => {
 		e && (e.style.userSelect = "", e.style.scrollBehavior = "", e.style.scrollSnapType = "");
 	}, $ = () => {
-		I || (M.current?.children[A])?.scrollIntoView({
+		L || (N.current?.children[j])?.scrollIntoView({
 			behavior: "smooth",
 			block: "nearest",
 			inline: "start"
 		});
-	}, re = (e) => {
-		P <= 1 || e.button !== 0 || (I || e.pointerType === "mouse") && (Y.current = {
+	}, ae = (e) => {
+		F <= 1 || e.button !== 0 || (L || e.pointerType === "mouse") && (X.current = {
 			pointerId: e.pointerId,
 			startX: e.clientX,
-			startScrollLeft: M.current?.scrollLeft ?? 0,
+			startScrollLeft: N.current?.scrollLeft ?? 0,
 			moved: !1
-		}, G.current = !0, J());
-	}, ie = (e) => {
-		let t = Y.current, n = M.current;
+		}, K.current = !0, Y());
+	}, oe = (e) => {
+		let t = X.current, n = N.current;
 		if (!t || !n || t.pointerId !== e.pointerId) return;
 		let r = e.clientX - t.startX;
 		if (!t.moved) {
 			if (Math.abs(r) < m) return;
-			t.moved = !0, Z(n, e.pointerId);
+			t.moved = !0, ie(n, e.pointerId);
 		}
-		I || (n.scrollLeft = t.startScrollLeft - r);
-	}, ae = (e) => {
-		let n = Y.current;
+		L || (n.scrollLeft = t.startScrollLeft - r);
+	}, se = (e) => {
+		let n = X.current;
 		if (!n || n.pointerId !== e.pointerId) return;
-		let r = M.current;
-		Y.current = null, Q(r), G.current = !1;
-		let i = N.current;
+		let r = N.current;
+		X.current = null, Q(r), K.current = !1;
+		let i = P.current;
 		if (i) {
 			let t = i.getBoundingClientRect();
-			(e.clientX < t.left || e.clientX > t.right || e.clientY < t.top || e.clientY > t.bottom) && (U.current = !1);
+			(e.clientX < t.left || e.clientX > t.right || e.clientY < t.top || e.clientY > t.bottom) && (W.current = !1);
 		}
-		if (J(), !n.moved) return;
-		X.current = !0;
-		let a = r?.getBoundingClientRect().width ?? 0, o = Math.max(1, a * h), s = e.clientX - n.startX;
+		if (Y(), !n.moved) return;
+		Z.current = !0;
+		let a = r?.getBoundingClientRect().width ?? 0, o = Math.max(1, a * te), s = e.clientX - n.startX;
 		if (Math.abs(s) < o) {
 			$();
 			return;
 		}
-		let c = t(N.current) === "rtl";
-		s > 0 ? c ? R() : L() : c ? L() : R();
-	}, oe = (e) => {
-		let t = Y.current;
-		t && t.pointerId === e.pointerId && (Y.current = null, Q(M.current), G.current = !1, J(), t.moved && (X.current = !0, $()));
-	}, se = (e) => {
-		X.current && (X.current = !1, e.preventDefault(), e.stopPropagation());
+		let c = t(P.current) === "rtl";
+		s > 0 ? c ? z() : R() : c ? R() : z();
 	}, ce = (e) => {
-		Y.current && e.preventDefault();
+		let t = X.current;
+		t && t.pointerId === e.pointerId && (X.current = null, Q(N.current), K.current = !1, Y(), t.moved && (Z.current = !0, $()));
 	}, le = (e) => {
-		if (P <= 1) return;
-		let n = t(N.current) === "rtl" ? "ArrowLeft" : "ArrowRight", r = n === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+		Z.current && (Z.current = !1, e.preventDefault(), e.stopPropagation());
+	}, ue = (e) => {
+		X.current && e.preventDefault();
+	}, de = (e) => {
+		if (F <= 1) return;
+		let n = t(P.current) === "rtl" ? "ArrowLeft" : "ArrowRight", r = n === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
 		switch (e.key) {
 			case n:
-				e.preventDefault(), R();
+				e.preventDefault(), z();
 				return;
 			case r:
-				e.preventDefault(), L();
+				e.preventDefault(), R();
 				return;
 			case "Home":
-				e.preventDefault(), j(0);
+				e.preventDefault(), M(0);
 				return;
 			case "End":
-				e.preventDefault(), j(P - 1);
+				e.preventDefault(), M(F - 1);
 				return;
 		}
-	}, ue = !I || P === 0 ? k : i.map(k, (e, t) => o(e) ? a(e, {
-		"data-active": t === A || void 0,
-		inert: t !== A || void 0
+	}, fe = !L || F === 0 ? k : i.map(k, (e, t) => o(e) ? a(e, {
+		"data-active": t === j || void 0,
+		inert: t !== j || void 0
 	}) : e);
 	return /* @__PURE__ */ f("div", {
-		ref: N,
+		ref: P,
 		"data-slot": "carousel",
 		role: "region",
 		"aria-roledescription": "carousel",
-		"aria-label": F.label,
+		"aria-label": I.label,
 		tabIndex: 0,
-		onKeyDown: le,
+		onKeyDown: de,
 		onPointerEnter: () => {
-			U.current = !0, J();
+			W.current = !0, Y();
 		},
 		onPointerLeave: () => {
-			U.current = !1, J();
+			W.current = !1, Y();
 		},
 		onFocus: () => {
-			W.current = !0, J();
+			G.current = !0, Y();
 		},
 		onBlur: (e) => {
 			let t = e.relatedTarget;
-			t instanceof Node && e.currentTarget.contains(t) || (W.current = !1, J());
+			t instanceof Node && e.currentTarget.contains(t) || (G.current = !1, Y());
 		},
-		className: e([ee, O]),
+		className: e([g, O]),
 		children: [/* @__PURE__ */ d("div", {
-			ref: M,
+			ref: N,
 			"data-slot": "track",
-			onPointerDown: re,
-			onPointerMove: ie,
-			onPointerUp: ae,
-			onPointerCancel: oe,
-			onClickCapture: se,
-			onDragStart: ce,
-			className: e([I ? v : _]),
-			children: ue
-		}), P > 1 && /* @__PURE__ */ f(u, { children: [
+			onPointerDown: ae,
+			onPointerMove: oe,
+			onPointerUp: se,
+			onPointerCancel: ce,
+			onClickCapture: le,
+			onDragStart: ue,
+			className: e([L ? ne : _]),
+			children: fe
+		}), F > 1 && /* @__PURE__ */ f(ee, { children: [
 			/* @__PURE__ */ d("button", {
 				type: "button",
 				"data-slot": "prev",
-				onClick: L,
-				"aria-label": F.previousSlide,
-				className: e([y, b]),
+				onClick: R,
+				"aria-label": I.previousSlide,
+				className: e([v, y]),
 				children: "‹"
 			}),
 			/* @__PURE__ */ d("button", {
 				type: "button",
 				"data-slot": "next",
-				onClick: R,
-				"aria-label": F.nextSlide,
-				className: e([y, te]),
+				onClick: z,
+				"aria-label": I.nextSlide,
+				className: e([v, b]),
 				children: "›"
 			}),
 			/* @__PURE__ */ d("div", {
 				"data-slot": "dots",
 				className: x,
-				children: Array.from({ length: P }, (t, r) => /* @__PURE__ */ d("button", {
+				children: Array.from({ length: F }, (t, r) => /* @__PURE__ */ d("button", {
 					type: "button",
 					"data-slot": "dot",
-					onClick: () => j(r),
-					"aria-label": n(F.goToSlide, { index: r + 1 }),
-					className: e([S, r === A && C])
+					onClick: () => M(r),
+					"aria-label": n(I.goToSlide, { index: r + 1 }),
+					className: e([S, r === j && re])
 				}, r))
 			})
 		] })]
 	});
 }
 //#endregion
-export { w as default };
+export { C as default };

package/dist/components/Carousel/CarouselSlide.js

@@ -2,18 +2,24 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                        */
-import { jsx as t } from "react/jsx-runtime";
+import { c as t } from "react/compiler-runtime";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/lib/components/Carousel/CarouselSlide.tsx
-var n = "haze-CarouselSlide__slide";
-function r({ className: r, children: i, ...a }) {
-	return /* @__PURE__ */ t("div", {
+var r = "haze-CarouselSlide__slide";
+function i(i) {
+	let a = t(10), o, s, c;
+	a[0] === i ? (o = a[1], s = a[2], c = a[3]) : ({className: s, children: o, ...c} = i, a[0] = i, a[1] = o, a[2] = s, a[3] = c);
+	let l;
+	a[4] === s ? l = a[5] : (l = [r, s], a[4] = s, a[5] = l);
+	let u;
+	return a[6] !== o || a[7] !== c || a[8] !== l ? (u = /* @__PURE__ */ n("div", {
 		"data-slot": "slide",
 		role: "group",
 		"aria-roledescription": "slide",
-		...a,
-		className: e([n, r]),
-		children: i
-	});
+		...c,
+		className: e(l),
+		children: o
+	}), a[6] = o, a[7] = c, a[8] = l, a[9] = u) : u = a[9], u;
 }
 //#endregion
-export { r as default };
+export { i as default };