haze-ui 1.32.0 → 1.34.0

package/dist/components/Schedule/Schedule.js

@@ -0,0 +1,566 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { LocaleContext as t } from "../LocaleProvider/LocaleContext.js";
+import { getDirection as n, useDirection as r } from "../../utils/direction.js";
+import i from "../Button/Button.js";
+import a from "../Segmented/Segmented.js";
+/* empty css                   */
+import { useContext as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useControl as p } from "react-use-control";
+//#region src/lib/components/Schedule/Schedule.tsx
+var ee = 6e4, te = 24, m = 56, ne = 1344, h = 1440, re = 3, g = 4, ie = 6e4, _ = (e, t, n) => Math.min(Math.max(e, t), n);
+function v(e) {
+	return e instanceof Date ? e : new Date(e);
+}
+function y(e) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate());
+}
+function ae(e) {
+	let t = y(e);
+	return new Date(t.getFullYear(), t.getMonth(), t.getDate() + 1);
+}
+function b(e, t) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate() + t, e.getHours(), e.getMinutes());
+}
+function x(e, t) {
+	return new Date(e.getFullYear(), e.getMonth(), e.getDate(), e.getHours(), e.getMinutes() + t);
+}
+function oe(e, t) {
+	let n = new Date(e.getFullYear(), e.getMonth() + t, 1), r = new Date(n.getFullYear(), n.getMonth() + 1, 0).getDate();
+	return n.setDate(Math.min(e.getDate(), r)), n;
+}
+function S(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+}
+function C(e) {
+	return e.getHours() * 60 + e.getMinutes();
+}
+function w(e) {
+	let t = (e) => String(e).padStart(2, "0");
+	return `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())}`;
+}
+function T(e) {
+	return e == null || typeof e == "boolean" ? "" : typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(T).filter(Boolean).join(" ") : typeof e == "object" && "props" in e ? T(e.props?.children) : "";
+}
+function se(e, t) {
+	let n = t > 0 ? t : 60, r = Math.round(C(e) / n) * n;
+	return r >= h ? new Date(e.getFullYear(), e.getMonth(), e.getDate() + 1) : new Date(e.getFullYear(), e.getMonth(), e.getDate(), 0, r);
+}
+function E(e, t) {
+	let n = Math.max(t.days.length - 1, 0), r = _(e.dayIndex, 0, n) - t.grabDayIndex, i = t.eventEnd.getTime() - t.eventStart.getTime(), a = se(x(b(t.eventStart, r), e.minutes - t.grabMinutes), t.slotMinutes);
+	return {
+		start: a,
+		end: new Date(a.getTime() + i)
+	};
+}
+function ce(e, t) {
+	let n = [];
+	return t.forEach((t, r) => {
+		let i = ae(t), a = e.filter((e) => !e.allDay && S(y(v(e.start)), t)).map((e) => {
+			let t = v(e.start), n = v(e.end);
+			return {
+				event: e,
+				start: t,
+				end: n > i ? i : n
+			};
+		}).sort((e, t) => e.start.getTime() - t.start.getTime() || e.end.getTime() - t.end.getTime()), o = [], s = a.map((e) => {
+			let t = o.findIndex((t) => t <= e.start.getTime());
+			return t === -1 ? (t = o.length, o.push(e.end.getTime())) : o[t] = Math.max(o[t] ?? e.end.getTime(), e.end.getTime()), {
+				...e,
+				dayIndex: r,
+				column: t
+			};
+		}), c = Math.max(o.length, 1);
+		s.forEach((e) => n.push({
+			...e,
+			columns: c
+		}));
+	}), n;
+}
+function le(e, t) {
+	return e.filter((e) => e.allDay).map((e) => {
+		let n = y(v(e.start)), r = y(v(e.end)), i = t.findIndex((e) => e.getTime() >= n.getTime());
+		if (i === -1) return null;
+		let a = -1;
+		return t.forEach((e, t) => {
+			e.getTime() <= r.getTime() && (a = t);
+		}), a < i ? null : {
+			event: e,
+			startCol: i,
+			span: a - i + 1
+		};
+	}).filter((e) => e !== null).sort((e, t) => e.startCol - t.startCol);
+}
+var ue = "haze-Schedule__root", de = "haze-Schedule__toolbar", fe = "haze-Schedule__toolbarTitle", pe = "haze-Schedule__monthGrid", me = "haze-Schedule__monthWeekdays", he = "haze-Schedule__monthWeekday", ge = "haze-Schedule__monthRow", _e = "haze-Schedule__monthCell", ve = "haze-Schedule__monthCellOutside", ye = "haze-Schedule__monthDay", be = "haze-Schedule__monthDayToday", xe = "haze-Schedule__timeGrid", Se = "haze-Schedule__headerRow", Ce = "haze-Schedule__headerGutter", we = "haze-Schedule__headerColumns", Te = "haze-Schedule__dayHeaderCell", Ee = "haze-Schedule__dayHeaderNum", De = "haze-Schedule__dayHeaderNumToday", Oe = "haze-Schedule__allDayColumns", ke = "haze-Schedule__gridScroll", Ae = "haze-Schedule__bodyRow", je = "haze-Schedule__gutter", Me = "haze-Schedule__gutterLabel", Ne = "haze-Schedule__gridBody", Pe = "haze-Schedule__timeRow", Fe = "haze-Schedule__timeRowOff", Ie = "haze-Schedule__eventBlock", Le = "haze-Schedule__eventDragging", Re = "haze-Schedule__eventTime", ze = "haze-Schedule__eventTitle", Be = "haze-Schedule__allDayChip", Ve = "haze-Schedule__monthChip", He = "haze-Schedule__overflowChip", Ue = "haze-Schedule__nowLine", We = "haze-Schedule__nowDot", D = {
+	primary: "haze-Schedule__primary",
+	success: "haze-Schedule__success",
+	danger: "haze-Schedule__danger",
+	warning: "haze-Schedule__warning",
+	info: "haze-Schedule__info",
+	neutral: "haze-Schedule__neutral"
+};
+function O({ events: h, view: ae, onViewChange: se, date: O, onDateChange: Ge, slotMinutes: k, businessHours: A, nowIndicator: Ke = !0, onEventClick: j, onEventChange: qe, onDayClick: M, todayLabel: Je = "Today", prevLabel: Ye = "Previous", nextLabel: Xe = "Next", viewLabels: N, locale: Ze, classNames: P, className: Qe, ref: $e, ...et }) {
+	let [F, tt] = p(ae, "week"), [nt, rt] = p(O, /* @__PURE__ */ new Date()), it = o(t)?.locale, I = Ze ?? it, at = r() === "rtl", L = v(nt), R = y(L), z = R.getTime(), B = k !== void 0 && k > 0 ? k : 60, V = c(() => {
+		if (F === "month") return [];
+		let e = new Date(z);
+		if (F === "day") return [e];
+		let t = b(e, -e.getDay());
+		return Array.from({ length: 7 }, (e, n) => b(t, n));
+	}, [F, z]), H = c(() => {
+		let e = new Date(z), t = new Date(e.getFullYear(), e.getMonth(), 1), n = b(t, -t.getDay());
+		return Array.from({ length: 42 }, (e, t) => b(n, t));
+	}, [z]), U = c(() => {
+		let e = new Intl.DateTimeFormat(I ?? "default", { weekday: "short" }), t = new Date(z), n = new Date(t.getFullYear(), t.getMonth(), 1), r = b(n, -n.getDay());
+		return Array.from({ length: 7 }, (t, n) => e.format(b(r, n)));
+	}, [I, z]), ot = c(() => F === "month" ? [] : ce(h, V), [
+		h,
+		V,
+		F
+	]), W = c(() => F === "month" ? [] : le(h, V), [
+		h,
+		V,
+		F
+	]), G = c(() => {
+		let e = (e) => new Intl.DateTimeFormat(I ?? "default", e), t = new Date(z);
+		if (F === "month") return e({
+			month: "long",
+			year: "numeric"
+		}).format(t);
+		if (F === "day") return e({
+			weekday: "long",
+			month: "long",
+			day: "numeric",
+			year: "numeric"
+		}).format(t);
+		let n = e({
+			month: "short",
+			day: "numeric"
+		}), r = V[0] ?? t, i = V[V.length - 1] ?? t;
+		return `${n.format(r)} – ${n.format(i)}`;
+	}, [
+		F,
+		I,
+		z,
+		V
+	]), [K, st] = u(() => /* @__PURE__ */ new Date()), ct = V.findIndex((e) => S(e, K)), q = Ke && ct >= 0;
+	s(() => {
+		if (!q) return;
+		let e = window.setInterval(() => st(/* @__PURE__ */ new Date()), ie);
+		return () => window.clearInterval(e);
+	}, [q]);
+	let [lt, ut] = u(() => R), dt = l(null), ft = l(null), J = l(null), Y = l(!1), [X, pt] = u(null), mt = (e) => {
+		let t = F === "day" ? b(L, e) : F === "week" ? b(L, e * 7) : oe(L, e);
+		rt(t), Ge?.(t);
+	}, ht = () => {
+		let e = y(/* @__PURE__ */ new Date());
+		rt(e), Ge?.(e);
+	}, gt = (e) => {
+		let t = e;
+		tt(t), se?.(t);
+	}, Z = (e, t) => {
+		let r = ft.current;
+		if (!r) return null;
+		let i = r.getBoundingClientRect();
+		if (i.width <= 0) return null;
+		let a = _((t - i.top) / m * 60, 0, 1439), o = n(r) === "rtl" ? (i.right - e) / i.width : (e - i.left) / i.width;
+		return {
+			dayIndex: _(Math.floor(o * V.length), 0, V.length - 1),
+			minutes: a
+		};
+	}, _t = (e) => ({
+		days: V,
+		eventStart: e.start,
+		eventEnd: e.end,
+		grabDayIndex: e.grabDayIndex,
+		grabMinutes: e.grabMinutes,
+		slotMinutes: B
+	}), vt = (e, t, n, r) => {
+		if (r.button !== 0) return;
+		let i = Z(r.clientX, r.clientY);
+		i && (J.current = {
+			id: e.id,
+			pointerId: r.pointerId,
+			grabDayIndex: i.dayIndex,
+			grabMinutes: i.minutes,
+			startX: r.clientX,
+			startY: r.clientY,
+			start: t,
+			end: n
+		}, Y.current = !1, typeof r.currentTarget.setPointerCapture == "function" && r.currentTarget.setPointerCapture(r.pointerId));
+	}, yt = (e) => {
+		let t = J.current;
+		if (!t || e.pointerId !== t.pointerId) return;
+		(Math.abs(e.clientX - t.startX) > g || Math.abs(e.clientY - t.startY) > g) && (Y.current = !0);
+		let n = Z(e.clientX, e.clientY);
+		if (!n) return;
+		let { start: r, end: i } = E(n, _t(t));
+		pt({
+			id: t.id,
+			start: r,
+			end: i,
+			dayIndex: n.dayIndex
+		});
+	}, bt = (e) => {
+		let t = J.current;
+		if (!t || e.pointerId !== t.pointerId) return;
+		J.current = null;
+		let n = Z(e.clientX, e.clientY);
+		if (Y.current && n) {
+			let { start: e, end: r } = E(n, _t(t));
+			qe?.({
+				id: t.id,
+				start: e,
+				end: r
+			});
+		}
+		pt(null);
+	}, xt = (e) => {
+		if (Y.current) {
+			Y.current = !1;
+			return;
+		}
+		j?.(e);
+	}, St = (e, t, r, i) => {
+		let a = 0, o = 0;
+		switch (e.key) {
+			case "ArrowUp":
+				o = -B;
+				break;
+			case "ArrowDown":
+				o = B;
+				break;
+			case "ArrowRight":
+				a = n(e.currentTarget) === "rtl" ? -1 : 1;
+				break;
+			case "ArrowLeft":
+				a = n(e.currentTarget) === "rtl" ? 1 : -1;
+				break;
+			default: return;
+		}
+		e.preventDefault();
+		let s = i.getTime() - r.getTime(), c = x(b(r, a), o);
+		qe?.({
+			id: t.id,
+			start: c,
+			end: new Date(c.getTime() + s)
+		});
+	}, Ct = (e) => {
+		let t = e.target.closest("[data-slot=\"month-cell\"]");
+		if (!t) return;
+		let r = Number(t.dataset.index);
+		if (!Number.isInteger(r)) return;
+		let i = n(e.currentTarget) === "rtl", a = {
+			ArrowLeft: i ? 1 : -1,
+			ArrowRight: i ? -1 : 1,
+			ArrowUp: -7,
+			ArrowDown: 7
+		}[e.key];
+		if (a === void 0) return;
+		e.preventDefault();
+		let o = _(r + a, 0, H.length - 1), s = H[o];
+		s && (ut(s), dt.current?.querySelector(`[data-index="${o}"]`)?.focus());
+	}, Q = V.length > 0 ? 100 / V.length : 100, wt = Array.from({ length: te }, (e, t) => t), $ = c(() => {
+		let e = I ?? "default";
+		return {
+			hour: new Intl.DateTimeFormat(e, { hour: "numeric" }),
+			time: new Intl.DateTimeFormat(e, {
+				hour: "numeric",
+				minute: "2-digit"
+			}),
+			dayNum: new Intl.DateTimeFormat(e, { day: "numeric" }),
+			cell: new Intl.DateTimeFormat(e, {
+				weekday: "long",
+				year: "numeric",
+				month: "long",
+				day: "numeric"
+			})
+		};
+	}, [I]), Tt = c(() => [
+		{
+			value: "day",
+			label: N?.day ?? "Day"
+		},
+		{
+			value: "week",
+			label: N?.week ?? "Week"
+		},
+		{
+			value: "month",
+			label: N?.month ?? "Month"
+		}
+	], [N]), Et = (e, t, n) => {
+		let r = Q / n, i = e * Q + t * r;
+		return at ? 100 - i - r : i;
+	}, Dt = () => /* @__PURE__ */ f("div", {
+		"data-slot": "time-grid",
+		className: e([xe, P?.timeGrid]),
+		children: [
+			/* @__PURE__ */ f("div", {
+				"data-slot": "day-header",
+				className: Se,
+				children: [/* @__PURE__ */ d("div", {
+					className: Ce,
+					"aria-hidden": !0
+				}), /* @__PURE__ */ d("div", {
+					className: we,
+					style: { gridTemplateColumns: `repeat(${V.length}, minmax(0, 1fr))` },
+					children: V.map((t) => {
+						let n = S(t, K);
+						return /* @__PURE__ */ f("div", {
+							"data-slot": "day-header-cell",
+							className: Te,
+							children: [/* @__PURE__ */ d("span", { children: U[t.getDay()] ?? "" }), /* @__PURE__ */ d("span", {
+								className: e([Ee, n && De]),
+								children: $.dayNum.format(t)
+							})]
+						}, t.getTime());
+					})
+				})]
+			}),
+			W.length > 0 && /* @__PURE__ */ f("div", {
+				"data-slot": "all-day-row",
+				className: Se,
+				children: [/* @__PURE__ */ d("div", {
+					className: Ce,
+					"aria-hidden": !0
+				}), /* @__PURE__ */ d("div", {
+					className: Oe,
+					style: { gridTemplateColumns: `repeat(${V.length}, minmax(0, 1fr))` },
+					children: W.map((t) => /* @__PURE__ */ d("button", {
+						type: "button",
+						"data-slot": "event",
+						style: { gridColumn: `${t.startCol + 1} / span ${t.span}` },
+						"aria-label": T(t.event.title),
+						onClick: () => j?.(t.event),
+						className: e([
+							Be,
+							D[t.event.color ?? "primary"],
+							P?.event
+						]),
+						children: t.event.title
+					}, t.event.id))
+				})]
+			}),
+			/* @__PURE__ */ d("div", {
+				"data-slot": "grid-scroll",
+				className: ke,
+				children: /* @__PURE__ */ f("div", {
+					className: Ae,
+					children: [/* @__PURE__ */ d("div", {
+						"data-slot": "time-gutter",
+						className: je,
+						style: { blockSize: ne },
+						"aria-hidden": !0,
+						children: wt.map((e) => /* @__PURE__ */ d("span", {
+							"data-slot": "gutter-label",
+							className: Me,
+							style: { top: e * m },
+							children: $.hour.format(new Date(2026, 0, 1, e))
+						}, e))
+					}), /* @__PURE__ */ f("div", {
+						"data-slot": "grid-body",
+						ref: ft,
+						className: Ne,
+						style: { blockSize: ne },
+						children: [
+							wt.map((t) => {
+								let n = A !== void 0 && (t < A.start || t >= A.end);
+								return /* @__PURE__ */ d("div", {
+									"data-slot": "time-row",
+									"data-off-hours": n ? "" : void 0,
+									style: {
+										top: t * m,
+										blockSize: m
+									},
+									"aria-hidden": !0,
+									className: e([Pe, n && Fe])
+								}, t);
+							}),
+							ot.map((t) => {
+								let n = X?.id === t.event.id, r = n ? X.start : t.start, i = n ? X.end : t.end, a = n ? X.dayIndex : t.dayIndex, o = t.columns, s = Q / o, c = [T(t.event.title), `${$.time.format(r)} – ${$.time.format(i)}`].filter(Boolean).join(", ");
+								return /* @__PURE__ */ f("button", {
+									type: "button",
+									"data-slot": "event",
+									style: {
+										top: C(r) / 60 * m,
+										blockSize: (i.getTime() - r.getTime()) / ee / 60 * m,
+										left: `${Et(a, t.column, o)}%`,
+										inlineSize: `${s}%`
+									},
+									"aria-label": c,
+									onPointerDown: (e) => vt(t.event, t.start, t.end, e),
+									onPointerMove: yt,
+									onPointerUp: bt,
+									onPointerCancel: bt,
+									onKeyDown: (e) => St(e, t.event, t.start, t.end),
+									onClick: () => xt(t.event),
+									className: e([
+										Ie,
+										D[t.event.color ?? "primary"],
+										n && Le,
+										P?.event
+									]),
+									children: [/* @__PURE__ */ d("span", {
+										"data-slot": "event-time",
+										className: Re,
+										children: $.time.format(r)
+									}), /* @__PURE__ */ d("span", {
+										"data-slot": "event-title",
+										className: ze,
+										children: t.event.title
+									})]
+								}, t.event.id);
+							}),
+							q && /* @__PURE__ */ d("div", {
+								"data-slot": "now-indicator",
+								className: Ue,
+								style: {
+									top: C(K) / 60 * m,
+									left: `${Et(ct, 0, 1)}%`,
+									inlineSize: `${Q}%`
+								},
+								"aria-hidden": !0,
+								children: /* @__PURE__ */ d("span", {
+									"data-slot": "now-indicator-dot",
+									className: We
+								})
+							})
+						]
+					})]
+				})
+			})
+		]
+	}), Ot = () => {
+		let t = H.some((e) => S(e, lt)) ? lt : R, n = /* @__PURE__ */ new Map();
+		return h.forEach((e) => {
+			let t = w(y(v(e.start))), r = n.get(t);
+			r ? r.push(e) : n.set(t, [e]);
+		}), /* @__PURE__ */ f("div", {
+			"data-slot": "month-grid",
+			role: "grid",
+			"aria-label": G,
+			ref: dt,
+			onKeyDown: Ct,
+			className: e([pe, P?.monthGrid]),
+			children: [/* @__PURE__ */ d("div", {
+				role: "row",
+				className: me,
+				children: U.map((e) => /* @__PURE__ */ d("div", {
+					role: "columnheader",
+					"data-slot": "month-weekday",
+					className: he,
+					children: e
+				}, e))
+			}), Array.from({ length: H.length / 7 }, (r, i) => /* @__PURE__ */ d("div", {
+				role: "row",
+				className: ge,
+				children: H.slice(i * 7, i * 7 + 7).map((r, a) => {
+					let o = i * 7 + a, s = r.getMonth() !== L.getMonth(), c = S(r, K), l = n.get(w(r)) ?? [], u = l.slice(0, re), p = l.length - u.length;
+					return /* @__PURE__ */ f("div", {
+						role: "gridcell",
+						"data-slot": "month-cell",
+						"data-index": o,
+						"data-date": w(r),
+						"data-outside": s ? "" : void 0,
+						tabIndex: S(r, t) ? 0 : -1,
+						"aria-label": $.cell.format(r),
+						onClick: () => M?.(r),
+						onKeyDown: (e) => {
+							e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), M?.(r));
+						},
+						className: e([_e, s && ve]),
+						children: [
+							/* @__PURE__ */ d("span", {
+								"data-slot": "month-day",
+								className: e([ye, c && be]),
+								children: $.dayNum.format(r)
+							}),
+							u.map((t) => {
+								let n = T(t.title), r = t.allDay ? "" : $.time.format(v(t.start));
+								return /* @__PURE__ */ d("button", {
+									type: "button",
+									"data-slot": "event",
+									"aria-label": [n, r].filter(Boolean).join(", "),
+									onClick: (e) => {
+										e.stopPropagation(), j?.(t);
+									},
+									className: e([
+										Ve,
+										D[t.color ?? "primary"],
+										P?.event
+									]),
+									children: t.title
+								}, t.id);
+							}),
+							p > 0 && /* @__PURE__ */ f("button", {
+								type: "button",
+								"data-slot": "overflow-chip",
+								className: He,
+								onClick: (e) => {
+									e.stopPropagation(), M?.(r);
+								},
+								children: ["+", p]
+							})
+						]
+					}, r.getTime());
+				})
+			}, i))]
+		});
+	};
+	return /* @__PURE__ */ f("div", {
+		ref: $e,
+		"data-slot": "schedule",
+		...et,
+		className: e([
+			ue,
+			P?.root,
+			Qe
+		]),
+		children: [/* @__PURE__ */ f("div", {
+			"data-slot": "toolbar",
+			className: e([de, P?.toolbar]),
+			children: [
+				/* @__PURE__ */ d(i, {
+					variant: "ghost",
+					size: "sm",
+					square: !0,
+					"aria-label": Ye,
+					"data-slot": "prev",
+					onClick: () => mt(-1),
+					children: "‹"
+				}),
+				/* @__PURE__ */ d(i, {
+					variant: "outline",
+					size: "sm",
+					"data-slot": "today",
+					onClick: ht,
+					children: Je
+				}),
+				/* @__PURE__ */ d(i, {
+					variant: "ghost",
+					size: "sm",
+					square: !0,
+					"aria-label": Xe,
+					"data-slot": "next",
+					onClick: () => mt(1),
+					children: "›"
+				}),
+				/* @__PURE__ */ d("div", {
+					"data-slot": "title",
+					className: fe,
+					children: G
+				}),
+				/* @__PURE__ */ d(a, {
+					options: Tt,
+					value: F,
+					onChange: gt,
+					size: "sm"
+				})
+			]
+		}), F === "month" ? Ot() : Dt()]
+	});
+}
+//#endregion
+export { E as computeDropTime, O as default };

