@jfrader/ui 0.5.0 → 0.6.0

package/dist/carousel-lTH4Foke.js

@@ -0,0 +1,475 @@
+'use client';
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t, t as n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./sx-BJXJ2xJK.js";
+import { n as o } from "./roving-focus-CYlo_Kf8.js";
+import { t as s } from "./use-controlled-state-DpeVQZNR.js";
+import { t as c } from "./button-C6OV0C7J.js";
+import { Children as ee, isValidElement as l, useEffect as u, useId as te, useLayoutEffect as ne, useMemo as re, useRef as d, useState as f, useSyncExternalStore as ie } from "react";
+import { vars as p } from "@jfrader/tokens/vars";
+import { createElement as ae } from "@emotion/react";
+import { jsx as m, jsxs as oe } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as h } from "@floating-ui/react";
+//#region src/components/carousel/carousel.tsx
+var se = "min(80cqw, 21rem)", g = "min(var(--carousel-slide-size), 100cqw)", ce = 6, le = 120, _ = "(prefers-reduced-motion: reduce)", ue = "a[href], button, input, select, textarea, label, summary, [contenteditable]:not([contenteditable=\"false\"]), [tabindex], [role=\"slider\"]", de = {
+	itemSelector: "[role=\"tab\"]",
+	ownerSelector: "[role=\"tablist\"]"
+}, v = () => {};
+function fe(e) {
+	if (typeof window > "u" || !window.matchMedia) return v;
+	let t = window.matchMedia(_);
+	return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+}
+var pe = () => typeof window < "u" && window.matchMedia?.(_).matches === !0;
+function me(e) {
+	return typeof document > "u" ? v : (document.addEventListener("visibilitychange", e), () => document.removeEventListener("visibilitychange", e));
+}
+var he = () => typeof document < "u" && document.hidden, ge = () => !1;
+function _e(e, t) {
+	return t === 0 ? 0 : Math.min(Math.max(Number.isFinite(e) ? Math.trunc(e) : 0, 0), t - 1);
+}
+function y(e, t) {
+	return (n) => {
+		e?.(n), n.defaultPrevented || t(n);
+	};
+}
+var ve = (...e) => e.filter(Boolean).join(" ") || void 0, b = (e, t) => l(e) && e.key !== null ? e.key : `slide-${t}`, ye = e({
+	label: "carousel",
+	containerType: "inline-size",
+	boxSizing: "border-box",
+	inlineSize: "100%",
+	minInlineSize: 0,
+	display: "grid",
+	gap: p.space[3],
+	fontFamily: p.font.sans,
+	color: p.color.text,
+	"&:focus-visible": t
+}), be = e({ justifySelf: "start" }), xe = e({
+	overflowX: "auto",
+	overflowY: "hidden",
+	scrollSnapType: "inline mandatory",
+	overscrollBehaviorInline: "contain",
+	scrollbarWidth: "none",
+	borderRadius: p.radius.lg,
+	"&:focus-visible": t,
+	"&[data-disabled]": { overflowX: "hidden" },
+	"&[data-dragging]": {
+		cursor: "grabbing",
+		userSelect: "none"
+	}
+}), Se = e({
+	display: "flex",
+	gap: p.space[3],
+	inlineSize: "max-content",
+	paddingInline: `calc((100cqw - ${g}) / 2)`
+}), Ce = e({
+	flex: "none",
+	boxSizing: "border-box",
+	inlineSize: g,
+	minInlineSize: 0,
+	scrollSnapAlign: "center",
+	scrollSnapStop: "always"
+}), we = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: p.space[2]
+}), Te = e({
+	display: "flex",
+	flex: "1 1 auto",
+	minInlineSize: 0,
+	overflowX: "auto",
+	scrollbarWidth: "none"
+}), Ee = e({
+	appearance: "none",
+	display: "inline-grid",
+	placeItems: "center",
+	flex: "none",
+	minInlineSize: p.space[8],
+	blockSize: p.space[8],
+	padding: 0,
+	border: 0,
+	borderRadius: p.radius.full,
+	background: "transparent",
+	cursor: "pointer",
+	"&:hover:not([aria-disabled=\"true\"]):not([aria-selected=\"true\"]) > span": { backgroundColor: p.color.textMuted },
+	"&[aria-selected=\"true\"] > span": {
+		inlineSize: p.space[6],
+		backgroundColor: p.color.accent
+	},
+	"&[aria-disabled=\"true\"]": {
+		cursor: "not-allowed",
+		opacity: .55
+	},
+	"&:focus-visible": n,
+	[r]: {
+		"& > span": {
+			forcedColorAdjust: "none",
+			backgroundColor: "CanvasText"
+		},
+		"&[aria-selected=\"true\"] > span": { backgroundColor: "Highlight" }
+	}
+}), De = e({
+	display: "block",
+	inlineSize: p.space[2],
+	blockSize: p.space[2],
+	borderRadius: p.radius.full,
+	backgroundColor: p.color.borderControl,
+	transitionProperty: "inline-size, background-color",
+	transitionDuration: p.motion.duration.fast,
+	transitionTimingFunction: p.motion.easeStandard,
+	[i]: { transitionDuration: "0s" }
+}), Oe = e({
+	inlineSize: p.space[8],
+	paddingInline: 0
+}), ke = e({
+	inlineSize: p.space[4],
+	blockSize: p.space[4],
+	"&:dir(rtl)": { transform: "scaleX(-1)" }
+}), Ae = e({
+	margin: 0,
+	textAlign: "center",
+	fontSize: p.textSize.sm,
+	lineHeight: p.lineHeight.base,
+	color: p.color.textMuted,
+	fontVariantNumeric: "tabular-nums"
+}), je = e({
+	display: "grid",
+	placeItems: "center",
+	padding: p.space[8],
+	border: `1px dashed ${p.color.borderControl}`,
+	borderRadius: p.radius.lg,
+	fontSize: p.textSize.sm,
+	lineHeight: p.lineHeight.base,
+	color: p.color.textMuted
+});
+function Me({ direction: e }) {
+	return /* @__PURE__ */ m("svg", {
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		focusable: "false",
+		css: ke,
+		children: /* @__PURE__ */ m("path", {
+			d: e === "previous" ? "M10 3 5 8l5 5" : "m6 3 5 5-5 5",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function x({ ref: e, children: t, value: n, defaultValue: r = 0, onValueChange: i, slideSize: l = se, getSlideLabel: p, activation: g = "auto", interval: _, autoPlay: ke = !1, playingValue: x, defaultPlayingValue: Ne, onPlayingValueChange: Pe, locale: Fe, labels: Ie, disabled: S = !1, slotProps: C, className: Le, sx: Re, style: ze, role: Be = "region", "aria-roledescription": Ve, onFocus: He, onBlur: Ue, onPointerEnter: We, onPointerLeave: Ge, ...Ke }) {
+	let qe = te(), Je = re(() => new Intl.NumberFormat(Fe), [Fe]), w = {
+		slides: "Slides",
+		chooseSlide: "Choose slide",
+		previous: "Previous slide",
+		next: "Next slide",
+		startRotation: "Start slide rotation",
+		stopRotation: "Stop slide rotation",
+		empty: "No slides",
+		carouselRole: "carousel",
+		slideCount: (e, t) => `Slide ${Je.format(e + 1)} of ${Je.format(t)}`,
+		...Ie
+	}, Ye = p ?? w.slideCount, T = ee.toArray(t), E = T.length, Xe = JSON.stringify(T.map(b)), D = E > 1, [Ze, O] = s(n, r, i), k = Ze ?? 0, A = _e(k, E), j = D && !S, M = typeof _ == "number" && Number.isFinite(_) && _ > 0 ? _ : void 0, N = M !== void 0 && D, [Qe, $e] = s(x, Ne ?? ke, Pe), [et, P] = f(!1), [F, tt] = f(null), I = ie(fe, pe, ge), nt = ie(me, he, ge), [rt, it] = f(!1), [at, ot] = f(!1), [st, ct] = f(!1), L = N && Qe && !et && !I && !S, R = L && !rt && !at && !nt && !st, [z, lt] = f(null), ut = z !== null && z < E ? z : A, [dt, ft] = f(0), B = d(null), V = d(null), H = d(null), pt = d(null), mt = h([e, B]), ht = h([C?.viewport?.ref, V]), gt = h([C?.tabList?.ref, pt]), U = d(null), W = d(null), _t = d(null), G = d(null), vt = d(null), K = d(null), yt = d(!0), bt = d(0), xt = d(void 0), St = (e) => `${qe}-panel-${e}`, Ct = (e) => `${qe}-tab-${e}`;
+	u(() => {
+		Number.isFinite(k) || console.warn(`Carousel: value ${k} is not a finite index; showing the first slide.`);
+	}, [k]), u(() => {
+		I && P(!0);
+	}, [I]), u(() => {
+		let e = B.current;
+		if (!N || !e || typeof IntersectionObserver > "u") return;
+		let t = new IntersectionObserver(([e]) => ct(e ? !e.isIntersecting : !1));
+		return t.observe(e), () => t.disconnect();
+	}, [N]), u(() => {
+		if (!R || M === void 0) return;
+		let e = setTimeout(() => {
+			tt(A), O((A + 1) % E);
+		}, M);
+		return () => clearTimeout(e);
+	}, [
+		R,
+		M,
+		A,
+		E,
+		O
+	]), u(() => {
+		F !== null && (tt(null), F === A && P(!0));
+	}, [F, A]), u(() => () => clearTimeout(xt.current), []);
+	let wt = (e) => H.current?.children[e], Tt = (e, t) => {
+		let n = V.current, r = wt(e);
+		if (!n || !r) return;
+		let i = n.getBoundingClientRect(), a = r.getBoundingClientRect(), o = a.left + a.width / 2 - (i.left + i.width / 2);
+		Math.abs(o) < 1 || (K.current = n.scrollLeft + o, n.scrollTo({
+			left: K.current,
+			behavior: t
+		}));
+	}, Et = () => {
+		let e = V.current, t = H.current;
+		if (!e || !t) return A;
+		let n = e.getBoundingClientRect(), r = n.left + n.width / 2, i = A, a = Infinity;
+		return Array.from(t.children).forEach((e, t) => {
+			let n = e.getBoundingClientRect(), o = Math.abs(n.left + n.width / 2 - r);
+			o < a && (a = o, i = t);
+		}), i;
+	};
+	ne(() => {
+		bt.current = A;
+		let e = V.current, t = e ?? B.current;
+		if (!t) return;
+		let { activeElement: n, body: r } = t.ownerDocument, i = U.current, a = (t) => e?.contains(t) && t.closest("[inert]") !== null, o = n !== null && a(n), s = n === r && i !== null && (!i.isConnected || a(i));
+		(o || s) && t.focus({ preventScroll: !0 }), pt.current?.contains(n) || lt(null), !W.current?.active && (Tt(A, yt.current || I ? "instant" : "smooth"), yt.current = !1);
+	}, [
+		A,
+		Xe,
+		dt
+	]), u(() => {
+		let e = V.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(() => {
+			W.current?.active || Tt(bt.current, "instant");
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [E > 0]);
+	let q = (e) => {
+		if (!j) return;
+		let t = _e(e, E);
+		t !== A && O(t);
+	}, Dt = (e) => {
+		_t.current = e, q(e), ft((e) => e + 1);
+	}, Ot = () => {
+		let e = V.current, t = K.current;
+		if (e && t !== null) {
+			Math.abs(e.scrollLeft - t) < 2 && (K.current = null);
+			return;
+		}
+		if (!j || W.current) return;
+		let n = Et();
+		n !== A && n !== _t.current && Dt(n);
+	}, kt = () => {
+		clearTimeout(xt.current), xt.current = setTimeout(Ot, le);
+	}, At = typeof window < "u" && "onscrollend" in window, jt = () => {
+		N && !et && (P(!0), $e(!1));
+	}, Mt = y(He, (e) => {
+		U.current = e.target, jt();
+	}), Nt = y(Ue, (e) => {
+		let t = e.relatedTarget;
+		t !== null && !e.currentTarget.contains(t) && (U.current = null);
+	}), Pt = () => {
+		let e = vt.current ?? (L ? "stop" : "start");
+		vt.current = null, P(e === "stop"), $e(e === "start");
+	}, Ft = () => {
+		_t.current = null, K.current = null;
+	}, It = (e) => {
+		if (Ft(), e.target !== e.currentTarget || !j) return;
+		let t = getComputedStyle(e.currentTarget).direction === "rtl", n = {
+			ArrowRight: A + (t ? -1 : 1),
+			ArrowLeft: A + (t ? 1 : -1),
+			Home: 0,
+			End: E - 1
+		}[e.key];
+		n !== void 0 && (e.preventDefault(), q(n));
+	}, Lt = (e) => {
+		if (Ft(), !j || e.pointerType !== "mouse" || e.button !== 0) return;
+		let t = e.currentTarget, n = e.target.closest(ue);
+		n && n !== t && t.contains(n) || (W.current = {
+			pointerId: e.pointerId,
+			startX: e.clientX,
+			startY: e.clientY,
+			startScroll: t.scrollLeft,
+			active: !1
+		});
+	}, Rt = (e) => {
+		let t = W.current;
+		if (!t || t.pointerId !== e.pointerId) return;
+		let n = e.currentTarget, r = e.clientX - t.startX, i = e.clientY - t.startY;
+		if (!t.active) {
+			if (Math.abs(i) >= ce && Math.abs(i) > Math.abs(r)) {
+				W.current = null;
+				return;
+			}
+			if (Math.abs(r) < ce) return;
+			t.active = !0, n.setPointerCapture(e.pointerId), n.style.scrollSnapType = "none", n.ownerDocument.getSelection()?.removeAllRanges(), ot(!0);
+		}
+		n.scrollLeft = t.startScroll - r;
+	}, zt = (e, t) => {
+		let n = W.current;
+		if (!n || n.pointerId !== e.pointerId || (W.current = null, !n.active)) return;
+		let r = e.currentTarget;
+		if (r.style.scrollSnapType = "", ot(!1), !t) {
+			ft((e) => e + 1);
+			return;
+		}
+		let i = (e) => {
+			e.preventDefault(), e.stopPropagation();
+		};
+		r.addEventListener("click", i, {
+			capture: !0,
+			once: !0
+		}), setTimeout(() => r.removeEventListener("click", i, { capture: !0 })), Dt(Et());
+	}, Bt = (e) => {
+		lt(e), g === "auto" && (G.current = e, q(e));
+	}, Vt = (e) => {
+		let t = G.current === e;
+		G.current = null, !(g === "auto" && t) && q(e);
+	}, Ht = (e) => {
+		G.current = null, o(e, e.currentTarget, "horizontal", de);
+	}, Ut = {
+		...ze,
+		"--carousel-slide-size": typeof l == "number" ? `${l}px` : l
+	}, { viewport: J, track: Wt, slide: Gt, controls: Kt, tabList: Y, indicator: X, rotationButton: Z, previousButton: Q, nextButton: $, status: qt, empty: Jt } = C ?? {};
+	return /* @__PURE__ */ m(a, {
+		className: Le,
+		styles: ye,
+		sx: Re,
+		children: (e) => /* @__PURE__ */ oe("section", {
+			...Ke,
+			ref: mt,
+			tabIndex: Ke.tabIndex ?? -1,
+			role: Be,
+			"aria-roledescription": Ve ?? w.carouselRole,
+			"data-ui": "carousel",
+			"data-disabled": S || void 0,
+			"data-rotating": R || void 0,
+			className: e,
+			style: Ut,
+			onFocus: Mt,
+			onBlur: Nt,
+			onPointerEnter: y(We, (e) => {
+				e.pointerType !== "touch" && it(!0);
+			}),
+			onPointerLeave: y(Ge, () => it(!1)),
+			children: [
+				N && /* @__PURE__ */ m(c, {
+					size: "sm",
+					variant: "outline",
+					...Z,
+					css: [be, Z?.css],
+					"data-ui": "carousel-rotation",
+					"aria-disabled": S || I || void 0,
+					onPointerDown: y(Z?.onPointerDown, () => {
+						vt.current = L ? "stop" : "start";
+					}),
+					onClick: y(Z?.onClick, Pt),
+					children: L ? w.stopRotation : w.startRotation
+				}),
+				E === 0 ? /* @__PURE__ */ m("div", {
+					...Jt,
+					"data-ui": "carousel-empty",
+					css: [je, Jt?.css],
+					children: w.empty
+				}) : /* @__PURE__ */ m("div", {
+					...J,
+					ref: ht,
+					role: "group",
+					"aria-label": J?.["aria-label"] ?? (J?.["aria-labelledby"] ? void 0 : w.slides),
+					tabIndex: j ? 0 : -1,
+					"data-ui": "carousel-viewport",
+					"data-disabled": S || void 0,
+					"data-dragging": at || void 0,
+					css: [xe, J?.css],
+					onKeyDown: y(J?.onKeyDown, It),
+					onWheel: y(J?.onWheel, Ft),
+					onPointerDown: y(J?.onPointerDown, Lt),
+					onPointerMove: y(J?.onPointerMove, Rt),
+					onPointerUp: y(J?.onPointerUp, (e) => zt(e, !0)),
+					onPointerCancel: y(J?.onPointerCancel, (e) => zt(e, !1)),
+					onScroll: y(J?.onScroll, At ? v : kt),
+					onScrollEnd: y(J?.onScrollEnd, Ot),
+					children: /* @__PURE__ */ m("div", {
+						...Wt,
+						ref: H,
+						"data-ui": "carousel-track",
+						css: [Se, Wt?.css],
+						children: T.map((e, t) => {
+							let n = t === A;
+							return /* @__PURE__ */ ae("div", {
+								...Gt,
+								key: b(e, t),
+								role: D ? "tabpanel" : void 0,
+								id: St(t),
+								"aria-labelledby": ve(Gt?.["aria-labelledby"], D ? Ct(t) : void 0),
+								"aria-hidden": !n || void 0,
+								inert: !n,
+								"data-ui": "carousel-slide",
+								"data-state": n ? "active" : "inactive",
+								css: [Ce, Gt?.css]
+							}, e);
+						})
+					})
+				}),
+				D && /* @__PURE__ */ oe("div", {
+					...Kt,
+					"data-ui": "carousel-controls",
+					css: [we, Kt?.css],
+					children: [
+						/* @__PURE__ */ m("div", {
+							...Y,
+							ref: gt,
+							role: "tablist",
+							"aria-label": Y?.["aria-label"] ?? (Y?.["aria-labelledby"] ? void 0 : w.chooseSlide),
+							"aria-orientation": "horizontal",
+							"data-ui": "carousel-tablist",
+							css: [Te, Y?.css],
+							onKeyDown: y(Y?.onKeyDown, Ht),
+							children: T.map((e, t) => /* @__PURE__ */ ae("button", {
+								...X,
+								key: b(e, t),
+								type: "button",
+								role: "tab",
+								id: Ct(t),
+								"aria-label": Ye(t, E),
+								"aria-selected": t === A,
+								"aria-controls": St(t),
+								"aria-disabled": S || void 0,
+								tabIndex: t === ut ? 0 : -1,
+								"data-ui": "carousel-indicator",
+								css: [Ee, X?.css],
+								onPointerDown: y(X?.onPointerDown, () => {
+									G.current = null;
+								}),
+								onFocus: y(X?.onFocus, () => Bt(t)),
+								onClick: y(X?.onClick, () => Vt(t))
+							}, /* @__PURE__ */ m("span", { css: De })))
+						}),
+						/* @__PURE__ */ m(c, {
+							size: "sm",
+							variant: "outline",
+							...Q,
+							css: [Oe, Q?.css],
+							"data-ui": "carousel-previous",
+							"aria-label": Q?.["aria-label"] ?? w.previous,
+							"aria-disabled": !j || A === 0 || void 0,
+							onClick: y(Q?.onClick, () => q(A - 1)),
+							children: /* @__PURE__ */ m(Me, { direction: "previous" })
+						}),
+						/* @__PURE__ */ m(c, {
+							size: "sm",
+							variant: "outline",
+							...$,
+							css: [Oe, $?.css],
+							"data-ui": "carousel-next",
+							"aria-label": $?.["aria-label"] ?? w.next,
+							"aria-disabled": !j || A === E - 1 || void 0,
+							onClick: y($?.onClick, () => q(A + 1)),
+							children: /* @__PURE__ */ m(Me, { direction: "next" })
+						})
+					]
+				}),
+				D && /* @__PURE__ */ m("div", {
+					...qt,
+					role: "status",
+					"aria-live": R ? "off" : "polite",
+					"aria-atomic": "true",
+					"data-ui": "carousel-status",
+					css: [Ae, qt?.css],
+					children: Ye(A, E)
+				})
+			]
+		})
+	});
+}
+x.displayName = "Carousel";
+//#endregion
+export { x as t };

package/dist/carousel.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Carousel } from "./carousel-IvPqN-oM.js";
+export { t as Carousel } from "./carousel-lTH4Foke.js";