solid-baseui 0.1.0-alpha.0

package/dist/lib/client/scroll-area-CffM4U0R.js

@@ -0,0 +1,701 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { getStateAttributesProps as t } from "./internals/getStateAttributesProps.js";
+import { n, t as r } from "./resolveStyle-XcgAuaKR.js";
+import { composeEventHandlers as i } from "./internals/composeEventHandlers.js";
+import { n as a } from "./DirectionContext-BwMabICS.js";
+import { n as o } from "./CSPContext-faVzToiT.js";
+import { mergeStyles as s } from "./internals/mergeStyles.js";
+import { Dynamic as c, createComponent as l, effect as u, getNextElement as d, isServer as f, memo as p, mergeProps as m, setAttribute as h, template as g } from "@solidjs/web";
+import { DEV as _, Show as v, createContext as y, createEffect as b, createMemo as x, createRoot as S, createSignal as C, createUniqueId as w, getOwner as T, omit as E, onCleanup as D, onSettled as O, untrack as k, useContext as A } from "solid-js";
+//#region src/scroll-area/utils/dom.ts
+function j(e) {
+	let t = e.composedPath()[0] ?? e.target;
+	if (!t || typeof t.nodeType != "number") return null;
+	let n = t;
+	return n.nodeType === Node.ELEMENT_NODE ? n : n.parentElement;
+}
+function M(e, t) {
+	if (!e || !t || typeof t.nodeType != "number") return !1;
+	let n = t;
+	for (; n;) {
+		if (e.contains(n)) return !0;
+		let t = n.getRootNode();
+		n = t.nodeType === Node.DOCUMENT_FRAGMENT_NODE && "host" in t ? t.host : null;
+	}
+	return !1;
+}
+//#endregion
+//#region src/scroll-area/utils/getOffset.ts
+function N(e, t, n) {
+	if (!e) return 0;
+	let r = e.ownerDocument.defaultView?.getComputedStyle(e);
+	if (!r) return 0;
+	let i = `${t}${n === "x" ? "Inline" : "Block"}`, a = Number.parseFloat(r[`${i}Start`]) || 0;
+	return n === "x" && t === "margin" ? a * 2 : a + (Number.parseFloat(r[`${i}End`]) || 0);
+}
+//#endregion
+//#region src/scroll-area/root/ScrollAreaRootContext.ts
+var P = Symbol("ScrollAreaRootContext"), F = y(P);
+function I() {
+	let e = A(F);
+	if (e === P) throw Error("Base UI: ScrollAreaRootContext is missing. ScrollArea parts must be placed within <ScrollArea.Root>.");
+	return e;
+}
+//#endregion
+//#region src/scroll-area/root/stateAttributes.ts
+var L = (e) => (t) => t ? { [e]: "" } : null, R = {
+	hasOverflowX: L("data-has-overflow-x"),
+	hasOverflowY: L("data-has-overflow-y"),
+	overflowXStart: L("data-overflow-x-start"),
+	overflowXEnd: L("data-overflow-x-end"),
+	overflowYStart: L("data-overflow-y-start"),
+	overflowYEnd: L("data-overflow-y-end"),
+	cornerHidden: () => null
+}, z = /* @__PURE__ */ g("<style>.base-ui-disable-scrollbar{scrollbar-width:none}.base-ui-disable-scrollbar::-webkit-scrollbar{display:none}"), B = {
+	width: 0,
+	height: 0
+}, V = {
+	xStart: !1,
+	xEnd: !1,
+	yStart: !1,
+	yEnd: !1
+}, ee = {
+	x: !0,
+	y: !0,
+	corner: !0
+};
+function H(e) {
+	let a = o(), f = e, g = e, _ = `base-ui-${w()}`, [v, y] = C(), [b, S] = C(), [T, O] = C(), [k, A] = C(), [j, P] = C(), [I, L] = C(), [H, U] = C(!1), [W, G] = C(!1), [ae, K] = C(!1), [oe, se] = C(!1), [ce, le] = C(!1), [ue, de] = C(B), [fe, pe] = C(B), [me, he] = C(V), [ge, _e] = C(ee), q, J = null, ve = 0, ye = 0, be = 0, xe = 0, Y = "vertical", X = {
+		x: 0,
+		y: 0
+	}, Z = null, Q, $, Se = E(g, "as", "children", "class", "onPointerDown", "onPointerEnter", "onPointerLeave", "onPointerMove", "overflowEdgeThreshold", "ref", "style"), Ce = x(() => te(f.overflowEdgeThreshold)), we = x(() => {
+		let e = ge(), t = me();
+		return {
+			scrolling: W() || ae(),
+			hasOverflowX: !e.x,
+			hasOverflowY: !e.y,
+			overflowXStart: t.xStart,
+			overflowXEnd: t.xEnd,
+			overflowYStart: t.yStart,
+			overflowYEnd: t.yEnd,
+			cornerHidden: e.corner
+		};
+	}), Te = x(() => n(e.class, we())), Ee = x(() => {
+		let t = ue(), n = r(e.style, we());
+		return typeof n == "string" ? `position:relative;--scroll-area-corner-height:${t.height}px;--scroll-area-corner-width:${t.width}px;${n}` : s({
+			position: "relative",
+			"--scroll-area-corner-height": `${t.height}px`,
+			"--scroll-area-corner-width": `${t.width}px`
+		}, n === !1 ? void 0 : n);
+	}), De = x(() => t(we(), R));
+	function Oe(e) {
+		de((t) => ne(t, e) ? t : e);
+	}
+	function ke(e) {
+		pe((t) => ne(t, e) ? t : e);
+	}
+	function Ae(e) {
+		_e((t) => re(t, e) ? t : e);
+	}
+	function je(e) {
+		he((t) => ie(t, e) ? t : e);
+	}
+	function Me(e) {
+		let t = e ? $ : Q;
+		t !== void 0 && clearTimeout(t), (e ? K : G)(!0);
+		let n = setTimeout(() => {
+			(e ? K : G)(!1);
+		}, 500);
+		e ? $ = n : Q = n;
+	}
+	function Ne(e) {
+		let t = e.x - X.x, n = e.y - X.y;
+		X = e, n !== 0 && Me(!0), t !== 0 && Me(!1);
+	}
+	function Pe() {
+		let e = v();
+		e && Z === null && (Z = e.style.scrollSnapType, e.style.scrollSnapType = "none");
+	}
+	function Fe(e, t) {
+		if (e.button !== 0 || J !== null && (Y === "vertical" ? k() : j())?.hasPointerCapture?.(J)) return;
+		J = e.pointerId, Y = t, ve = e.clientY, ye = e.clientX;
+		let n = v();
+		n && (be = n.scrollTop, xe = n.scrollLeft, Pe()), (t === "vertical" ? k() : j())?.setPointerCapture?.(e.pointerId);
+	}
+	function Ie() {
+		if (Z !== null) {
+			let e = v();
+			e && (e.style.scrollSnapType = Z), Z = null;
+		}
+	}
+	function Le(e) {
+		if (e.pointerId !== J) return;
+		J = null, (Y === "vertical" ? K : G)(!1), Ie();
+		let t = Y === "vertical" ? k() : j();
+		t?.hasPointerCapture?.(e.pointerId) && t.releasePointerCapture(e.pointerId);
+	}
+	function Re(e) {
+		if (e.pointerId !== J) return;
+		if (!(e.buttons & 1)) {
+			Le(e);
+			return;
+		}
+		let t = v(), n = Y === "vertical", r = n ? k() : j(), i = n ? b() : T();
+		if (!t || !r || !i) return;
+		let a = n ? "y" : "x", o = N(i, "padding", a), s = N(r, "margin", a), c = n ? r.offsetHeight : r.offsetWidth, l = (n ? i.offsetHeight : i.offsetWidth) - c - o - s, u = n ? e.clientY - ve : e.clientX - ye, d = l <= 0 ? 0 : u / l, f = n ? t.scrollHeight : t.scrollWidth, p = n ? t.clientHeight : t.clientWidth, m = (n ? be : xe) + d * (f - p);
+		n ? t.scrollTop = m : t.scrollLeft = m, e.preventDefault(), Me(n);
+	}
+	function ze(e) {
+		se(e.pointerType === "touch");
+	}
+	function Be(e) {
+		ze(e), e.pointerType !== "touch" && U(M(q, e.target));
+	}
+	let Ve = i(() => f.onPointerEnter, () => Be), He = i(() => f.onPointerMove, () => Be), Ue = i(() => f.onPointerDown, () => ze), We = i(() => f.onPointerLeave, () => () => U(!1)), Ge = {
+		cornerElement: I,
+		cornerSize: ue,
+		disableViewportSnap: Pe,
+		handlePointerDown: Fe,
+		handlePointerMove: Re,
+		handlePointerUp: Le,
+		handleScroll: Ne,
+		hasMeasuredScrollbar: ce,
+		hiddenState: ge,
+		hovering: H,
+		overflowEdges: me,
+		overflowEdgeThreshold: Ce,
+		rootId: _,
+		scrollbarXElement: T,
+		scrollbarYElement: b,
+		scrollingX: W,
+		scrollingY: ae,
+		setCornerElement: L,
+		setCornerSize: Oe,
+		setHasMeasuredScrollbar: le,
+		setHiddenState: Ae,
+		setHovering: U,
+		setOverflowEdges: je,
+		setScrollbarXElement: O,
+		setScrollbarYElement: S,
+		setThumbSize: ke,
+		setThumbXElement: P,
+		setThumbYElement: A,
+		setViewportElement: y,
+		state: we,
+		thumbSize: fe,
+		thumbXElement: j,
+		thumbYElement: k,
+		touchModality: oe,
+		viewportElement: v
+	};
+	return D(() => {
+		if (Q !== void 0 && clearTimeout(Q), $ !== void 0 && clearTimeout($), Ie(), J !== null) {
+			let e = Y === "vertical" ? k() : j();
+			e?.hasPointerCapture?.(J) && e.releasePointerCapture(J);
+		}
+	}), l(F, {
+		value: Ge,
+		get children() {
+			return [p(() => p(() => !a.disableStyleElements())() && (() => {
+				var e = d(z);
+				return u(() => a.nonce(), (t) => {
+					h(e, "nonce", t);
+				}), e;
+			})()), l(c, m({
+				get component() {
+					return e.as ?? "div";
+				},
+				ref: [((e) => {
+					q = e;
+				}), f.ref],
+				get class() {
+					return Te();
+				},
+				get style() {
+					return Ee();
+				},
+				role: "presentation",
+				onPointerEnter: Ve,
+				onPointerMove: He,
+				onPointerDown: Ue,
+				onPointerLeave: We
+			}, De, Se, { get children() {
+				return f.children;
+			} }))];
+		}
+	});
+}
+function te(e) {
+	let t = typeof e == "number" ? {
+		xStart: e,
+		xEnd: e,
+		yStart: e,
+		yEnd: e
+	} : e;
+	return {
+		xStart: Math.max(0, t?.xStart || 0),
+		xEnd: Math.max(0, t?.xEnd || 0),
+		yStart: Math.max(0, t?.yStart || 0),
+		yEnd: Math.max(0, t?.yEnd || 0)
+	};
+}
+function ne(e, t) {
+	return e.width === t.width && e.height === t.height;
+}
+function re(e, t) {
+	return e.x === t.x && e.y === t.y && e.corner === t.corner;
+}
+function ie(e, t) {
+	return e.xStart === t.xStart && e.xEnd === t.xEnd && e.yStart === t.yStart && e.yEnd === t.yEnd;
+}
+var U = !(typeof window > "u") && !!_, W = (() => void 0);
+Object.is.bind(Object);
+var G = U ? (e) => T() ? D(e) : e : D;
+//#endregion
+//#region node_modules/@solid-primitives/event-listener/dist/eventListener.js
+function ae(e, t, n, r) {
+	return e?.addEventListener?.(t, n, r), G(e?.removeEventListener?.bind(e, t, n, r));
+}
+//#endregion
+//#region node_modules/@solid-primitives/resize-observer/dist/index.js
+function K(e, t) {
+	if (f) return {
+		observe: W,
+		unobserve: W
+	};
+	let n = new ResizeObserver(e);
+	return D(n.disconnect.bind(n)), {
+		observe: (e) => n.observe(e, t),
+		unobserve: n.unobserve.bind(n)
+	};
+}
+//#endregion
+//#region src/scroll-area/utils/scrollEdges.ts
+var oe = 1;
+function se(e, t) {
+	if (t <= 0) return 0;
+	let n = Math.max(0, Math.min(e, t)), r = n, i = t - n, a = r <= oe, o = i <= oe;
+	return a && o ? r <= i ? 0 : t : a ? 0 : o ? t : n;
+}
+//#endregion
+//#region src/scroll-area/viewport/ScrollAreaViewportContext.ts
+var ce = Symbol("ScrollAreaViewportContext"), le = y(ce);
+function ue() {
+	let e = A(le);
+	if (e === ce) throw Error("Base UI: ScrollAreaViewportContext missing. ScrollAreaViewport parts must be placed within <ScrollArea.Viewport>.");
+	return e;
+}
+//#endregion
+//#region src/scroll-area/viewport/ScrollAreaViewport.tsx
+var de = [
+	"--scroll-area-overflow-x-start",
+	"--scroll-area-overflow-x-end",
+	"--scroll-area-overflow-y-start",
+	"--scroll-area-overflow-y-end"
+], fe = !1;
+function pe(e) {
+	let o = I(), u = a(), d = e, f = E(e, "as", "children", "class", "onKeyDown", "onPointerEnter", "onPointerMove", "onScroll", "onWheel", "ref", "style"), p = x(() => o.state()), h = x(() => ["base-ui-disable-scrollbar", n(e.class, p())]), g = x(() => {
+		let t = r(e.style, p());
+		return typeof t == "string" ? `overflow:scroll;${t}` : s({ overflow: "scroll" }, t === !1 ? void 0 : t);
+	}), _ = x(() => t(p(), R)), v = [
+		NaN,
+		NaN,
+		NaN,
+		NaN
+	], y = !0, S, C, w, T = !1, k;
+	function A() {
+		let e = o.viewportElement();
+		if (!e) return;
+		let t = o.scrollbarYElement(), n = o.scrollbarXElement(), r = o.thumbYElement(), i = o.thumbXElement(), a = o.cornerElement(), s = e.scrollHeight, c = e.scrollWidth, l = e.clientHeight, d = e.clientWidth, f = e.scrollTop, p = e.scrollLeft, m = Number.isNaN(v[0]);
+		if (v[0] = l, v[1] = s, v[2] = d, v[3] = c, m && o.setHasMeasuredScrollbar(!0), s === 0 || c === 0) return;
+		let h = me(e), g = d / c, _ = l / s, y = Math.max(0, c - d), b = Math.max(0, s - l), x = h.x ? 0 : se(u() === "rtl" ? -p : p, y), S = h.x ? 0 : y - x, C = h.y ? 0 : se(f, b), w = h.y ? 0 : b - C, T = h.x ? 0 : d, E = h.y ? 0 : l, D = 0, O = 0;
+		!h.x && !h.y && (D = t?.offsetWidth || 0, O = n?.offsetHeight || 0);
+		let k = o.cornerSize(), A = k.width === 0 && k.height === 0, j = N(n, "padding", "x"), M = N(t, "padding", "y"), P = N(i, "margin", "x"), F = N(r, "margin", "y"), I = T - j - P, L = E - M - F, R = n ? Math.min(n.offsetWidth - (A ? D : 0), I) : I, z = t ? Math.min(t.offsetHeight - (A ? O : 0), L) : L, B = Math.max(16, R * g), V = Math.max(16, z * _);
+		if (o.setThumbSize({
+			width: B,
+			height: V
+		}), t && r) {
+			let e = he(r, "--scroll-area-thumb-height", f, b, s, V, t.offsetHeight - V - M - F);
+			r.style.transform = `translate3d(0,${e}px,0)`;
+		}
+		if (n && i) {
+			let e = n.offsetWidth - B - j - P, t = he(i, "--scroll-area-thumb-width", u() === "rtl" ? -p : p, y, c, B, e);
+			i.style.transform = `translate3d(${u() === "rtl" ? -t : t}px,0,0)`;
+		}
+		let ee = [
+			x,
+			S,
+			C,
+			w
+		];
+		de.forEach((t, n) => {
+			e.style.setProperty(t, `${ee[n]}px`);
+		}), a && o.setCornerSize({
+			width: D,
+			height: O
+		}), o.setHiddenState(h);
+		let H = o.overflowEdgeThreshold();
+		o.setOverflowEdges({
+			xStart: !h.x && x > H.xStart,
+			xEnd: !h.x && S > H.xEnd,
+			yStart: !h.y && C > H.yStart,
+			yEnd: !h.y && w > H.yEnd
+		});
+	}
+	let j = typeof ResizeObserver > "u" ? void 0 : K((e) => {
+		!w || !e.some((e) => e.target === w) || !T && (T = !0, v[0] === w.clientHeight && v[1] === w.scrollHeight && v[2] === w.clientWidth && v[3] === w.scrollWidth) || A();
+	});
+	b(() => ({
+		hidden: o.hiddenState(),
+		direction: u(),
+		threshold: o.overflowEdgeThreshold(),
+		viewport: o.viewportElement(),
+		scrollbarX: o.scrollbarXElement(),
+		scrollbarY: o.scrollbarYElement(),
+		thumbX: o.thumbXElement(),
+		thumbY: o.thumbYElement()
+	}), () => {
+		queueMicrotask(A);
+	}), b(o.viewportElement, (e) => {
+		if (!(!e || !j)) return w = e, T = !1, j.observe(e), C = setTimeout(() => {
+			let t = e.getAnimations?.bind(e), n = t?.({ subtree: !0 }) ?? [];
+			n.length > 0 && Promise.allSettled(n.map((e) => e.finished)).then(A).catch(() => {});
+		}, 0), () => {
+			j.unobserve(e), w === e && (w = void 0), C !== void 0 && (clearTimeout(C), C = void 0);
+		};
+	});
+	function M() {
+		y = !1;
+	}
+	function P() {
+		let e = o.viewportElement();
+		e && (A(), (o.touchModality() || !y) && o.handleScroll({
+			x: e.scrollLeft,
+			y: e.scrollTop
+		}), S !== void 0 && clearTimeout(S), S = setTimeout(() => {
+			y = !0;
+		}, 100));
+	}
+	let F = i(() => d.onScroll, () => P), L = i(() => d.onWheel, () => M), z = i(() => d.onPointerMove, () => M), B = i(() => d.onPointerEnter, () => M), V = i(() => d.onKeyDown, () => M), ee = { computeThumbPosition: A };
+	return O(() => {
+		ge(), o.viewportElement()?.matches(":hover") && o.setHovering(!0);
+	}), D(() => {
+		S !== void 0 && clearTimeout(S), C !== void 0 && clearTimeout(C), o.viewportElement() === k && o.setViewportElement(void 0);
+	}), l(le, {
+		value: ee,
+		get children() {
+			return l(c, m({
+				get component() {
+					return e.as ?? "div";
+				},
+				ref: [((e) => {
+					k = e, o.setViewportElement(e);
+				}), d.ref],
+				get class() {
+					return h();
+				},
+				get style() {
+					return g();
+				},
+				role: "presentation",
+				get "data-id"() {
+					return `${o.rootId}-viewport`;
+				},
+				get tabindex() {
+					return o.hiddenState().x && o.hiddenState().y ? -1 : 0;
+				},
+				onScroll: F,
+				onWheel: L,
+				onPointerMove: z,
+				onPointerEnter: B,
+				onKeyDown: V
+			}, _, f, { get children() {
+				return d.children;
+			} }));
+		}
+	});
+}
+function me(e) {
+	let t = e.clientHeight >= e.scrollHeight, n = e.clientWidth >= e.scrollWidth;
+	return {
+		x: n,
+		y: t,
+		corner: n || t
+	};
+}
+function he(e, t, n, r, i, a, o) {
+	let s = Math.max(0, Math.min(n, r)), c = n - s, l = Math.max(16, a * i / (i + Math.abs(c)));
+	return e.style.setProperty(t, c ? `${l}px` : ""), (r ? s / r * o : 0) + (c > 0 ? a - l : 0);
+}
+function ge() {
+	if (!(fe || _e())) {
+		if (typeof CSS < "u" && "registerProperty" in CSS) for (let e of de) try {
+			CSS.registerProperty({
+				name: e,
+				syntax: "<length>",
+				inherits: !1,
+				initialValue: "0px"
+			});
+		} catch {}
+		fe = !0;
+	}
+}
+function _e() {
+	return typeof CSS < "u" && !!CSS.supports?.("-webkit-backdrop-filter:none");
+}
+//#endregion
+//#region src/scroll-area/scrollbar/ScrollAreaScrollbarContext.ts
+var q = Symbol("ScrollAreaScrollbarContext"), J = y(q);
+function ve() {
+	let e = A(J);
+	if (e === q) throw Error("Base UI: ScrollAreaScrollbarContext is missing. ScrollAreaScrollbar parts must be placed within <ScrollArea.Scrollbar>.");
+	return e;
+}
+//#endregion
+//#region src/scroll-area/scrollbar/ScrollAreaScrollbar.tsx
+function ye(e) {
+	let o = I(), u = a(), d = e, f = e, [p, h] = C(), g = E(f, "as", "children", "class", "keepMounted", "onPointerCancel", "onPointerDown", "onPointerUp", "orientation", "ref", "style"), _ = x(() => d.orientation ?? "vertical"), y = x(() => _() === "vertical"), w = x(() => y() ? o.hiddenState().y : o.hiddenState().x), T = x(() => (d.keepMounted ?? !1) || !w()), D = x(() => !o.hasMeasuredScrollbar() && !(d.keepMounted ?? !1)), O = x(() => ({
+		...o.state(),
+		hovering: o.hovering(),
+		scrolling: y() ? o.scrollingY() : o.scrollingX(),
+		orientation: _()
+	})), A = x(() => n(e.class, O())), P = x(() => {
+		let t = o.thumbSize(), n = r(e.style, O()), i = y() ? `top:0;bottom:var(--scroll-area-corner-height);inset-inline-end:0;--scroll-area-thumb-height:${t.height}px;` : `inset-inline-start:0;inset-inline-end:var(--scroll-area-corner-width);bottom:0;--scroll-area-thumb-width:${t.width}px;`;
+		return typeof n == "string" ? `position:absolute;touch-action:none;-webkit-user-select:none;user-select:none;visibility:${D() ? "hidden" : "visible"};${i}${n}` : s({
+			position: "absolute",
+			"touch-action": "none",
+			"-webkit-user-select": "none",
+			"user-select": "none",
+			visibility: D() ? "hidden" : void 0,
+			...y() ? {
+				top: 0,
+				bottom: "var(--scroll-area-corner-height)",
+				"inset-inline-end": 0,
+				"--scroll-area-thumb-height": `${t.height}px`
+			} : {
+				"inset-inline-start": 0,
+				"inset-inline-end": "var(--scroll-area-corner-width)",
+				bottom: 0,
+				"--scroll-area-thumb-width": `${t.width}px`
+			}
+		}, n === !1 ? void 0 : n);
+	}), F = x(() => t(O(), R));
+	b(() => ({
+		element: p(),
+		render: T(),
+		vertical: y()
+	}), (e) => {
+		if (!e.element || !e.render) return;
+		let t = e.vertical ? o.setScrollbarYElement : o.setScrollbarXElement, n = e.vertical ? o.scrollbarYElement : o.scrollbarXElement;
+		return t(e.element), () => {
+			k(n) === e.element && t(void 0);
+		};
+	}), b(() => ({
+		direction: u(),
+		render: T(),
+		scrollbar: p(),
+		vertical: y(),
+		viewport: o.viewportElement()
+	}), (e) => {
+		if (!e.render || !e.scrollbar || !e.viewport) return;
+		let t = e.viewport, n = e.scrollbar, r = () => ae(n, "wheel", (n) => {
+			if (n.ctrlKey) return;
+			let r = !e.vertical, i = r ? n.deltaX : n.deltaY;
+			if (i === 0) return;
+			let a = r ? t.scrollWidth - t.clientWidth : t.scrollHeight - t.clientHeight, s = r && e.direction === "rtl" ? -a : 0, c = r && e.direction === "rtl" ? 0 : a, l = r ? t.scrollLeft : t.scrollTop;
+			if (l <= s && i < 0 || l >= c && i > 0) return;
+			n.preventDefault();
+			let u = Math.min(c, Math.max(s, l + i));
+			r ? t.scrollLeft = u : t.scrollTop = u, o.handleScroll({
+				x: t.scrollLeft,
+				y: t.scrollTop
+			});
+		}, { passive: !1 });
+		return S((e) => {
+			let t = r();
+			return () => {
+				t(), e();
+			};
+		});
+	});
+	function L(e) {
+		if (e.button !== 0) return;
+		let t = y() ? o.thumbYElement() : o.thumbXElement();
+		if (t && M(t, j(e))) return;
+		let n = o.viewportElement(), r = p();
+		if (!n || !t || !r) return;
+		let i = y() ? "y" : "x", a = N(t, "margin", i), s = N(r, "padding", i), c = y() ? t.offsetHeight : t.offsetWidth, l = r.getBoundingClientRect(), d = y() ? e.clientY - l.top - c / 2 - s + a / 2 : e.clientX - l.left - c / 2 - s + a / 2, f = y() ? n.scrollHeight : n.scrollWidth, m = y() ? n.clientHeight : n.clientWidth, h = (y() ? r.offsetHeight : r.offsetWidth) - c - s - a;
+		if (h <= 0) return;
+		let g = d / h, v = f - m;
+		o.disableViewportSnap(), y() ? n.scrollTop = g * v : n.scrollLeft = u() === "rtl" ? -(1 - g) * v : g * v, o.handleScroll({
+			x: n.scrollLeft,
+			y: n.scrollTop
+		}), o.handlePointerDown(e, _());
+	}
+	let z = i(() => d.onPointerDown, () => L), B = i(() => d.onPointerUp, () => o.handlePointerUp), V = i(() => d.onPointerCancel, () => o.handlePointerUp);
+	return l(v, {
+		get when() {
+			return T();
+		},
+		get children() {
+			return l(J, {
+				value: _,
+				get children() {
+					return l(c, m({
+						get component() {
+							return e.as ?? "div";
+						},
+						ref: [((e) => h(e)), d.ref],
+						get class() {
+							return A();
+						},
+						get style() {
+							return P();
+						},
+						get "data-id"() {
+							return `${o.rootId}-scrollbar`;
+						},
+						onPointerDown: z,
+						onPointerUp: B,
+						onPointerCancel: V
+					}, F, g, { get children() {
+						return d.children;
+					} }));
+				}
+			});
+		}
+	});
+}
+//#endregion
+//#region src/scroll-area/content/ScrollAreaContent.tsx
+function be(e) {
+	let i = ue(), a = I(), o = e, u = E(e, "as", "children", "class", "ref", "style"), d = x(() => a.state()), f = x(() => n(e.class, d())), p = x(() => {
+		let t = r(e.style, d());
+		return typeof t == "string" ? `min-width:fit-content;${t}` : s({ "min-width": "fit-content" }, t === !1 ? void 0 : t);
+	}), h = x(() => t(d(), R)), g = k(a.hasMeasuredScrollbar), _, v = !1, [y, S] = C(), w = typeof ResizeObserver > "u" ? void 0 : K((e) => {
+		!_ || !e.some((e) => e.target === _) || !v && (v = !0, !g) || i.computeThumbPosition();
+	});
+	return b(y, (e) => {
+		if (!(!e || !w)) return _ = e, v = !1, w.observe(e), () => {
+			w.unobserve(e), _ === e && (_ = void 0);
+		};
+	}), l(c, m({
+		get component() {
+			return e.as ?? "div";
+		},
+		ref: [((e) => S(e)), o.ref],
+		get class() {
+			return f();
+		},
+		get style() {
+			return p();
+		},
+		role: "presentation"
+	}, h, u, { get children() {
+		return o.children;
+	} }));
+}
+//#endregion
+//#region src/scroll-area/thumb/ScrollAreaThumb.tsx
+function xe(e) {
+	let a = I(), o = ve(), u = e, d = e, [f, p] = C(), h = E(d, "as", "children", "class", "onPointerCancel", "onPointerDown", "onPointerMove", "onPointerUp", "ref", "style"), g = x(() => o() === "vertical"), _ = x(() => ({
+		scrolling: g() ? a.scrollingY() : a.scrollingX(),
+		orientation: o()
+	})), v = x(() => n(e.class, _())), y = x(() => {
+		let t = r(e.style, _()), n = g() ? "height:var(--scroll-area-thumb-height);" : "width:var(--scroll-area-thumb-width);";
+		return typeof t == "string" ? `visibility:${a.hasMeasuredScrollbar() ? "visible" : "hidden"};${n}${t}` : s({
+			visibility: a.hasMeasuredScrollbar() ? void 0 : "hidden",
+			...g() ? { height: "var(--scroll-area-thumb-height)" } : { width: "var(--scroll-area-thumb-width)" }
+		}, t === !1 ? void 0 : t);
+	}), S = x(() => t(_()));
+	b(() => ({
+		element: f(),
+		vertical: g()
+	}), (e) => {
+		if (!e.element) return;
+		let t = e.vertical ? a.setThumbYElement : a.setThumbXElement, n = e.vertical ? a.thumbYElement : a.thumbXElement;
+		return t(e.element), () => {
+			k(n) === e.element && t(void 0);
+		};
+	});
+	let w = i(() => u.onPointerDown, () => (e) => a.handlePointerDown(e, o())), T = i(() => u.onPointerMove, () => a.handlePointerMove), D = i(() => u.onPointerUp, () => a.handlePointerUp), O = i(() => u.onPointerCancel, () => a.handlePointerUp);
+	return l(c, m({
+		get component() {
+			return e.as ?? "div";
+		},
+		ref: [((e) => p(e)), u.ref],
+		get class() {
+			return v();
+		},
+		get style() {
+			return y();
+		},
+		onPointerDown: w,
+		onPointerMove: T,
+		onPointerUp: D,
+		onPointerCancel: O
+	}, S, h, { get children() {
+		return u.children;
+	} }));
+}
+//#endregion
+//#region src/scroll-area/corner/ScrollAreaCorner.tsx
+function Y(e) {
+	let t = I(), i = e, a = e, [o, u] = C(), d = E(a, "as", "children", "class", "ref", "style"), f = {}, p = x(() => !t.hiddenState().corner), h = x(() => n(e.class, f)), g = x(() => {
+		let n = t.cornerSize(), i = r(e.style, f);
+		return typeof i == "string" ? `position:absolute;bottom:0;inset-inline-end:0;width:${n.width}px;height:${n.height}px;${i}` : s({
+			position: "absolute",
+			bottom: 0,
+			"inset-inline-end": 0,
+			width: `${n.width}px`,
+			height: `${n.height}px`
+		}, i === !1 ? void 0 : i);
+	});
+	return b(() => ({
+		element: o(),
+		render: p()
+	}), (e) => {
+		if (!e.element || !e.render) {
+			e.render || t.setCornerSize({
+				width: 0,
+				height: 0
+			});
+			return;
+		}
+		return t.setCornerElement(e.element), () => {
+			k(t.cornerElement) === e.element && t.setCornerElement(void 0);
+		};
+	}), l(v, {
+		get when() {
+			return p();
+		},
+		get children() {
+			return l(c, m({
+				get component() {
+					return e.as ?? "div";
+				},
+				ref: [((e) => u(e)), i.ref],
+				get class() {
+					return h();
+				},
+				get style() {
+					return g();
+				}
+			}, d, { get children() {
+				return i.children;
+			} }));
+		}
+	});
+}
+//#endregion
+//#region src/scroll-area/index.parts.ts
+var X = /* @__PURE__ */ e({
+	Content: () => be,
+	Corner: () => Y,
+	Root: () => H,
+	Scrollbar: () => ye,
+	Thumb: () => xe,
+	Viewport: () => pe
+});
+//#endregion
+export { X as t };