haze-ui 1.31.0 → 1.33.0

package/dist/components/Select/SelectFloating.js

@@ -1,24 +1,24 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { mergeRefs as t } from "../../utils/refs.js";
-import { formatString as n } from "../LocaleProvider/locale.js";
-import { useStrings as r } from "../LocaleProvider/useStrings.js";
-import { FloatingPanel as i, useFloating as ee } from "../../utils/floating.js";
-import te from "../Chip/Chip.js";
-import ne from "../Spinner/Spinner.js";
-import re from "../VirtualList/VirtualList.js";
-import { filterSelectEntries as ie, flattenSelectEntries as a, selectOptionText as ae } from "./select-options.js";
+import { formatString as t } from "../LocaleProvider/locale.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import r from "../Spinner/Spinner.js";
+import { mergeRefs as ee } from "../../utils/refs.js";
+import { FloatingPanel as te, useFloating as ne } from "../../utils/floating.js";
+import re from "../Chip/Chip.js";
+import ie from "../VirtualList/VirtualList.js";
+import { filterSelectEntries as ae, flattenSelectEntries as i, selectOptionText as oe } from "./select-options.js";
 /* empty css                         */
-import { useCallback as oe, useEffect as o, useId as se, useRef as s, useState as c } from "react";
-import { Fragment as ce, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useControl as le } from "react-use-control";
+import { useCallback as se, useEffect as a, useId as ce, useRef as o, useState as s } from "react";
+import { Fragment as le, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useControl as ue } from "react-use-control";
 //#region src/lib/components/Select/SelectFloating.tsx
