@factorialco/f0-react 12.10.0 → 12.12.0

package/dist/scrollarea-cxaFAWG5.js

@@ -0,0 +1,691 @@
+import { L as e } from "./tooltip-BX4dSfeL.js";
+import { i as t, r as n } from "./F0Button-d91IgOnc.js";
+import { o as r } from "./F0Icon-DmCBV0gK.js";
+import { E as i, O as a, T as o, b as s, p as c, w as l, y as u } from "./popover-ics24JxK.js";
+import * as d from "react";
+import { createElement as f, forwardRef as p, useEffect as m, useRef as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/elements/Text/variants.ts
+var y = r({
+	base: "text-base text-f1-foreground",
+	variants: {
+		variant: {
+			heading: "text-lg font-semibold",
+			body: "",
+			description: "text-f1-foreground-secondary",
+			small: "text-sm font-medium text-f1-foreground-secondary",
+			inverse: "text-f1-foreground-inverse",
+			code: "text-f1-foreground-secondary",
+			label: "font-medium",
+			"heading-large": "text-2xl font-semibold",
+			"label-input": "font-medium text-f1-foreground-secondary",
+			selected: "font-medium text-f1-foreground-selected",
+			warning: "text-f1-foreground-warning",
+			critical: "text-f1-foreground-critical",
+			positive: "text-f1-foreground-positive",
+			info: "text-f1-foreground-info",
+			"warning-strong": "font-semibold text-f1-foreground-warning",
+			"critical-strong": "font-semibold text-f1-foreground-critical",
+			"positive-strong": "font-semibold text-f1-foreground-positive",
+			"info-strong": "font-semibold text-f1-foreground-info"
+		},
+		align: {
+			left: "text-left",
+			center: "text-center",
+			right: "text-right"
+		}
+	},
+	defaultVariants: {
+		variant: "body",
+		align: "left"
+	}
+}), b = {
+	"heading-large": "h1",
+	heading: "h2",
+	body: "p",
+	description: "p",
+	label: "p",
+	"label-input": "label",
+	small: "p",
+	selected: "p",
+	inverse: "p",
+	warning: "p",
+	critical: "p",
+	positive: "p",
+	info: "p",
+	"warning-strong": "p",
+	"critical-strong": "p",
+	"positive-strong": "p",
+	"info-strong": "p",
+	code: "code"
+}, x = p(({ content: r, variant: i, align: a, className: o, as: s, ellipsis: c, noEllipsisTooltip: l, markdown: u, required: d, ...p }, m) => {
+	let h = s ?? b[i ?? "body"], g = d ? /* @__PURE__ */ _("span", {
+		className: "text-f1-foreground-critical",
+		"aria-hidden": "true",
+		children: " *"
+	}) : null;
+	if (c !== void 0) {
+		let t = typeof c == "number" ? c : 1;
+		return g ? f(h, {
+			...p,
+			className: e(y({
+				variant: i,
+				align: a
+			}), o, "inline-flex gap-0.5"),
+			ref: m
+		}, /* @__PURE__ */ _(n, {
+			lines: t,
+			noTooltip: l,
+			tag: "span",
+			className: "min-w-0",
+			markdown: u,
+			children: r
+		}), g) : /* @__PURE__ */ _(n, {
+			ref: m,
+			lines: t,
+			noTooltip: l,
+			tag: h,
+			className: e(y({
+				variant: i,
+				align: a
+			}), o),
+			markdown: u,
+			...p,
+			children: r
+		});
+	}
+	if (u) {
+		let n = t(r);
+		return g ? f(h, {
+			...p,
+			className: e(y({
+				variant: i,
+				align: a
+			}), o),
+			ref: m
+		}, /* @__PURE__ */ _("span", { dangerouslySetInnerHTML: { __html: n } }), g) : f(h, {
+			...p,
+			className: e(y({
+				variant: i,
+				align: a
+			}), o),
+			ref: m,
+			dangerouslySetInnerHTML: { __html: n }
+		});
+	}
+	return f(h, {
+		...p,
+		className: e(y({
+			variant: i,
+			align: a
+		}), o),
+		ref: m
+	}, r, g);
+});
+x.displayName = "Text";
+//#endregion
+//#region ../../node_modules/.pnpm/@radix-ui+react-direction@1.1.0_@types+react@18.3.18_react@18.3.1/node_modules/@radix-ui/react-direction/dist/index.mjs
+var S = d.createContext(void 0);
+function C(e) {
+	let t = d.useContext(S);
+	return e || t || "ltr";
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@radix-ui+number@1.1.0/node_modules/@radix-ui/number/dist/index.mjs
+function w(e, [t, n]) {
+	return Math.min(n, Math.max(t, e));
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@radix-ui+react-scroll-area@1.2.2_@types+react-dom@18.3.1_@types+react@18.3.18_react-do_d1c2e430632c5110d1500ba7deeafccd/node_modules/@radix-ui/react-scroll-area/dist/index.mjs
+function T(e, t) {
+	return d.useReducer((e, n) => t[e][n] ?? e, e);
+}
+var E = "ScrollArea", [D, O] = a(E), [k, A] = D(E), j = d.forwardRef((e, t) => {
+	let { __scopeScrollArea: n, type: r = "hover", dir: i, scrollHideDelay: a = 600, ...o } = e, [c, u] = d.useState(null), [f, p] = d.useState(null), [m, h] = d.useState(null), [g, v] = d.useState(null), [y, b] = d.useState(null), [x, S] = d.useState(0), [w, T] = d.useState(0), [E, D] = d.useState(!1), [O, A] = d.useState(!1), j = l(t, (e) => u(e)), M = C(i);
+	return /* @__PURE__ */ _(k, {
+		scope: n,
+		type: r,
+		dir: M,
+		scrollHideDelay: a,
+		scrollArea: c,
+		viewport: f,
+		onViewportChange: p,
+		content: m,
+		onContentChange: h,
+		scrollbarX: g,
+		onScrollbarXChange: v,
+		scrollbarXEnabled: E,
+		onScrollbarXEnabledChange: D,
+		scrollbarY: y,
+		onScrollbarYChange: b,
+		scrollbarYEnabled: O,
+		onScrollbarYEnabledChange: A,
+		onCornerWidthChange: S,
+		onCornerHeightChange: T,
+		children: /* @__PURE__ */ _(s.div, {
+			dir: M,
+			...o,
+			ref: j,
+			style: {
+				position: "relative",
+				"--radix-scroll-area-corner-width": x + "px",
+				"--radix-scroll-area-corner-height": w + "px",
+				...e.style
+			}
+		})
+	});
+});
+j.displayName = E;
+var M = "ScrollAreaViewport", N = d.forwardRef((e, t) => {
+	let { __scopeScrollArea: n, children: r, nonce: i, ...a } = e, o = A(M, n), c = d.useRef(null), u = l(t, c, o.onViewportChange);
+	return /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("style", {
+		dangerouslySetInnerHTML: { __html: "[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}" },
+		nonce: i
+	}), /* @__PURE__ */ _(s.div, {
+		"data-radix-scroll-area-viewport": "",
+		...a,
+		ref: u,
+		style: {
+			overflowX: o.scrollbarXEnabled ? "scroll" : "hidden",
+			overflowY: o.scrollbarYEnabled ? "scroll" : "hidden",
+			...e.style
+		},
+		children: /* @__PURE__ */ _("div", {
+			ref: o.onContentChange,
+			style: {
+				minWidth: "100%",
+				display: "table"
+			},
+			children: r
+		})
+	})] });
+});
+N.displayName = M;
+var P = "ScrollAreaScrollbar", F = d.forwardRef((e, t) => {
+	let { forceMount: n, ...r } = e, i = A(P, e.__scopeScrollArea), { onScrollbarXEnabledChange: a, onScrollbarYEnabledChange: o } = i, s = e.orientation === "horizontal";
+	return d.useEffect(() => (s ? a(!0) : o(!0), () => {
+		s ? a(!1) : o(!1);
+	}), [
+		s,
+		a,
+		o
+	]), i.type === "hover" ? /* @__PURE__ */ _(ee, {
+		...r,
+		ref: t,
+		forceMount: n
+	}) : i.type === "scroll" ? /* @__PURE__ */ _(te, {
+		...r,
+		ref: t,
+		forceMount: n
+	}) : i.type === "auto" ? /* @__PURE__ */ _(ne, {
+		...r,
+		ref: t,
+		forceMount: n
+	}) : i.type === "always" ? /* @__PURE__ */ _(I, {
+		...r,
+		ref: t
+	}) : null;
+});
+F.displayName = P;
+var ee = d.forwardRef((e, t) => {
+	let { forceMount: n, ...r } = e, i = A(P, e.__scopeScrollArea), [a, o] = d.useState(!1);
+	return d.useEffect(() => {
+		let e = i.scrollArea, t = 0;
+		if (e) {
+			let n = () => {
+				window.clearTimeout(t), o(!0);
+			}, r = () => {
+				t = window.setTimeout(() => o(!1), i.scrollHideDelay);
+			};
+			return e.addEventListener("pointerenter", n), e.addEventListener("pointerleave", r), () => {
+				window.clearTimeout(t), e.removeEventListener("pointerenter", n), e.removeEventListener("pointerleave", r);
+			};
+		}
+	}, [i.scrollArea, i.scrollHideDelay]), /* @__PURE__ */ _(c, {
+		present: n || a,
+		children: /* @__PURE__ */ _(ne, {
+			"data-state": a ? "visible" : "hidden",
+			...r,
+			ref: t
+		})
+	});
+}), te = d.forwardRef((e, t) => {
+	let { forceMount: n, ...r } = e, i = A(P, e.__scopeScrollArea), a = e.orientation === "horizontal", o = Y(() => l("SCROLL_END"), 100), [s, l] = T("hidden", {
+		hidden: { SCROLL: "scrolling" },
+		scrolling: {
+			SCROLL_END: "idle",
+			POINTER_ENTER: "interacting"
+		},
+		interacting: {
+			SCROLL: "interacting",
+			POINTER_LEAVE: "idle"
+		},
+		idle: {
+			HIDE: "hidden",
+			SCROLL: "scrolling",
+			POINTER_ENTER: "interacting"
+		}
+	});
+	return d.useEffect(() => {
+		if (s === "idle") {
+			let e = window.setTimeout(() => l("HIDE"), i.scrollHideDelay);
+			return () => window.clearTimeout(e);
+		}
+	}, [
+		s,
+		i.scrollHideDelay,
+		l
+	]), d.useEffect(() => {
+		let e = i.viewport, t = a ? "scrollLeft" : "scrollTop";
+		if (e) {
+			let n = e[t], r = () => {
+				let r = e[t];
+				n !== r && (l("SCROLL"), o()), n = r;
+			};
+			return e.addEventListener("scroll", r), () => e.removeEventListener("scroll", r);
+		}
+	}, [
+		i.viewport,
+		a,
+		l,
+		o
+	]), /* @__PURE__ */ _(c, {
+		present: n || s !== "hidden",
+		children: /* @__PURE__ */ _(I, {
+			"data-state": s === "hidden" ? "hidden" : "visible",
+			...r,
+			ref: t,
+			onPointerEnter: u(e.onPointerEnter, () => l("POINTER_ENTER")),
+			onPointerLeave: u(e.onPointerLeave, () => l("POINTER_LEAVE"))
+		})
+	});
+}), ne = d.forwardRef((e, t) => {
+	let n = A(P, e.__scopeScrollArea), { forceMount: r, ...i } = e, [a, o] = d.useState(!1), s = e.orientation === "horizontal", l = Y(() => {
+		if (n.viewport) {
+			let e = n.viewport.offsetWidth < n.viewport.scrollWidth, t = n.viewport.offsetHeight < n.viewport.scrollHeight;
+			o(s ? e : t);
+		}
+	}, 10);
+	return X(n.viewport, l), X(n.content, l), /* @__PURE__ */ _(c, {
+		present: r || a,
+		children: /* @__PURE__ */ _(I, {
+			"data-state": a ? "visible" : "hidden",
+			...i,
+			ref: t
+		})
+	});
+}), I = d.forwardRef((e, t) => {
+	let { orientation: n = "vertical", ...r } = e, i = A(P, e.__scopeScrollArea), a = d.useRef(null), o = d.useRef(0), [s, c] = d.useState({
+		content: 0,
+		viewport: 0,
+		scrollbar: {
+			size: 0,
+			paddingStart: 0,
+			paddingEnd: 0
+		}
+	}), l = W(s.viewport, s.content), u = {
+		...r,
+		sizes: s,
+		onSizesChange: c,
+		hasThumb: l > 0 && l < 1,
+		onThumbChange: (e) => a.current = e,
+		onThumbPointerUp: () => o.current = 0,
+		onThumbPointerDown: (e) => o.current = e
+	};
+	function f(e, t) {
+		return ce(e, o.current, s, t);
+	}
+	return n === "horizontal" ? /* @__PURE__ */ _(re, {
+		...u,
+		ref: t,
+		onThumbPositionChange: () => {
+			if (i.viewport && a.current) {
+				let e = i.viewport.scrollLeft, t = K(e, s, i.dir);
+				a.current.style.transform = `translate3d(${t}px, 0, 0)`;
+			}
+		},
+		onWheelScroll: (e) => {
+			i.viewport && (i.viewport.scrollLeft = e);
+		},
+		onDragScroll: (e) => {
+			i.viewport && (i.viewport.scrollLeft = f(e, i.dir));
+		}
+	}) : n === "vertical" ? /* @__PURE__ */ _(ie, {
+		...u,
+		ref: t,
+		onThumbPositionChange: () => {
+			if (i.viewport && a.current) {
+				let e = i.viewport.scrollTop, t = K(e, s);
+				a.current.style.transform = `translate3d(0, ${t}px, 0)`;
+			}
+		},
+		onWheelScroll: (e) => {
+			i.viewport && (i.viewport.scrollTop = e);
+		},
+		onDragScroll: (e) => {
+			i.viewport && (i.viewport.scrollTop = f(e));
+		}
+	}) : null;
+}), re = d.forwardRef((e, t) => {
+	let { sizes: n, onSizesChange: r, ...i } = e, a = A(P, e.__scopeScrollArea), [o, s] = d.useState(), c = d.useRef(null), u = l(t, c, a.onScrollbarXChange);
+	return d.useEffect(() => {
+		c.current && s(getComputedStyle(c.current));
+	}, [c]), /* @__PURE__ */ _(R, {
+		"data-orientation": "horizontal",
+		...i,
+		ref: u,
+		sizes: n,
+		style: {
+			bottom: 0,
+			left: a.dir === "rtl" ? "var(--radix-scroll-area-corner-width)" : 0,
+			right: a.dir === "ltr" ? "var(--radix-scroll-area-corner-width)" : 0,
+			"--radix-scroll-area-thumb-width": G(n) + "px",
+			...e.style
+		},
+		onThumbPointerDown: (t) => e.onThumbPointerDown(t.x),
+		onDragScroll: (t) => e.onDragScroll(t.x),
+		onWheelScroll: (t, n) => {
+			if (a.viewport) {
+				let r = a.viewport.scrollLeft + t.deltaX;
+				e.onWheelScroll(r), J(r, n) && t.preventDefault();
+			}
+		},
+		onResize: () => {
+			c.current && a.viewport && o && r({
+				content: a.viewport.scrollWidth,
+				viewport: a.viewport.offsetWidth,
+				scrollbar: {
+					size: c.current.clientWidth,
+					paddingStart: U(o.paddingLeft),
+					paddingEnd: U(o.paddingRight)
+				}
+			});
+		}
+	});
+}), ie = d.forwardRef((e, t) => {
+	let { sizes: n, onSizesChange: r, ...i } = e, a = A(P, e.__scopeScrollArea), [o, s] = d.useState(), c = d.useRef(null), u = l(t, c, a.onScrollbarYChange);
+	return d.useEffect(() => {
+		c.current && s(getComputedStyle(c.current));
+	}, [c]), /* @__PURE__ */ _(R, {
+		"data-orientation": "vertical",
+		...i,
+		ref: u,
+		sizes: n,
+		style: {
+			top: 0,
+			right: a.dir === "ltr" ? 0 : void 0,
+			left: a.dir === "rtl" ? 0 : void 0,
+			bottom: "var(--radix-scroll-area-corner-height)",
+			"--radix-scroll-area-thumb-height": G(n) + "px",
+			...e.style
+		},
+		onThumbPointerDown: (t) => e.onThumbPointerDown(t.y),
+		onDragScroll: (t) => e.onDragScroll(t.y),
+		onWheelScroll: (t, n) => {
+			if (a.viewport) {
+				let r = a.viewport.scrollTop + t.deltaY;
+				e.onWheelScroll(r), J(r, n) && t.preventDefault();
+			}
+		},
+		onResize: () => {
+			c.current && a.viewport && o && r({
+				content: a.viewport.scrollHeight,
+				viewport: a.viewport.offsetHeight,
+				scrollbar: {
+					size: c.current.clientHeight,
+					paddingStart: U(o.paddingTop),
+					paddingEnd: U(o.paddingBottom)
+				}
+			});
+		}
+	});
+}), [ae, L] = D(P), R = d.forwardRef((e, t) => {
+	let { __scopeScrollArea: n, sizes: r, hasThumb: a, onThumbChange: o, onThumbPointerUp: c, onThumbPointerDown: f, onThumbPositionChange: p, onDragScroll: m, onWheelScroll: h, onResize: g, ...v } = e, y = A(P, n), [b, x] = d.useState(null), S = l(t, (e) => x(e)), C = d.useRef(null), w = d.useRef(""), T = y.viewport, E = r.content - r.viewport, D = i(h), O = i(p), k = Y(g, 10);
+	function j(e) {
+		if (C.current) {
+			let t = e.clientX - C.current.left, n = e.clientY - C.current.top;
+			m({
+				x: t,
+				y: n
+			});
+		}
+	}
+	return d.useEffect(() => {
+		let e = (e) => {
+			let t = e.target;
+			b?.contains(t) && D(e, E);
+		};
+		return document.addEventListener("wheel", e, { passive: !1 }), () => document.removeEventListener("wheel", e, { passive: !1 });
+	}, [
+		T,
+		b,
+		E,
+		D
+	]), d.useEffect(O, [r, O]), X(b, k), X(y.content, k), /* @__PURE__ */ _(ae, {
+		scope: n,
+		scrollbar: b,
+		hasThumb: a,
+		onThumbChange: i(o),
+		onThumbPointerUp: i(c),
+		onThumbPositionChange: O,
+		onThumbPointerDown: i(f),
+		children: /* @__PURE__ */ _(s.div, {
+			...v,
+			ref: S,
+			style: {
+				position: "absolute",
+				...v.style
+			},
+			onPointerDown: u(e.onPointerDown, (e) => {
+				e.button === 0 && (e.target.setPointerCapture(e.pointerId), C.current = b.getBoundingClientRect(), w.current = document.body.style.webkitUserSelect, document.body.style.webkitUserSelect = "none", y.viewport && (y.viewport.style.scrollBehavior = "auto"), j(e));
+			}),
+			onPointerMove: u(e.onPointerMove, j),
+			onPointerUp: u(e.onPointerUp, (e) => {
+				let t = e.target;
+				t.hasPointerCapture(e.pointerId) && t.releasePointerCapture(e.pointerId), document.body.style.webkitUserSelect = w.current, y.viewport && (y.viewport.style.scrollBehavior = ""), C.current = null;
+			})
+		})
+	});
+}), z = "ScrollAreaThumb", B = d.forwardRef((e, t) => {
+	let { forceMount: n, ...r } = e, i = L(z, e.__scopeScrollArea);
+	return /* @__PURE__ */ _(c, {
+		present: n || i.hasThumb,
+		children: /* @__PURE__ */ _(oe, {
+			ref: t,
+			...r
+		})
+	});
+}), oe = d.forwardRef((e, t) => {
+	let { __scopeScrollArea: n, style: r, ...i } = e, a = A(z, n), o = L(z, n), { onThumbPositionChange: c } = o, f = l(t, (e) => o.onThumbChange(e)), p = d.useRef(void 0), m = Y(() => {
+		p.current &&= (p.current(), void 0);
+	}, 100);
+	return d.useEffect(() => {
+		let e = a.viewport;
+		if (e) {
+			let t = () => {
+				if (m(), !p.current) {
+					let t = le(e, c);
+					p.current = t, c();
+				}
+			};
+			return c(), e.addEventListener("scroll", t), () => e.removeEventListener("scroll", t);
+		}
+	}, [
+		a.viewport,
+		m,
+		c
+	]), /* @__PURE__ */ _(s.div, {
+		"data-state": o.hasThumb ? "visible" : "hidden",
+		...i,
+		ref: f,
+		style: {
+			width: "var(--radix-scroll-area-thumb-width)",
+			height: "var(--radix-scroll-area-thumb-height)",
+			...r
+		},
+		onPointerDownCapture: u(e.onPointerDownCapture, (e) => {
+			let t = e.target.getBoundingClientRect(), n = e.clientX - t.left, r = e.clientY - t.top;
+			o.onThumbPointerDown({
+				x: n,
+				y: r
+			});
+		}),
+		onPointerUp: u(e.onPointerUp, o.onThumbPointerUp)
+	});
+});
+B.displayName = z;
+var V = "ScrollAreaCorner", H = d.forwardRef((e, t) => {
+	let n = A(V, e.__scopeScrollArea), r = !!(n.scrollbarX && n.scrollbarY);
+	return n.type !== "scroll" && r ? /* @__PURE__ */ _(se, {
+		...e,
+		ref: t
+	}) : null;
+});
+H.displayName = V;
+var se = d.forwardRef((e, t) => {
+	let { __scopeScrollArea: n, ...r } = e, i = A(V, n), [a, o] = d.useState(0), [c, l] = d.useState(0), u = !!(a && c);
+	return X(i.scrollbarX, () => {
+		let e = i.scrollbarX?.offsetHeight || 0;
+		i.onCornerHeightChange(e), l(e);
+	}), X(i.scrollbarY, () => {
+		let e = i.scrollbarY?.offsetWidth || 0;
+		i.onCornerWidthChange(e), o(e);
+	}), u ? /* @__PURE__ */ _(s.div, {
+		...r,
+		ref: t,
+		style: {
+			width: a,
+			height: c,
+			position: "absolute",
+			right: i.dir === "ltr" ? 0 : void 0,
+			left: i.dir === "rtl" ? 0 : void 0,
+			bottom: 0,
+			...e.style
+		}
+	}) : null;
+});
+function U(e) {
+	return e ? parseInt(e, 10) : 0;
+}
+function W(e, t) {
+	let n = e / t;
+	return isNaN(n) ? 0 : n;
+}
+function G(e) {
+	let t = W(e.viewport, e.content), n = e.scrollbar.paddingStart + e.scrollbar.paddingEnd, r = (e.scrollbar.size - n) * t;
+	return Math.max(r, 18);
+}
+function ce(e, t, n, r = "ltr") {
+	let i = G(n), a = i / 2, o = t || a, s = i - o, c = n.scrollbar.paddingStart + o, l = n.scrollbar.size - n.scrollbar.paddingEnd - s, u = n.content - n.viewport, d = r === "ltr" ? [0, u] : [u * -1, 0];
+	return q([c, l], d)(e);
+}
+function K(e, t, n = "ltr") {
+	let r = G(t), i = t.scrollbar.paddingStart + t.scrollbar.paddingEnd, a = t.scrollbar.size - i, o = t.content - t.viewport, s = a - r, c = w(e, n === "ltr" ? [0, o] : [o * -1, 0]);
+	return q([0, o], [0, s])(c);
+}
+function q(e, t) {
+	return (n) => {
+		if (e[0] === e[1] || t[0] === t[1]) return t[0];
+		let r = (t[1] - t[0]) / (e[1] - e[0]);
+		return t[0] + r * (n - e[0]);
+	};
+}
+function J(e, t) {
+	return e > 0 && e < t;
+}
+var le = (e, t = () => {}) => {
+	let n = {
+		left: e.scrollLeft,
+		top: e.scrollTop
+	}, r = 0;
+	return (function i() {
+		let a = {
+			left: e.scrollLeft,
+			top: e.scrollTop
+		}, o = n.left !== a.left, s = n.top !== a.top;
+		(o || s) && t(), n = a, r = window.requestAnimationFrame(i);
+	})(), () => window.cancelAnimationFrame(r);
+};
+function Y(e, t) {
+	let n = i(e), r = d.useRef(0);
+	return d.useEffect(() => () => window.clearTimeout(r.current), []), d.useCallback(() => {
+		window.clearTimeout(r.current), r.current = window.setTimeout(n, t);
+	}, [n, t]);
+}
+function X(e, t) {
+	let n = i(t);
+	o(() => {
+		let t = 0;
+		if (e) {
+			let r = new ResizeObserver(() => {
+				cancelAnimationFrame(t), t = window.requestAnimationFrame(n);
+			});
+			return r.observe(e), () => {
+				window.cancelAnimationFrame(t), r.unobserve(e);
+			};
+		}
+	}, [e, n]);
+}
+var Z = j, ue = N, de = H, Q = p(({ className: t, children: n, showBar: r = !0, viewportRef: i, onScrollTop: a, onScrollBottom: o, focusableViewport: s = !0, scrollMargin: c = 0, ...l }, u) => {
+	let d = h(null), f = i ?? d;
+	return m(() => {
+		let e = (e) => {
+			let { scrollTop: t, scrollHeight: n, clientHeight: r } = e.target;
+			t - c <= 0 && a && a(), t + r + c >= n && o && o();
+		}, t = f.current;
+		return t?.addEventListener("scroll", e), () => {
+			t?.removeEventListener("scroll", e);
+		};
+	}, [
+		f.current,
+		o,
+		a,
+		c
+	]), /* @__PURE__ */ v(Z, {
+		ref: u,
+		className: e("relative overflow-hidden", t),
+		scrollHideDelay: 200,
+		...l,
+		children: [
+			/* @__PURE__ */ _(ue, {
+				ref: f,
+				className: "size-full snap-none rounded-[inherit] [&>div]:!block",
+				tabIndex: s ? 0 : void 0,
+				"data-scroll-container": !0,
+				children: n
+			}),
+			/* @__PURE__ */ _($, {
+				orientation: "vertical",
+				showBar: r
+			}),
+			/* @__PURE__ */ _($, {
+				orientation: "horizontal",
+				showBar: r
+			}),
+			/* @__PURE__ */ _(de, {})
+		]
+	});
+});
+Q.displayName = "ScrollAreaImpl";
+var fe = p((e, t) => /* @__PURE__ */ _(Q, {
+	ref: t,
+	...e,
+	focusableViewport: !0
+}));
+fe.displayName = Z.displayName;
+var pe = p((e, t) => /* @__PURE__ */ _(Q, {
+	ref: t,
+	...e,
+	focusableViewport: !1
+}));
+pe.displayName = Z.displayName;
+var $ = p(({ className: t, orientation: n = "vertical", showBar: r = !0, ...i }, a) => /* @__PURE__ */ _(F, {
+	ref: a,
+	orientation: n,
+	className: e("group/scrollbar z-50 flex touch-none select-none p-[1px]", "transition-opacity data-[state=hidden]:pointer-events-none data-[state=visible]:pointer-events-auto data-[state=hidden]:opacity-0 data-[state=visible]:opacity-100", n === "vertical" && "h-full w-2", n === "horizontal" && "h-2 flex-col", t),
+	...i,
+	children: r ? /* @__PURE__ */ _(B, { className: "relative flex-1 rounded-full bg-f1-background-inverse opacity-30 transition-opacity group-hover/scrollbar:opacity-50" }) : null
+}));
+$.displayName = F.displayName;
+//#endregion
+export { Z as a, x as c, de as i, y as l, fe as n, ue as o, $ as r, C as s, pe as t };