package/dist/components/Schedule/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e from "./Schedule.js";
+export { e as Schedule };

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,18 +1,37 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { ScrollAreaProvider as t } from "./ScrollAreaContext.js";
+import n from "./ScrollThumb.js";
+import r from "./Scrollbar.js";
+import i from "./ScrollViewport.js";
 /* empty css                     */
-import { jsx as t } from "react/jsx-runtime";
+import { Children as a, isValidElement as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/lib/components/ScrollArea/ScrollArea.tsx
-var n = "haze-ScrollArea__base";
-function r({ maxHeight: r, className: i, children: a }) {
-	let o = r === void 0 ? void 0 : { maxHeight: typeof r == "number" ? `${r}px` : r };
-	return /* @__PURE__ */ t("div", {
+var d = "haze-ScrollArea__root", f = (e, t) => o(e) && e.type === t;
+function p({ maxHeight: o, type: p = "hover", label: m, className: h, children: g, ref: _, style: v, ...y }) {
+	let [b, x] = s(null), S = o === void 0 ? v : {
+		...v,
+		maxHeight: typeof o == "number" ? `${o}px` : o
+	}, C = a.toArray(g), w = C.some((e) => f(e, i)), T = C.some((e) => f(e, r)) || C.some((e) => f(e, n)), E = w || T;
+	return /* @__PURE__ */ l("div", {
+		ref: _,
 		"data-slot": "scroll-area",
-		style: o,
-		className: e([n, i]),
-		children: a
+		"data-type": p,
+		style: S,
+		...y,
+		className: e([d, h]),
+		children: u(t, {
+			value: {
+				mode: p,
+				viewport: b,
+				setViewport: x,
+				label: m
+			},
+			children: [E ? g : /* @__PURE__ */ l(i, { children: g }), !T && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(r, { orientation: "vertical" }), /* @__PURE__ */ l(r, { orientation: "horizontal" })] })]
+		})
 	});
 }
 //#endregion
-export { r as default };
+export { p as default };

package/dist/components/ScrollArea/ScrollAreaContext.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext as e, useContext as t } from "react";
+//#region src/lib/components/ScrollArea/ScrollAreaContext.ts
+var n = e(void 0), r = n.Provider;
+function i() {
+	let e = t(n);
+	if (!e) throw Error("ScrollArea compound parts must be used within <ScrollArea>");
+	return e;
+}
+//#endregion
+export { r as ScrollAreaProvider, i as useScrollAreaContext };