-var ue = "haze-SelectFloating__wrapper", de = "haze-SelectFloating__trigger", fe = {
+var de = "haze-SelectFloating__wrapper", fe = "haze-SelectFloating__trigger", pe = {
 	sm: "haze-SelectFloating__sm",
 	md: "haze-SelectFloating__md",
 	lg: "haze-SelectFloating__lg"
-}, d = "haze-SelectFloating__placeholderText", pe = "haze-SelectFloating__triggerLabel", me = "haze-SelectFloating__chipItem", he = "haze-SelectFloating__chipRemove", ge = "haze-SelectFloating__overflowBadge", _e = "haze-SelectFloating__clearBtn", ve = "haze-SelectFloating__caret", ye = "haze-SelectFloating__listbox", be = "haze-SelectFloating__listboxVirtual", xe = "haze-SelectFloating__panelSearch", Se = "haze-SelectFloating__listboxInner", Ce = "haze-SelectFloating__searchInput", we = "haze-SelectFloating__loadingBlock", Te = "haze-SelectFloating__emptyBlock", Ee = "haze-SelectFloating__groupLabelText", De = "haze-SelectFloating__groupLabelRow", Oe = 200, ke = 29, Ae = "haze-SelectFloating__virtualRow", je = "haze-SelectFloating__optionRow", Me = "haze-SelectFloating__optionActive", Ne = "haze-SelectFloating__optionSelected", Pe = "haze-SelectFloating__checkboxVisual", Fe = "haze-SelectFloating__checkboxChecked", Ie = () => /* @__PURE__ */ l("svg", {
+}, u = "haze-SelectFloating__placeholderText", me = "haze-SelectFloating__triggerLabel", he = "haze-SelectFloating__chipItem", ge = "haze-SelectFloating__chipRemove", _e = "haze-SelectFloating__overflowBadge", ve = "haze-SelectFloating__clearBtn", ye = "haze-SelectFloating__caret", be = "haze-SelectFloating__listbox", xe = "haze-SelectFloating__listboxVirtual", Se = "haze-SelectFloating__panelSearch", Ce = "haze-SelectFloating__listboxInner", we = "haze-SelectFloating__searchInput", Te = "haze-SelectFloating__loadingBlock", Ee = "haze-SelectFloating__emptyBlock", d = "haze-SelectFloating__groupLabelText", De = "haze-SelectFloating__groupLabelRow", Oe = 200, ke = 29, Ae = "haze-SelectFloating__virtualRow", je = "haze-SelectFloating__optionRow", Me = "haze-SelectFloating__optionActive", Ne = "haze-SelectFloating__optionSelected", Pe = "haze-SelectFloating__checkboxVisual", Fe = "haze-SelectFloating__checkboxChecked", Ie = () => /* @__PURE__ */ c("svg", {
 	viewBox: "0 0 12 12",
 	width: "12",
 	height: "12",
@@ -29,244 +29,248 @@ var ue = "haze-SelectFloating__wrapper", de = "haze-SelectFloating__trigger", fe
 	strokeLinejoin: "round",
 	"aria-hidden": "true",
 	focusable: "false",
-	children: l("path", { d: "M2 4l4 4 4-4" })
+	children: c("path", { d: "M2 4l4 4 4-4" })
 });
-function f({ value: f, onChange: p, entries: m, multiple: h, placeholder: g, searchable: _ = !1, clearable: v = !1, loading: y = !1, onSearch: b, maxTagCount: x, size: Le = "md", virtualized: S, className: Re, ref: C, ...ze }) {
-	let w = r("select"), T = h && Array.isArray(f) ? f : [], E = !h && typeof f == "string" ? f : "", [D, O] = le(void 0, !1), [k, A] = c(-1), [j, M] = c(""), [Be, Ve] = c(j), N = se(), P = s(null), He = oe((e) => t(P, C)(e), [P, C]), F = s(null), I = s(null), L = s(null), R = s(null), z = S !== void 0 && S !== !1, B = typeof S == "object" ? S : void 0, V = B?.itemHeight ?? ke, Ue = B?.overscan, H = ee({
-		open: D,
-		setOpen: O,
-		triggerRef: P,
-		panelRef: F,
+function f({ value: f, onChange: p, entries: m, multiple: h, placeholder: g, searchable: _ = !1, clearable: v = !1, loading: y = !1, onSearch: b, maxTagCount: x, size: Le = "md", virtualized: S, className: Re, classNames: C, ref: w, ...ze }) {
+	let T = n("select"), E = h && Array.isArray(f) ? f : [], D = !h && typeof f == "string" ? f : "", [O, k] = ue(void 0, !1), [A, j] = s(-1), [M, N] = s(""), [Be, Ve] = s(M), P = ce(), F = o(null), He = se((e) => ee(F, w)(e), [F, w]), I = o(null), Ue = o(null), We = o(null), Ge = o(null), L = S !== void 0 && S !== !1, Ke = typeof S == "object" ? S : void 0, R = Ke?.itemHeight ?? ke, qe = Ke?.overscan, z = ne({
+		open: O,
+		setOpen: k,
+		triggerRef: F,
+		panelRef: I,
 		animated: !0
-	}), We = a(m), U = y ? [] : b ? m : ie(m, j), W = a(U), G = U.reduce((e, t) => ({
+	}), Je = i(m), B = y ? [] : b ? m : ae(m, M), V = i(B), H = B.reduce((e, t) => ({
 		offsets: [...e.offsets, e.flat],
 		flat: e.flat + (t.kind === "group" ? t.options.length : 1)
 	}), {
 		offsets: [],
 		flat: 0
-	}).offsets, K = (e) => `${N}-option-${e}`, Ge = D && W[k] ? K(k) : void 0, q = `${N}-listbox`;
-	o(() => {
-		if (!H.shown || k < 0) return;
-		if (z) {
-			R.current?.scrollToIndex(k, "auto");
+	}).offsets, U = (e) => `${P}-option-${e}`, W = O && V[A] ? U(A) : void 0, G = `${P}-listbox`;
+	a(() => {
+		if (!z.shown || A < 0) return;
+		if (L) {
+			Ge.current?.scrollToIndex(A, "auto");
 			return;
 		}
-		let e = L.current;
+		let e = We.current;
 		e && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest" });
 	}, [
-		H.shown,
-		k,
-		z
-	]), o(() => {
-		_ && D && H.shown && I.current?.focus();
+		z.shown,
+		A,
+		L
+	]), a(() => {
+		_ && O && z.shown && Ue.current?.focus();
 	}, [
 		_,
-		D,
-		H.shown
+		O,
+		z.shown
 	]);
-	let Ke = s(b);
-	o(() => {
-		Ke.current = b;
+	let K = o(b);
+	a(() => {
+		K.current = b;
 	}, [b]);
-	let J = s(j);
-	o(() => {
-		J.current !== j && (J.current = j, Ke.current?.(j));
-	}, [j]), !D && j !== "" && M(""), j !== Be && (Ve(j), A(W.length > 0 ? 0 : -1));
-	let qe = (e) => {
-		p(T.includes(e) ? T.filter((t) => t !== e) : [...T, e]);
-	}, Je = (e) => {
-		p(T.filter((t) => t !== e));
-	}, Y = (e) => We.find((t) => t.value === e)?.label ?? e, Ye = () => {
+	let q = o(M);
+	a(() => {
+		q.current !== M && (q.current = M, K.current?.(M));
+	}, [M]), !O && M !== "" && N(""), M !== Be && (Ve(M), j(V.length > 0 ? 0 : -1));
+	let Ye = (e) => {
+		p(E.includes(e) ? E.filter((t) => t !== e) : [...E, e]);
+	}, Xe = (e) => {
+		p(E.filter((t) => t !== e));
+	}, J = (e) => Je.find((t) => t.value === e)?.label ?? e, Y = () => {
 		p(h ? [] : "");
 	}, X = (e) => {
 		if (h) {
-			qe(e);
+			Ye(e);
 			return;
 		}
-		p(e), O(!1), P.current?.focus();
-	}, Xe = (e) => {
-		A((t) => e === 1 ? Math.min(t + 1, W.length - 1) : Math.max(t - 1, 0));
+		p(e), k(!1), F.current?.focus();
+	}, Z = (e) => {
+		j((t) => e === 1 ? Math.min(t + 1, V.length - 1) : Math.max(t - 1, 0));
 	}, Ze = (e) => {
-		A(W.length === 0 ? -1 : e === "Home" ? 0 : W.length - 1);
+		j(V.length === 0 ? -1 : e === "Home" ? 0 : V.length - 1);
 	}, Qe = (e) => {
-		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), O(!0), Xe(e.key === "ArrowDown" ? 1 : -1)) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), O(!0), Ze(e.key)) : (e.key === "Enter" || e.key === " " || e.key === "Space") && D && W[k] ? (e.preventDefault(), X(W[k].value)) : e.key === "Escape" ? O(!1) : e.key === "Backspace" && (h && T.length > 0 ? (e.preventDefault(), p(T.slice(0, -1))) : !h && v && E !== "" && (e.preventDefault(), Ye()));
+		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), k(!0), Z(e.key === "ArrowDown" ? 1 : -1)) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), k(!0), Ze(e.key)) : (e.key === "Enter" || e.key === " " || e.key === "Space") && O && V[A] ? (e.preventDefault(), X(V[A].value)) : e.key === "Escape" ? k(!1) : e.key === "Backspace" && (h && E.length > 0 ? (e.preventDefault(), p(E.slice(0, -1))) : !h && v && D !== "" && (e.preventDefault(), Y()));
 	}, $e = (e) => {
-		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), Xe(e.key === "ArrowDown" ? 1 : -1)) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), Ze(e.key)) : e.key === "Enter" ? (e.preventDefault(), W[k] && X(W[k].value)) : e.key === "Escape" && (e.preventDefault(), O(!1), P.current?.focus());
-	}, Z = (t, n) => {
-		let r = h ? T.includes(t.value) : t.value === E;
-		return /* @__PURE__ */ u("div", {
+		e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), Z(e.key === "ArrowDown" ? 1 : -1)) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), Ze(e.key)) : e.key === "Enter" ? (e.preventDefault(), V[A] && X(V[A].value)) : e.key === "Escape" && (e.preventDefault(), k(!1), F.current?.focus());
+	}, Q = (t, n) => {
+		let r = h ? E.includes(t.value) : t.value === D;
+		return /* @__PURE__ */ l("div", {
 			"data-slot": "option",
-			ref: n === k ? L : void 0,
+			ref: n === A ? We : void 0,
 			role: "option",
-			id: K(n),
+			id: U(n),
 			"aria-selected": r,
-			"aria-setsize": W.length,
+			"aria-setsize": V.length,
 			"aria-posinset": n + 1,
 			onClick: () => X(t.value),
 			className: e([
 				je,
-				n === k && Me,
+				n === A && Me,
 				!h && r && Ne,
-				z && Ae
+				L && Ae,
+				C?.option
 			]),
-			children: [h && /* @__PURE__ */ l("span", {
+			children: [h && /* @__PURE__ */ c("span", {
 				"aria-hidden": "true",
 				"data-slot": "indicator",
 				className: e([Pe, r && Fe])
 			}), t.label]
 		}, t.value);
-	}, et = v && (h ? T.length > 0 : E !== "") ? /* @__PURE__ */ l("span", {
+	}, et = v && (h ? E.length > 0 : D !== "") ? /* @__PURE__ */ c("span", {
 		"aria-hidden": "true",
 		"data-slot": "clear-button",
-		title: w.clear,
+		title: T.clear,
 		onClick: (e) => {
-			e.stopPropagation(), Ye(), P.current?.focus();
+			e.stopPropagation(), Y(), F.current?.focus();
 		},
-		className: e(_e),
+		className: e([ve, C?.clearButton]),
 		children: "×"
-	}) : void 0, tt = h ? T.length === 0 ? /* @__PURE__ */ l("span", {
+	}) : void 0, tt = h ? E.length === 0 ? /* @__PURE__ */ c("span", {
 		"data-slot": "placeholder",
-		className: e(d),
-		children: g ?? w.placeholder
-	}) : /* @__PURE__ */ u(ce, { children: [(x === void 0 ? T : T.slice(0, Math.max(x, 0))).map((t) => /* @__PURE__ */ u("span", {
+		className: e(u),
+		children: g ?? T.placeholder
+	}) : /* @__PURE__ */ l(le, { children: [(x === void 0 ? E : E.slice(0, Math.max(x, 0))).map((t) => /* @__PURE__ */ l("span", {
 		"data-slot": "item",
-		className: e(me),
-		children: [/* @__PURE__ */ l(te, {
+		className: e([he, C?.item]),
+		children: [/* @__PURE__ */ c(re, {
 			color: "primary",
-			children: Y(t)
-		}), /* @__PURE__ */ l("span", {
+			children: J(t)
+		}), /* @__PURE__ */ c("span", {
 			"aria-hidden": "true",
 			"data-slot": "item-remove",
 			onClick: (e) => {
-				e.stopPropagation(), Je(t);
+				e.stopPropagation(), Xe(t);
 			},
-			className: e(he),
+			className: e(ge),
 			children: "×"
 		})]
-	}, t)), x !== void 0 && T.length > Math.max(x, 0) && /* @__PURE__ */ l("span", {
+	}, t)), x !== void 0 && E.length > Math.max(x, 0) && /* @__PURE__ */ c("span", {
 		"data-slot": "overflow-badge",
-		title: T.slice(Math.max(x, 0)).map((e) => ae(Y(e))).join(", "),
-		className: e(ge),
-		children: n(w.moreTags, { count: T.length - Math.max(x, 0) })
-	})] }) : E === "" ? /* @__PURE__ */ l("span", {
+		title: E.slice(Math.max(x, 0)).map((e) => oe(J(e))).join(", "),
+		className: e(_e),
+		children: t(T.moreTags, { count: E.length - Math.max(x, 0) })
+	})] }) : D === "" ? /* @__PURE__ */ c("span", {
 		"data-slot": "placeholder",
-		className: e(d),
-		children: g ?? w.placeholder
-	}) : /* @__PURE__ */ l("span", {
+		className: e(u),
+		children: g ?? T.placeholder
+	}) : /* @__PURE__ */ c("span", {
 		"data-slot": "value",
-		className: e(pe),
-		children: Y(E)
-	}), Q = !y && W.length > 0, nt = z ? /* @__PURE__ */ l(re, {
-		ref: R,
+		className: e(me),
+		children: J(D)
+	}), $ = !y && V.length > 0, nt = L ? /* @__PURE__ */ c(ie, {
+		ref: Ge,
 		"data-virtualized": !0,
-		items: W,
-		groups: U.some((e) => e.kind === "group") ? U.flatMap((t, n) => t.kind === "group" ? [{
-			startIndex: G[n] ?? 0,
-			key: `group-${t.label}-${G[n] ?? 0}`,
-			render: () => /* @__PURE__ */ l("div", {
+		items: V,
+		groups: B.some((e) => e.kind === "group") ? B.flatMap((t, n) => t.kind === "group" ? [{
+			startIndex: H[n] ?? 0,
+			key: `group-${t.label}-${H[n] ?? 0}`,
+			render: () => /* @__PURE__ */ c("div", {
 				"data-slot": "group-label",
-				className: e(Ee),
+				className: e(d),
 				children: t.label
 			})
 		}] : []) : void 0,
-		height: Math.min(Oe, W.length * V),
-		itemHeight: V,
-		overscan: Ue,
-		renderItem: Z
-	}) : U.map((t, n) => {
-		let r = G[n] ?? 0;
-		return t.kind === "option" ? Z(t.option, r) : /* @__PURE__ */ u("div", {
+		height: Math.min(Oe, V.length * R),
+		itemHeight: R,
+		overscan: qe,
+		renderItem: Q
+	}) : B.map((t, n) => {
+		let r = H[n] ?? 0;
+		return t.kind === "option" ? Q(t.option, r) : /* @__PURE__ */ l("div", {
 			"data-slot": "group",
 			role: "group",
 			"aria-label": t.label,
-			children: [/* @__PURE__ */ l("div", {
+			children: [/* @__PURE__ */ c("div", {
 				"data-slot": "group-label",
-				className: e([De, Ee]),
+				className: e([De, d]),
 				children: t.label
-			}), t.options.map((e, t) => Z(e, r + t))]
+			}), t.options.map((e, t) => Q(e, r + t))]
 		}, `group-${t.label}`);
-	}), $ = y ? /* @__PURE__ */ u("div", {
+	}), rt = y ? /* @__PURE__ */ l("div", {
 		"data-slot": "loading",
-		className: e(we),
-		children: [/* @__PURE__ */ l(ne, { size: "sm" }), /* @__PURE__ */ l("span", { children: w.loading })]
-	}) : /* @__PURE__ */ l("div", {
-		"data-slot": "empty",
 		className: e(Te),
-		children: w.noMatch
+		children: [/* @__PURE__ */ c(r, { size: "sm" }), /* @__PURE__ */ c("span", { children: T.loading })]
+	}) : /* @__PURE__ */ c("div", {
+		"data-slot": "empty",
+		className: e(Ee),
+		children: T.noMatch
 	});
-	return /* @__PURE__ */ u("div", {
-		className: e(ue),
-		children: [/* @__PURE__ */ u("button", {
+	return /* @__PURE__ */ l("div", {
+		className: e(de),
+		children: [/* @__PURE__ */ l("button", {
 			...ze,
 			ref: He,
 			"data-slot": "trigger",
 			type: "button",
-			style: H.triggerStyle,
+			style: z.triggerStyle,
 			role: "combobox",
 			"aria-haspopup": "listbox",
-			"aria-expanded": D,
-			"aria-controls": _ ? q : N,
-			"aria-activedescendant": Ge,
+			"aria-expanded": O,
+			"aria-controls": _ ? G : P,
+			"aria-activedescendant": W,
 			"data-clearable": v || void 0,
-			onPointerDown: H.onTriggerPointerDown,
-			onClick: H.onTriggerClick,
+			onPointerDown: z.onTriggerPointerDown,
+			onClick: z.onTriggerClick,
 			onKeyDown: Qe,
 			className: e([
-				de,
-				fe[Le],
-				Re
+				fe,
+				pe[Le],
+				Re,
+				C?.trigger
 			]),
 			children: [
 				tt,
 				et,
-				/* @__PURE__ */ l("span", {
+				/* @__PURE__ */ c("span", {
 					"data-slot": "icon",
 					"aria-hidden": "true",
-					className: e(ve),
-					children: /* @__PURE__ */ l(Ie, {})
+					className: e(ye),
+					children: /* @__PURE__ */ c(Ie, {})
 				})
 			]
-		}), _ ? /* @__PURE__ */ u(i, {
-			ref: F,
-			behavior: H,
+		}), _ ? /* @__PURE__ */ l(te, {
+			ref: I,
+			behavior: z,
 			placement: "bottom-span",
 			"aria-busy": y || void 0,
-			visualClass: xe,
-			children: [/* @__PURE__ */ l("input", {
-				ref: I,
+			visualClass: Se,
+			className: C?.content,
+			children: [/* @__PURE__ */ c("input", {
+				ref: Ue,
 				"data-slot": "input",
 				type: "text",
-				"aria-label": w.searchLabel,
-				placeholder: w.searchPlaceholder,
-				...Q && {
-					"aria-controls": q,
+				"aria-label": T.searchLabel,
+				placeholder: T.searchPlaceholder,
+				...$ && {
+					"aria-controls": G,
 					"aria-autocomplete": "list"
 				},
-				"aria-activedescendant": Ge,
-				value: j,
-				onChange: (e) => M(e.target.value),
+				"aria-activedescendant": W,
+				value: M,
+				onChange: (e) => N(e.target.value),
 				onKeyDown: $e,
-				className: e(Ce)
-			}), Q ? /* @__PURE__ */ l("div", {
-				id: q,
+				className: e([we, C?.searchInput])
+			}), $ ? /* @__PURE__ */ c("div", {
+				id: G,
 				"data-slot": "list",
 				role: "listbox",
 				"aria-multiselectable": h || void 0,
-				"aria-label": w.listboxLabel,
-				className: e(z ? void 0 : Se),
+				"aria-label": T.listboxLabel,
+				className: e(L ? void 0 : Ce),
 				children: nt
-			}) : $]
-		}) : /* @__PURE__ */ l(i, {
-			ref: F,
-			behavior: H,
+			}) : rt]
+		}) : /* @__PURE__ */ c(te, {
+			ref: I,
+			behavior: z,
 			placement: "bottom-span",
-			id: N,
-			role: Q ? "listbox" : void 0,
-			"aria-multiselectable": Q && h ? "true" : void 0,
-			"aria-label": w.listboxLabel,
+			id: P,
+			role: $ ? "listbox" : void 0,
+			"aria-multiselectable": $ && h ? "true" : void 0,
+			"aria-label": T.listboxLabel,
 			"aria-busy": y || void 0,
-			visualClass: z ? be : ye,
-			children: Q ? nt : $
+			visualClass: L ? xe : be,
+			className: C?.content,
+			children: $ ? nt : rt
 		})]
 	});
 }

package/dist/components/Splitter/Splitter.js

@@ -0,0 +1,199 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { getDirection as t } from "../../utils/direction.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+/* empty css                   */
+import { Children as r, cloneElement as i, createContext as a, isValidElement as o, useContext as s, useRef as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { isControl as d, useControl as ee, useThru as f, watch as p } from "react-use-control";
+//#region src/lib/components/Splitter/Splitter.tsx
+var m = a(null);
+function h() {
+	if (s(m) === null) throw Error("SplitterPane must be used within <Splitter>");
+}
+var g = 5, _ = 2 ** 53 - 1, v = (e) => Math.round(e * 100) / 100;
+function y(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function b(e, t, n) {
+	return {
+		lo: Math.max(e.min, n - t.max),
+		hi: Math.min(e.max, n - t.min)
+	};
+}
+var te = "haze-Splitter__splitterBase", ne = "haze-Splitter__splitterHorizontal", x = "haze-Splitter__splitterVertical";
+function S({ orientation: a = "horizontal", sizes: s, onSizesChange: h, children: S, className: C, ...N }) {
+	let P = r.toArray(S).filter(o).map((e) => {
+		if (e.type !== w) throw Error("Splitter children must be <SplitterPane> elements");
+		return e;
+	}), F = P.length, I = () => Array.from({ length: F }, () => 100 / F), L = d(s), [R, ae] = ee(f(L ? s : void 0, p((e) => h?.(e))), L ? I : s ?? I), z = (e) => {
+		let t = R[e];
+		return t === void 0 ? 100 / F : t;
+	}, B = (e) => {
+		let t = P[e]?.props;
+		return {
+			min: t?.min ?? 0,
+			max: t?.max ?? Infinity
+		};
+	}, V = c(null), H = c(null), U = n("splitter"), W = c(/* @__PURE__ */ new Map()), G = (e) => P[e]?.props.collapsible === !0, K = (e) => z(e) === 0, q = (e) => {
+		let t = B(e);
+		return K(e) ? {
+			...t,
+			min: 0
+		} : t;
+	}, J = (e, t) => {
+		let n = Math.min(e, t), r = z(n) + z(n + 1);
+		if (K(e)) {
+			let { lo: i, hi: a } = b(B(e), B(t), r), o = y(W.current.get(e) ?? r / 2, i, a);
+			W.current.delete(e);
+			let s = e === n ? o : r - o;
+			X(n, s, r);
+		} else W.current.set(e, z(e)), X(n, e === n ? 0 : r, r);
+	}, Y = () => a === "horizontal" && t(V.current) === "rtl", X = (e, t, n) => {
+		let r = v(t), i = v(n - r);
+		ae((t) => {
+			if (e + 1 >= t.length || t[e] === r) return t;
+			let n = t.slice();
+			return n[e] = r, n[e + 1] = i, n;
+		});
+	}, Z = (e) => a === "horizontal" ? e.clientX : e.clientY, oe = () => {
+		let e = V.current;
+		if (e === null) return 0;
+		let t = 0;
+		for (let n of e.querySelectorAll("[data-slot='pane']")) {
+			let e = n.getBoundingClientRect();
+			t += a === "horizontal" ? e.width : e.height;
+		}
+		return t;
+	}, se = (e, t) => {
+		if (t.button !== 0) return;
+		let n = oe();
+		if (!(n > 0)) return;
+		let r = z(e) + z(e + 1), { lo: i, hi: a } = b(q(e), q(e + 1), r);
+		t.preventDefault();
+		let o = t.currentTarget;
+		if (H.current = {
+			pointerId: t.pointerId,
+			origin: Z(t),
+			extent: n,
+			leadIndex: e,
+			startLead: z(e),
+			pairSum: r,
+			lo: i,
+			hi: a,
+			lastLead: z(e)
+		}, typeof o.setPointerCapture == "function") try {
+			o.setPointerCapture(t.pointerId);
+		} catch {}
+	}, ce = (e) => {
+		let t = H.current;
+		if (t?.pointerId !== e.pointerId) return;
+		K(t.leadIndex) && W.current.delete(t.leadIndex), K(t.leadIndex + 1) && W.current.delete(t.leadIndex + 1);
+		let n = Z(e) - t.origin, r = (Y() ? -n : n) / t.extent * 100, i = y(t.startLead + r, t.lo, t.hi);
+		v(i) !== v(t.lastLead) && (t.lastLead = i, X(t.leadIndex, i, t.pairSum));
+	}, Q = (e) => {
+		if (H.current?.pointerId !== e.pointerId) return;
+		H.current = null;
+		let t = e.currentTarget;
+		if (typeof t.releasePointerCapture == "function") try {
+			t.releasePointerCapture(e.pointerId);
+		} catch {}
+	}, le = (e, t) => {
+		let n = a === "horizontal" ? "ArrowRight" : "ArrowDown", r = a === "horizontal" ? "ArrowLeft" : "ArrowUp", { key: i } = t;
+		if (i !== n && i !== r && i !== "Home" && i !== "End") return;
+		let o = z(e) + z(e + 1), { lo: s, hi: c } = b(q(e), q(e + 1), o), l = z(e);
+		t.preventDefault();
+		let u = Y(), d = y(l + (i === n ? u ? -5 : g : i === r ? u ? g : -5 : i === "Home" ? -_ : _), s, c);
+		d !== l && X(e, d, o);
+	}, $ = [];
+	return P.forEach((t, n) => {
+		if (n > 0) {
+			let t = n - 1, r = z(t) + z(n), { lo: i, hi: o } = b(q(t), q(n), r);
+			$.push(/* @__PURE__ */ u("div", {
+				"data-slot": "divider",
+				className: e([T, a === "horizontal" ? re : E]),
+				children: [
+					/* @__PURE__ */ l("div", {
+						"data-slot": "divider-handle",
+						role: "separator",
+						"aria-orientation": a === "horizontal" ? "vertical" : "horizontal",
+						tabIndex: 0,
+						"aria-valuenow": Math.round(z(t)),
+						"aria-valuemin": Math.round(i),
+						"aria-valuemax": Math.round(o),
+						onKeyDown: (e) => le(t, e),
+						onPointerDown: (e) => se(t, e),
+						onPointerMove: ce,
+						onPointerUp: Q,
+						onPointerCancel: Q,
+						className: e([ie])
+					}),
+					G(t) && /* @__PURE__ */ l("button", {
+						type: "button",
+						"data-slot": "divider-collapse",
+						"data-side": "lead",
+						"aria-expanded": !K(t),
+						"aria-label": K(t) ? U.expandLead : U.collapseLead,
+						onClick: () => J(t, n),
+						className: e([O, a === "horizontal" ? k : j]),
+						children: D
+					}, `splitter-collapse-lead-${n}`),
+					G(n) && /* @__PURE__ */ l("button", {
+						type: "button",
+						"data-slot": "divider-collapse",
+						"data-side": "trail",
+						"aria-expanded": !K(n),
+						"aria-label": K(n) ? U.expandTrail : U.collapseTrail,
+						onClick: () => J(n, t),
+						className: e([O, a === "horizontal" ? A : M]),
+						children: D
+					}, `splitter-collapse-trail-${n}`)
+				]
+			}, `splitter-divider-${n}`));
+		}
+		$.push(i(t, { style: {
+			...t.props.style,
+			flexGrow: z(n)
+		} }));
+	}), /* @__PURE__ */ l(m.Provider, {
+		value: !0,
+		children: l("div", {
+			ref: V,
+			"data-slot": "splitter",
+			...N,
+			className: e([
+				te,
+				a === "horizontal" ? ne : x,
+				C
+			]),
+			children: $
+		})
+	});
+}
+var C = "haze-Splitter__paneBase";
+function w({ min: t, max: n, collapsible: r, children: i, className: a, ...o }) {
+	return h(), /* @__PURE__ */ l("div", {
+		"data-slot": "pane",
+		...o,
+		className: e([C, a]),
+		children: i
+	});
+}
+var T = "haze-Splitter__dividerBase", re = "haze-Splitter__dividerHorizontal", E = "haze-Splitter__dividerVertical", ie = "haze-Splitter__dividerHandle", D = /* @__PURE__ */ l("svg", {
+	width: "12",
+	height: "12",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: l("path", {
+		d: "M10.5 3 5.5 8l5 5",
+		stroke: "currentColor",
+		strokeWidth: "1.75",
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	})
+}), O = "haze-Splitter__collapseButtonBase", k = "haze-Splitter__collapseLeadHorizontal", A = "haze-Splitter__collapseTrailHorizontal", j = "haze-Splitter__collapseLeadVertical", M = "haze-Splitter__collapseTrailVertical";
+//#endregion
+export { S as Splitter, w as SplitterPane };

package/dist/components/Splitter/index.js

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