@logicplanes/kaeso-ui 0.4.3 → 0.4.5

package/dist/chunks/list-B4G-sWwV.js

@@ -0,0 +1,540 @@
+"use client";
+import { t as e } from "./cn-BjnOAUrA.js";
+import { r as t } from "./portal-context-CTatR2Z8.js";
+import { a as n, i as r } from "./inset-BUzyXLK4.js";
+import { i } from "./context-BELWW79w.js";
+import { t as a } from "./icon-CBzOwqrX.js";
+import { s as o, u as s } from "./tooltip-Tkm-urbi.js";
+import { r as c } from "./text-DkKdTVUf.js";
+import { t as l } from "./icon-button-Dfwpvmav.js";
+import { n as u } from "./use-layout-width-CbSDbRb0.js";
+import { r as d } from "./skeleton-D-qk3mes.js";
+import { t as f } from "./truncated-d1afmUJT.js";
+import { n as p, t as m } from "./use-coarse-pointer-Ml5oE6oX.js";
+import { forwardRef as h, useCallback as g, useEffect as _, useLayoutEffect as v, useMemo as y, useRef as b, useState as x } from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import { Add01Icon as w, Cancel01Icon as T } from "@hugeicons/core-free-icons";
+import { createPortal as E } from "react-dom";
+//#region src/components/list/row-checkbox.tsx
+var D = /* @__PURE__ */ o(() => import("./checkbox-9tbimmF3.js").then((e) => e.c), { base: () => import.meta.url });
+function ee({ checked: t, onToggle: n, "aria-label": r }) {
+	let [i, a] = s(D, !0), [o, c] = x(!1), [l, u] = x(!1);
+	return _(() => {
+		if (!l) return;
+		let e, t = () => {
+			e = setTimeout(() => u(!1));
+		};
+		return window.addEventListener("pointerup", t, !0), window.addEventListener("pointercancel", t, !0), () => {
+			clearTimeout(e), window.removeEventListener("pointerup", t, !0), window.removeEventListener("pointercancel", t, !0);
+		};
+	}, [l]), i && !o && !l ? /* @__PURE__ */ S(i.CheckboxBox, {
+		checked: t,
+		onCheckedChange: n,
+		"aria-label": r
+	}) : /* @__PURE__ */ S("span", {
+		role: "checkbox",
+		"aria-checked": t,
+		"aria-label": r,
+		onPointerEnter: () => {
+			c(!0), a();
+		},
+		onPointerLeave: () => c(!1),
+		onPointerDown: () => u(!0),
+		onClick: () => {
+			n(), c(!1), u(!1);
+		},
+		className: "relative -m-3 inline-flex size-24 shrink-0 cursor-pointer items-center justify-center rounded-checkbox",
+		children: /* @__PURE__ */ S("span", {
+			"aria-hidden": !0,
+			className: e("flex size-18 items-center justify-center rounded-checkbox", t ? "bg-ink" : "bg-raised shadow-selector")
+		})
+	});
+}
+//#endregion
+//#region src/components/list/list.tsx
+var O = /* @__PURE__ */ o(() => import("./virtual-rows-CC_kc2PR.js"), { base: () => import.meta.url }), k = { density: {
+	default: { classes: "h-44" },
+	compact: { classes: "h-36 coarse:h-44" }
+} }, A = { density: "default" }, te = {
+	48: "w-48",
+	64: "w-64",
+	80: "w-80",
+	96: "w-96",
+	120: "w-120"
+}, j = 520, M = "a[href], button, input, select, textarea, [tabindex], [contenteditable=true]", N = "input:not([type=checkbox]):not([type=radio]), textarea, select, [contenteditable=true]";
+function P(e) {
+	for (let t of e.querySelectorAll("[role=row]")) {
+		let e = t.querySelector("[data-index]");
+		if (e) for (let n of t.querySelectorAll(M)) n !== e && n.getAttribute("tabindex") !== "-1" && n.setAttribute("tabindex", "-1");
+	}
+}
+var F = /* @__PURE__ */ h(function({ items: t, groups: r, onOpen: i, selectable: a, selected: o, onSelectedChange: c, idWidth: l, density: d = "default", wrapSubtitle: f = !1, virtualizeAbove: h = 100, selectionActions: _, selectionBar: w = !0, loading: T, empty: E, className: D, "aria-label": ee, "data-force-row": k }, A) {
+	let te = n(), [F, ne] = x(/* @__PURE__ */ new Set()), I = o ?? F, B = g((e) => {
+		o || ne(e), c?.(e);
+	}, [o, c]), [V, oe] = x(() => new Set((r ?? []).filter((e) => e.defaultCollapsed).map((e) => e.id))), [H, U] = x(-1), [se, ce] = x(null), W = b(null), G = b(null), le = u(W), K = !!le && le < j, q = y(() => {
+		let e = (e) => e.flatMap((e) => [{
+			kind: "row",
+			item: e,
+			depth: 0,
+			lastChild: !1,
+			key: e.id
+		}, ...(e.children ?? []).map((e, t, n) => ({
+			kind: "row",
+			item: e,
+			depth: 1,
+			lastChild: t === n.length - 1,
+			key: e.id
+		}))]);
+		return r ? r.flatMap((t) => [{
+			kind: "header",
+			group: t,
+			key: `h-${t.id}`
+		}, ...V.has(t.id) ? [] : e(t.items)]) : e(t ?? []);
+	}, [
+		t,
+		r,
+		V
+	]), ue = q.findIndex((e) => e.kind === "row"), de = r ? r.every((e) => e.items.length === 0) : (t ?? []).length === 0, J = q.length > h, fe = m(), pe = (e) => q[e]?.kind === "header" ? e === 0 ? 36 : 52 : K ? 64 : d === "compact" && !fe ? 36 : 44, [me, Y] = s(O, J), X = me?.VirtualRows, he = b(null);
+	H >= q.length && U(-1);
+	let Z = H >= 0 ? H : q.length ? 0 : -1, ge = (e) => {
+		U(e), J && he.current?.(e);
+		let t = () => W.current?.querySelector(`[data-index="${e}"]`), n = (e) => {
+			e && (e.focus(), re(e, G.current));
+		}, r = t();
+		r ? n(r) : requestAnimationFrame(() => n(t()));
+	}, _e = b(!!X);
+	v(() => {
+		X && !_e.current && H >= 0 && document.activeElement === document.body && W.current?.querySelector(`[data-index="${H}"]`)?.focus(), _e.current = !!X;
+	}), v(() => {
+		let e = W.current;
+		if (!e) return;
+		P(e);
+		let t = new MutationObserver(() => P(e));
+		return t.observe(e, {
+			subtree: !0,
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["tabindex"]
+		}), () => t.disconnect();
+	}, []);
+	let ve = (e) => {
+		let t = new Set(I);
+		t.has(e) ? t.delete(e) : t.add(e), B(t);
+	}, ye = (e) => e.flatMap((e) => e.kind === "row" && !e.item.disabled ? [e.item.id] : []), be = (e) => {
+		let t = e.target;
+		if (!e.currentTarget.contains(t) || t.closest(N)) return;
+		let n = t.closest("[role=row]"), r = n?.querySelector("[data-index]");
+		if (!n || !r) return;
+		let o = t === r;
+		if (e.key === "Escape" && !o && !e.altKey && !e.metaKey && !e.ctrlKey && !t.closest("[data-popup-open], [aria-expanded=true]")) {
+			e.preventDefault(), r.focus();
+			return;
+		}
+		if (e.defaultPrevented) return;
+		let s = Number(r.dataset.index), c = q[s], l = c?.kind === "row" ? c.item : void 0;
+		if (e.altKey) return;
+		if (e.metaKey || e.ctrlKey) {
+			e.key.toLowerCase() === "a" && a && !e.shiftKey && (e.preventDefault(), B(new Set(ye(q))));
+			return;
+		}
+		let u = (t) => {
+			if (e.preventDefault(), e.shiftKey && a) {
+				let e = se ?? s;
+				ce(e);
+				let n = new Set(I);
+				ye(q.slice(Math.min(e, t), Math.max(e, t) + 1)).forEach((e) => n.add(e)), B(n);
+			} else ce(null);
+			ge(t);
+		}, d = () => [...n.querySelectorAll(M)].filter((e) => e !== r && !e.closest("[role=checkbox], [aria-hidden=true], [hidden]") && !e.matches(":disabled, input[type=checkbox]"));
+		if (e.key === "ArrowDown" || e.key === "j" && !e.shiftKey) u(Math.min(q.length - 1, s + 1));
+		else if (e.key === "ArrowUp" || e.key === "k" && !e.shiftKey) u(Math.max(0, s - 1));
+		else if (e.key === "Home") u(0);
+		else if (e.key === "End") u(q.length - 1);
+		else if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+			let n = d(), i = o ? -1 : n.indexOf(t), a = e.key === "ArrowRight" ? n[i + 1] : i > 0 ? n[i - 1] : i === 0 ? r : void 0;
+			if (!a) return;
+			e.preventDefault(), a.focus();
+		} else if (!o || !l || e.shiftKey) return;
+		else (e.key === " " || e.key === "x") && a ? (e.preventDefault(), l.disabled || ve(l.id)) : e.key === "Enter" ? (e.preventDefault(), l.disabled || i?.(l)) : e.key === "Escape" && a && I.size && B(/* @__PURE__ */ new Set());
+	}, Q = I.size > 0;
+	v(() => {
+		let e = document.activeElement;
+		Q && e instanceof HTMLElement && W.current?.contains(e) && re(e, G.current);
+	}, [Q]);
+	let $ = (e, t) => e.kind === "header" ? /* @__PURE__ */ S(R, {
+		title: e.group.title,
+		glyph: e.group.glyph,
+		count: e.group.count ?? e.group.items.length,
+		collapsed: V.has(e.group.id),
+		onToggle: () => {
+			let t = new Set(V);
+			t.has(e.group.id) ? t.delete(e.group.id) : t.add(e.group.id), oe(t);
+		},
+		onAdd: e.group.onAdd,
+		addLabel: e.group.addLabel,
+		indent: !!a,
+		first: t === 0,
+		index: t,
+		active: t === Z,
+		onFocus: () => U(t)
+	}, e.key) : /* @__PURE__ */ S(L, {
+		index: t,
+		item: e.item,
+		depth: e.depth,
+		lastChild: e.lastChild,
+		idWidth: l,
+		density: d,
+		wrapSubtitle: f,
+		narrow: K,
+		active: t === Z,
+		selected: I.has(e.item.id),
+		selectable: !!a,
+		selecting: Q,
+		onSelect: () => ve(e.item.id),
+		onOpen: () => i?.(e.item),
+		onFocus: () => U(t),
+		...k && t === ue ? { "data-force": k } : {}
+	}, e.key);
+	return /* @__PURE__ */ C("div", {
+		ref: (e) => {
+			W.current = e, typeof A == "function" ? A(e) : A && (A.current = e);
+		},
+		role: "grid",
+		"aria-label": ee,
+		"aria-rowcount": q.length || void 0,
+		"aria-multiselectable": a || void 0,
+		"aria-busy": T || void 0,
+		onKeyDown: (e) => {
+			Y(), be(e);
+		},
+		onPointerEnter: Y,
+		onPointerDown: Y,
+		onFocus: Y,
+		onWheel: Y,
+		className: e("relative flex flex-col outline-none", te && "overflow-hidden rounded-group bg-raised shadow-xs", D),
+		children: [T && (de || q.length === 0) ? /* @__PURE__ */ S(ae, {
+			density: d,
+			grouped: !!r
+		}) : de && E ? /* @__PURE__ */ S("div", {
+			role: "row",
+			children: /* @__PURE__ */ S("div", {
+				role: "gridcell",
+				children: E
+			})
+		}) : J && X ? /* @__PURE__ */ S(X, {
+			count: q.length,
+			estimateSize: pe,
+			getScrollElement: () => p(W.current),
+			scrollTo: he,
+			row: (e) => $(q[e], e),
+			measure: K
+		}) : J ? /* @__PURE__ */ S(ie, {
+			count: q.length,
+			estimateSize: pe,
+			row: (e) => $(q[e], e)
+		}) : q.map($), a && Q && w && /* @__PURE__ */ S(z, {
+			ref: G,
+			count: I.size,
+			onClear: () => B(/* @__PURE__ */ new Set()),
+			children: _
+		})]
+	});
+});
+process.env.NODE_ENV !== "production" && (F.displayName = "List");
+function ne(e, t) {
+	return t ? e ? "bg-raised-pressed controls-on-fill hover:raised-selected-hover active:raised-selected-hover" : "bg-fill-2 controls-on-fill hover:bg-fill-3 active:bg-fill-3" : e ? "hover:bg-raised-hover hover:controls-on-fill active:bg-raised-pressed" : "hover:bg-fill-1 hover:controls-on-fill active:bg-fill-2";
+}
+function I(e) {
+	let t = typeof window > "u" ? null : window.getSelection();
+	return !!t && !t.isCollapsed && !!t.anchorNode && e.contains(t.anchorNode);
+}
+function re(e, t) {
+	let n = t?.firstElementChild?.getBoundingClientRect().top;
+	if (n === void 0) return;
+	let r = e.getBoundingClientRect().bottom + 8 - n;
+	r > 0 && p(e)?.scrollBy({ top: r });
+}
+function ie({ count: e, estimateSize: t, row: n }) {
+	let r = typeof window > "u" ? 1024 : window.innerHeight, i = [], a = 0, o = 12;
+	for (let s = 0; s < e; s++) {
+		if (a >= r && o-- <= 0) {
+			for (let n = s; n < e; n++) a += t(n);
+			break;
+		}
+		i.push(/* @__PURE__ */ S("div", {
+			role: "presentation",
+			className: "absolute top-0 left-0 w-full",
+			style: { transform: `translateY(${Math.round(a)}px)` },
+			children: n(s)
+		}, s)), a += t(s);
+	}
+	return /* @__PURE__ */ S("div", {
+		role: "presentation",
+		className: "relative w-full",
+		style: { height: a },
+		children: i
+	});
+}
+function ae({ density: t, grouped: n }) {
+	let i = r();
+	return /* @__PURE__ */ C("div", {
+		role: "presentation",
+		children: [n && /* @__PURE__ */ S("div", {
+			role: "presentation",
+			className: i ? "px-0" : "px-24",
+			children: /* @__PURE__ */ S("div", {
+				className: "flex h-36 items-center px-12",
+				children: /* @__PURE__ */ S(d, {
+					shape: "line",
+					className: "w-80"
+				})
+			})
+		}), [
+			62,
+			48,
+			70,
+			54,
+			40,
+			58
+		].map((n, r) => /* @__PURE__ */ S("div", {
+			role: "presentation",
+			className: i ? "px-0" : "px-24",
+			children: /* @__PURE__ */ C("div", {
+				className: e("flex items-center gap-12 px-12", k.density[t].classes),
+				children: [
+					/* @__PURE__ */ S(d, {
+						shape: "line",
+						className: "min-w-0",
+						style: { width: `${n}%` }
+					}),
+					/* @__PURE__ */ S("span", { className: "flex-1" }),
+					/* @__PURE__ */ S(d, {
+						shape: "line",
+						className: "w-64 shrink-0"
+					})
+				]
+			})
+		}, r))]
+	});
+}
+var L = /* @__PURE__ */ h(function({ item: t, index: a, depth: o = 0, lastChild: s, idWidth: l, density: u = "default", wrapSubtitle: d = !1, narrow: p = !1, active: m, selected: h, selectable: g, selecting: _, onSelect: v, onOpen: y, onFocus: b, "data-force": x }, w) {
+	let T = n(), E = r(), D = i(), O = p && !!(t.meta || t.date), A = (T || O) && !!t.subtitle, j = A && d, M = !!t.disabled, N = t.avatar && /* @__PURE__ */ S("span", {
+		className: e("flex shrink-0", M && "opacity-50"),
+		children: t.avatar
+	});
+	return /* @__PURE__ */ S("div", {
+		role: "row",
+		"aria-rowindex": a === void 0 ? void 0 : a + 1,
+		className: T ? e("px-0", a !== void 0 && a > 0 && "hairline-t") : E ? "px-0" : "px-24",
+		children: /* @__PURE__ */ C("div", {
+			ref: w,
+			role: "gridcell",
+			"aria-selected": g ? !!h : void 0,
+			"aria-disabled": M || void 0,
+			"data-index": a,
+			"data-row": "",
+			tabIndex: m === !1 ? -1 : 0,
+			onFocus: b,
+			onClick: (e) => {
+				e.currentTarget.contains(e.target) && !e.target.closest("button, a, [role=checkbox]") && (I(e.currentTarget) || (_ && g ? v?.() : y?.()));
+			},
+			...x ? { "data-force": x } : {},
+			className: e("group/row relative flex cursor-pointer items-center gap-12 text-body transition-control focus-ring-inset", T ? "rounded-none px-20" : "rounded-item px-12", A || O || j ? "min-h-56 py-8" : T && u === "default" ? "h-48" : k.density[u].classes, ne(T, !!h), M && "pointer-events-none text-fg-disabled"),
+			children: [
+				g && /* @__PURE__ */ S("span", {
+					className: e("flex shrink-0 transition-control select-none", _ || h ? "opacity-100" : "opacity-0 group-hover/row:opacity-100 group-focus-visible/row:opacity-100 coarse:opacity-100"),
+					onClick: (e) => e.stopPropagation(),
+					children: /* @__PURE__ */ S(ee, {
+						checked: !!h,
+						onToggle: () => v?.(),
+						"aria-label": D("list.selectItem", "Select {name}", { name: t.textValue ?? (typeof t.title == "string" ? t.title : t.id) })
+					})
+				}),
+				o === 1 && /* @__PURE__ */ C("span", {
+					"aria-hidden": !0,
+					className: "relative -ml-4 h-full w-16 shrink-0 self-stretch",
+					children: [/* @__PURE__ */ S("span", { className: e("absolute left-6 w-1 bg-line-strong forced-line", s ? "top-0 h-1/2" : "inset-y-0") }), /* @__PURE__ */ S("span", { className: "absolute top-1/2 left-6 h-1 w-10 bg-line-strong forced-line" })]
+				}),
+				t.glyph && /* @__PURE__ */ S("span", {
+					className: e("flex size-16 shrink-0 items-center justify-center", M && "opacity-50"),
+					children: t.glyph
+				}),
+				t.leading && /* @__PURE__ */ S("span", {
+					className: e("-mr-4 flex shrink-0", A && "self-start", M && "opacity-50"),
+					children: t.leading
+				}),
+				t.displayId && /* @__PURE__ */ S(f, {
+					className: e("shrink-0 mono text-small tabular", M ? "text-fg-disabled" : h ? "text-fg-secondary" : "text-fg-tertiary", l && te[l]),
+					children: t.displayId
+				}),
+				/* @__PURE__ */ C("span", {
+					className: e("flex min-w-0 flex-1", O ? "flex-col items-stretch gap-4" : "contents"),
+					children: [/* @__PURE__ */ C("span", {
+						className: e("flex min-w-0", O ? "w-full" : "flex-1", A ? "flex-col items-start gap-2" : "items-baseline gap-8"),
+						children: [typeof t.title == "string" ? /* @__PURE__ */ S(c, {
+							truncate: !0,
+							weight: "medium",
+							tone: M ? "inherit" : "default",
+							className: e("min-w-0 shrink", A && "max-w-full"),
+							children: t.title
+						}) : /* @__PURE__ */ S("span", {
+							className: e("min-w-0 truncate font-medium", M ? "text-inherit" : "text-fg", A && "max-w-full"),
+							children: t.title
+						}), t.subtitle && /* @__PURE__ */ S(f, {
+							wrap: j,
+							className: e("min-w-0", M ? "text-fg-disabled" : "text-fg-secondary", A ? "max-w-full text-small" : "flex-1 basis-0"),
+							children: t.subtitle
+						})]
+					}), O && /* @__PURE__ */ C("span", {
+						className: "flex h-24 min-w-0 items-center gap-8",
+						children: [
+							t.meta && /* @__PURE__ */ S("span", {
+								className: e("flex min-w-0 items-center gap-6 overflow-hidden", M && "opacity-50"),
+								children: t.meta
+							}),
+							t.date && /* @__PURE__ */ S("span", {
+								className: e("shrink-0 text-small whitespace-nowrap tabular", M ? "text-fg-disabled" : "text-fg-secondary"),
+								children: t.date
+							}),
+							N,
+							t.actions && /* @__PURE__ */ S("span", {
+								className: "ml-auto flex shrink-0 items-center gap-2",
+								children: t.actions
+							})
+						]
+					})]
+				}),
+				!O && (t.meta || t.actions) && /* @__PURE__ */ C("span", {
+					className: "relative flex shrink-0 items-center gap-6",
+					children: [/* @__PURE__ */ S("span", {
+						className: e("flex items-center gap-6", t.actions && "transition-control group-hover/row:opacity-0 group-focus-within/row:opacity-0", M && "opacity-50"),
+						children: t.meta
+					}), t.actions && /* @__PURE__ */ S("span", {
+						className: e("flex items-center gap-2 opacity-0 transition-control group-hover/row:opacity-100 group-focus-within/row:opacity-100 coarse:opacity-100", t.meta && "absolute inset-y-0 right-0 coarse:static"),
+						children: t.actions
+					})]
+				}),
+				!O && t.date && /* @__PURE__ */ S("span", {
+					className: e("min-w-80 shrink-0 text-right text-small whitespace-nowrap tabular", M ? "text-fg-disabled" : "text-fg-secondary"),
+					children: t.date
+				}),
+				!O && N
+			]
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (L.displayName = "ListRow");
+var R = /* @__PURE__ */ h(function({ title: t, glyph: a, count: o, collapsed: s, onToggle: c, onAdd: u, addLabel: d, indent: f, first: p, index: m, active: h, onFocus: g }, _) {
+	let v = n(), y = r(), b = i();
+	return /* @__PURE__ */ S("div", {
+		ref: _,
+		role: "row",
+		"aria-rowindex": m === void 0 ? void 0 : m + 1,
+		onFocus: g,
+		className: v ? e("group/gh bg-fill-1", !p && "hairline-t") : e("group/gh", !p && "pt-16", y ? "px-0" : "px-24"),
+		children: /* @__PURE__ */ C("div", {
+			role: "gridcell",
+			className: e("flex h-36 items-center gap-4", v && "pr-12 pl-8"),
+			children: [
+				/* @__PURE__ */ C("button", {
+					type: "button",
+					"aria-expanded": !s,
+					"data-index": m,
+					tabIndex: h === !1 ? -1 : 0,
+					onClick: c,
+					className: e("relative flex h-28 min-w-0 cursor-pointer items-center gap-8 rounded-pill px-12 text-small transition-control focus-ring tap-target", v ? "hover:bg-fill-2 active:bg-fill-3" : "hover:bg-fill-1 active:bg-fill-2"),
+					children: [
+						f && !v && /* @__PURE__ */ S("span", {
+							"aria-hidden": !0,
+							className: "w-22 shrink-0"
+						}),
+						a && /* @__PURE__ */ S("span", {
+							className: "flex size-16 items-center justify-center",
+							children: a
+						}),
+						/* @__PURE__ */ S("span", {
+							className: "truncate font-medium text-fg-secondary",
+							children: t
+						}),
+						o !== void 0 && /* @__PURE__ */ S("span", {
+							className: "text-fg-tertiary tabular",
+							children: o
+						}),
+						/* @__PURE__ */ S("svg", {
+							viewBox: "0 0 8 8",
+							"aria-hidden": !0,
+							className: e("size-10 text-fg-tertiary transition-transform duration-200 ease-standard", !s && "rotate-90"),
+							children: /* @__PURE__ */ S("path", {
+								d: "M2.5 1.5 5.5 4l-3 2.5z",
+								fill: "currentColor"
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ S("span", { className: "flex-1" }),
+				u && /* @__PURE__ */ S("span", {
+					className: "flex opacity-0 transition-control group-hover/gh:opacity-100 group-focus-within/gh:opacity-100 coarse:opacity-100",
+					children: /* @__PURE__ */ S(l, {
+						icon: w,
+						"aria-label": d ?? b("list.add", "Add"),
+						size: "xs",
+						onClick: u
+					})
+				})
+			]
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (R.displayName = "GroupHeader");
+var z = /* @__PURE__ */ h(function({ count: e, onClear: n, children: r }, o) {
+	let s = t(), c = i();
+	return typeof document > "u" ? null : E(/* @__PURE__ */ S("div", {
+		ref: o,
+		role: "region",
+		"aria-label": c("list.selection", "Selection"),
+		className: "pointer-events-none fixed right-0 bottom-24 left-0 z-50 flex justify-center px-16",
+		children: /* @__PURE__ */ C("div", {
+			className: "pointer-events-auto flex min-h-44 items-center gap-4 rounded-pill bg-toast py-6 pr-6 pl-16 text-body font-medium text-toast-fg shadow-toast popup-motion",
+			children: [
+				/* @__PURE__ */ S("span", {
+					className: "pr-8 tabular",
+					children: c("list.selected", "{count} selected", { count: String(e) })
+				}),
+				/* @__PURE__ */ S("span", {
+					className: "mr-4 h-20 w-1 bg-toast-action",
+					"aria-hidden": !0
+				}),
+				r,
+				/* @__PURE__ */ S("button", {
+					type: "button",
+					onClick: n,
+					"aria-label": c("list.clearSelection", "Clear selection"),
+					className: "inline-flex size-32 cursor-pointer items-center justify-center rounded-pill text-toast-fg-secondary transition-control hover:bg-toast-action hover:text-toast-fg focus-ring",
+					children: /* @__PURE__ */ S(a, {
+						icon: T,
+						size: "sm"
+					})
+				})
+			]
+		})
+	}), s ?? document.body);
+});
+process.env.NODE_ENV !== "production" && (z.displayName = "SelectionBar");
+var B = /* @__PURE__ */ h(function({ children: t, onClick: n, icon: r, danger: i }, o) {
+	return /* @__PURE__ */ C("button", {
+		ref: o,
+		type: "button",
+		onClick: n,
+		className: e("inline-flex h-32 cursor-pointer items-center gap-6 rounded-pill px-12 text-body font-medium transition-control hover:bg-toast-action focus-ring", i ? "text-toast-danger" : "text-toast-fg", r && "pl-10"),
+		children: [r && /* @__PURE__ */ S(a, {
+			icon: r,
+			size: "sm",
+			className: i ? void 0 : "text-toast-fg-secondary"
+		}), t]
+	});
+});
+process.env.NODE_ENV !== "production" && (B.displayName = "SelectionAction");
+//#endregion
+export { L as a, F as i, A as n, B as o, k as r, z as s, R as t };
+
+//# sourceMappingURL=list-B4G-sWwV.js.map