@jfrader/ui 0.5.0 → 0.6.0

package/dist/carousel-IvPqN-oM.js

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