themelia-react-ui 2.0.5 → 3.0.0

package/dist/features/kanban.js

@@ -1,32 +1,38 @@
 "use client";
 import { useStrings as e } from "../lib/strings.js";
-import { t } from "../utils-B6kKb8jB.js";
-import { n } from "../buttons-BedGfygC.js";
-import { c as r } from "../typography-BQnine1k.js";
-import { i } from "../tone-recipes-BPsRAvhu.js";
-import { i as a } from "../popover.recipes-DdiEp0rd.js";
-import { n as o } from "../action-menu-Dr8K-ghE.js";
-import { createContext as s, forwardRef as c, useCallback as l, useContext as u, useEffect as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { DndContext as v, DragOverlay as y, KeyboardSensor as b, PointerSensor as x, useDroppable as S, useSensor as C, useSensors as w } from "@dnd-kit/core";
-import { SortableContext as T, useSortable as E, verticalListSortingStrategy as D } from "@dnd-kit/sortable";
-import { CSS as O } from "@dnd-kit/utilities";
+import { t } from "../utils-BVbAG2J6.js";
+import { c as n } from "../typography-C0dELqYV.js";
+import { t as r } from "../focus-recipes-DSkiUvUp.js";
+import { n as i } from "../buttons-pZVgPTZn.js";
+import { i as a } from "../tone-recipes-BPsRAvhu.js";
+import { i as o } from "../popover.recipes-BqkdvlZn.js";
+import { n as s } from "../action-menu-D5343RwT.js";
+import { t as c } from "../interaction-recipes-DmuS1ase.js";
+import { createContext as l, forwardRef as u, useCallback as d, useContext as f, useEffect as p, useLayoutEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { DndContext as b, DragOverlay as x, KeyboardSensor as S, PointerSensor as C, useDroppable as w, useSensor as T, useSensors as E } from "@dnd-kit/core";
+import { SortableContext as D, useSortable as O, verticalListSortingStrategy as k } from "@dnd-kit/sortable";
+import { CSS as A } from "@dnd-kit/utilities";
 //#region src/components/features/kanban/kanban-keyboard.ts
-function k(e, t, n) {
-	let r = Object.keys(e), i = r.indexOf(t.columnId);
+function j(e, t, n, r) {
+	let i = Object.keys(e), a = i.indexOf(t.columnId);
 	if (n === "ArrowLeft" || n === "ArrowRight") {
-		let a = r[i + (n === "ArrowRight" ? 1 : -1)];
-		return a ? {
-			columnId: a,
-			index: Math.min(t.index, e[a].length)
+		let r = i[a + (n === "ArrowRight" ? 1 : -1)];
+		return r ? {
+			columnId: r,
+			index: Math.min(t.index, e[r].length)
 		} : t;
 	}
-	return n === "ArrowUp" || n === "ArrowDown" ? {
-		columnId: t.columnId,
-		index: Math.max(0, Math.min(e[t.columnId].length - 1, t.index + (n === "ArrowDown" ? 1 : -1)))
-	} : t;
+	if (n === "ArrowUp" || n === "ArrowDown") {
+		let i = e[t.columnId].length, a = r !== void 0 && r !== t.columnId ? i : i - 1;
+		return {
+			columnId: t.columnId,
+			index: Math.max(0, Math.min(a, t.index + (n === "ArrowDown" ? 1 : -1)))
+		};
+	}
+	return t;
 }
-function A(e, t, n, r, i) {
+function M(e, t, n, r, i) {
 	return (a, { currentCoordinates: o, context: s }) => {
 		if (![
 			"ArrowUp",
@@ -36,22 +42,22 @@ function A(e, t, n, r, i) {
 		].includes(a.code)) return;
 		let c = s.active;
 		if (!c) return;
-		let l = r.current ?? n(String(c.id));
-		if (!l) return;
+		let l = n(String(c.id)), u = r.current ?? l;
+		if (!u) return;
 		a.preventDefault();
-		let u = k(e, l, a.code);
-		r.current = u, i?.(u);
-		let d = e[u.columnId][u.index], f = d === void 0 ? u.columnId : t(d), p = s.droppableRects.get(f), m = s.collisionRect;
-		return !p || !m ? o : {
-			x: o.x + p.left - m.left,
-			y: o.y + p.top - m.top
+		let d = j(e, u, a.code, l?.columnId);
+		r.current = d, i?.(d);
+		let f = e[d.columnId][d.index], p = f === void 0 ? d.columnId : t(f), m = s.droppableRects.get(p), h = s.collisionRect;
+		return !m || !h ? o : {
+			x: o.x + m.left - h.left,
+			y: o.y + m.top - h.top
 		};
 	};
 }
 //#endregion
 //#region src/components/features/kanban/hooks/use-kanban.ts
-function j({ value: e, onValueChange: t, getItemValue: n, onItemMove: r }) {
-	let i = l((t) => {
+function N({ value: e, onValueChange: t, getItemValue: n, onItemMove: r }) {
+	let i = d((t) => {
 		for (let [r, i] of Object.entries(e)) {
 			let e = i.findIndex((e) => n(e) === t);
 			if (e >= 0) return {
@@ -60,15 +66,15 @@ function j({ value: e, onValueChange: t, getItemValue: n, onItemMove: r }) {
 				item: i[e]
 			};
 		}
-	}, [e, n]), a = l(({ itemId: n, toColumnId: a, toIndex: o }) => {
+	}, [e, n]), a = d(({ itemId: n, toColumnId: a, toIndex: o }) => {
 		let s = i(n);
 		if (!s || !Object.prototype.hasOwnProperty.call(e, a)) return;
-		let { columnId: c, index: l, item: u } = s, d = e[a], f = o === void 0 ? d.length : Math.max(0, Math.min(o, d.length));
-		if (c === a && l === f) return;
-		let p = { ...e }, m = [...p[c]];
-		m.splice(l, 1), p[c] = m;
-		let h = [...c === a ? m : p[a]], g = f;
-		c === a && l < f && (g = Math.max(0, f - 1)), h.splice(g, 0, u), p[a] = h, t(p), r?.({
+		let { columnId: c, index: l, item: u } = s, d = e[a], f = c === a, p = o === void 0 ? d.length : Math.max(0, Math.min(o, d.length)), m = f && l < p ? p - 1 : p;
+		if (f && l === m) return;
+		let h = { ...e }, g = [...h[c]];
+		g.splice(l, 1), h[c] = g;
+		let _ = f ? g : [...h[a]];
+		_.splice(m, 0, u), h[a] = _, t(h), r?.({
 			item: u,
 			itemId: n,
 			from: {
@@ -77,7 +83,7 @@ function j({ value: e, onValueChange: t, getItemValue: n, onItemMove: r }) {
 			},
 			to: {
 				columnId: a,
-				index: g
+				index: m
 			}
 		});
 	}, [
@@ -86,177 +92,186 @@ function j({ value: e, onValueChange: t, getItemValue: n, onItemMove: r }) {
 		t,
 		r
 	]);
-	return p(() => ({
+	return h(() => ({
 		findItem: i,
 		move: a
 	}), [i, a]);
 }
 //#endregion
 //#region src/components/features/kanban/kanban-context.tsx
-var M = s(null), N = M.Provider;
-function P() {
-	let e = u(M);
+var P = l(null), F = P.Provider;
+function I() {
+	let e = f(P);
 	if (!e) throw Error("Kanban subcomponents must be rendered inside a <Kanban> root.");
 	return e;
 }
-var F = s(null), I = F.Provider;
-function L() {
-	let e = u(F);
+var L = l(null), R = L.Provider;
+function z() {
+	let e = f(L);
 	if (!e) throw Error("<KanbanItemHandle> / <KanbanItemActions> must be rendered inside a <KanbanItem>.");
 	return e;
 }
 //#endregion
 //#region src/components/features/kanban/kanban.strings.ts
-var R = {
+var B = {
 	announceDragStart: "Picked up item {name}.",
 	announceDragMove: "Moving {name} from {from} to {to}, position {position}.",
 	announceDragEnd: "Dropped {name} into {to}, position {position}.",
 	announceDragCancel: "Cancelled drag of {name}.",
-	dragHandleAria: "Drag handle",
+	dragHandleAria: "Drag {name}",
 	boardAria: "Kanban board",
-	itemActionsAria: "Item actions"
+	itemActionsAria: "Item actions",
+	openItemAria: "Open {name}"
 };
-function z(e, t) {
+function V(e, t) {
 	return Object.entries(t).reduce((e, [t, n]) => e.replace(RegExp(`\\{${t}\\}`, "g"), n), e);
 }
 //#endregion
 //#region src/components/features/kanban/kanban.tsx
-function B({ value: n, onValueChange: i, getItemValue: a, getItemLabel: o, getColumnLabel: s, onItemMove: c, itemActions: u, onItemClick: d, strings: y, className: S, children: T }) {
-	let E = e(R, y), { findItem: D, move: O } = j({
-		value: n,
+var H = { activationConstraint: { distance: 6 } }, U = {
+	start: ["Space"],
+	cancel: ["Escape"],
+	end: [
+		"Space",
+		"Enter",
+		"Tab"
+	]
+};
+function W({ value: r, onValueChange: i, getItemValue: a, getItemLabel: o, getColumnLabel: s, onItemMove: c, itemActions: l, onItemClick: u, strings: f, className: p, children: x }) {
+	let w = e(B, f), { findItem: D, move: O } = N({
+		value: r,
 		onValueChange: i,
 		getItemValue: a,
 		onItemMove: c
-	}), [k, M] = h(null), P = m(null), F = m(null);
-	f(() => {
-		if (k || !F.current) return;
-		let e = Array.from(P.current?.querySelectorAll("[data-kanban-item-id]") ?? []).find((e) => e.dataset.kanbanItemId === F.current), t = e?.querySelector("[data-slot=\"kanban-item-handle\"]") ?? e;
-		t && (t.focus(), F.current = null);
-	}, [k, n]);
-	let I = m(null), L = m(null), [B, V] = h(null), H = m(null), U = p(() => A(n, a, D, H, V), [
-		n,
+	}), [k, A] = _(null), j = g(null), P = g(null);
+	m(() => {
+		if (k || !P.current) return;
+		let e = Array.from(j.current?.querySelectorAll("[data-kanban-item-id]") ?? []).find((e) => e.dataset.kanbanItemId === P.current), t = e?.querySelector(".kanban-item-handle--component") ?? e;
+		t && (t.focus(), P.current = null);
+	}, [k, r]);
+	let I = g(null), L = g(null), [R, z] = _(null), W = g(null), G = h(() => M(r, a, D, W, z), [
+		r,
 		a,
 		D
-	]), W = w(C(x, { activationConstraint: { distance: 6 } }), C(b, { coordinateGetter: U })), G = p(() => k ? D(k)?.item ?? null : null, [k, D]), K = l((e) => {
+	]), [K, q] = _(0), J = d(() => (q((e) => e + 1), () => q((e) => Math.max(0, e - 1))), []), Y = h(() => ({
+		coordinateGetter: G,
+		...K > 0 ? { keyboardCodes: U } : {}
+	}), [K, G]), X = E(T(C, H), T(S, Y)), Z = h(() => k ? D(k)?.item ?? null : null, [k, D]), Q = d((e) => {
 		let t = D(String(e.active.id));
 		I.current = t ? {
 			columnId: t.columnId,
 			index: t.index,
 			name: o?.(t.item) ?? String(e.active.id)
-		} : null, L.current = null, V(null), H.current = null, F.current = e.activatorEvent instanceof KeyboardEvent ? String(e.active.id) : null, M(String(e.active.id));
-	}, [D, o]), q = l((e) => {
-		M(null), V(null);
-		let { active: t, over: r } = e, i = H.current;
-		if (L.current = i, H.current = null, i) {
-			let e = D(String(t.id)), n = e?.columnId === i.columnId && e.index < i.index ? i.index + 1 : i.index;
-			O({
-				itemId: String(t.id),
-				toColumnId: i.columnId,
-				toIndex: n
-			});
-			return;
-		}
-		if (!r) return;
-		t.data.current;
-		let a = r.data.current, o = String(r.id), s = a?.columnId ?? (Object.prototype.hasOwnProperty.call(n, o) ? o : void 0);
-		if (!s) return;
-		let c = a?.columnId === void 0 ? n[s].length : a.index;
+		} : null, L.current = null, z(null), W.current = null, P.current = e.activatorEvent instanceof KeyboardEvent ? String(e.active.id) : null, A(String(e.active.id));
+	}, [D, o]), ee = d((e) => {
+		A(null), z(null);
+		let { active: t, over: n } = e, i = W.current;
+		L.current = i, W.current = null;
+		let a = n?.data.current, o = n ? String(n.id) : void 0, s = i?.columnId ?? a?.columnId ?? (o !== void 0 && Object.hasOwn(r, o) ? o : void 0);
+		if (s === void 0) return;
+		let c = String(t.id), l = D(c), u = i?.index ?? a?.index, d = u !== void 0 && l?.columnId === s && l.index < u ? u + 1 : u;
 		O({
-			itemId: String(t.id),
+			itemId: c,
 			toColumnId: s,
-			toIndex: c
+			toIndex: d
 		});
 	}, [
 		O,
-		n,
+		r,
 		D
-	]), J = p(() => ({
-		value: n,
+	]), te = h(() => ({
+		value: r,
 		onValueChange: i,
 		getItemValue: a,
 		activeId: k,
-		activeItem: G,
+		activeItem: Z,
 		findItem: D,
-		itemActions: u,
-		onItemClick: d
+		itemActions: l,
+		onItemClick: u,
+		getItemLabel: o,
+		strings: w,
+		registerEnterActivation: J
 	}), [
-		n,
+		r,
 		i,
 		a,
 		k,
-		G,
+		Z,
 		D,
+		l,
 		u,
-		d
-	]), Y = (e, t) => {
-		let r = D(e), i = I.current, a = t ? D(t) : void 0, c = H.current ?? L.current ?? a ?? (t && n[t] ? {
+		o,
+		w,
+		J
+	]), $ = (e, t) => {
+		let n = D(e), i = I.current, a = t ? D(t) : void 0, c = W.current ?? L.current ?? a ?? (t && r[t] ? {
 			columnId: t,
-			index: n[t].length
+			index: r[t].length
 		} : i), l = (e) => e ? s?.(e) ?? e : "";
 		return {
-			name: i?.name ?? (r ? o?.(r.item) ?? e : e),
+			name: i?.name ?? (n ? o?.(n.item) ?? e : e),
 			from: l(i?.columnId),
 			to: l(c?.columnId),
 			position: String((c?.index ?? 0) + 1)
 		};
 	};
-	return /* @__PURE__ */ g(N, {
-		value: J,
-		children: /* @__PURE__ */ g(v, {
-			sensors: W,
-			onDragStart: K,
-			onDragEnd: q,
+	return /* @__PURE__ */ v(F, {
+		value: te,
+		children: /* @__PURE__ */ v(b, {
+			sensors: X,
+			onDragStart: Q,
+			onDragEnd: ee,
 			onDragCancel: () => {
-				H.current = null, V(null), M(null);
+				W.current = null, z(null), A(null);
 			},
 			accessibility: { announcements: {
 				onDragStart({ active: e }) {
-					return z(E.announceDragStart, Y(String(e.id)));
+					return V(w.announceDragStart, $(String(e.id)));
 				},
 				onDragMove({ active: e, over: t }) {
-					if (!F.current) return z(E.announceDragMove, Y(String(e.id), t ? String(t.id) : void 0));
+					if (!P.current) return V(w.announceDragMove, $(String(e.id), t ? String(t.id) : void 0));
 				},
 				onDragOver({ active: e, over: t }) {
-					if (!F.current) return z(E.announceDragMove, Y(String(e.id), t ? String(t.id) : void 0));
+					if (!P.current) return V(w.announceDragMove, $(String(e.id), t ? String(t.id) : void 0));
 				},
 				onDragEnd({ active: e, over: t }) {
-					return z(E.announceDragEnd, Y(String(e.id), t ? String(t.id) : void 0));
+					return V(w.announceDragEnd, $(String(e.id), t ? String(t.id) : void 0));
 				},
 				onDragCancel({ active: e }) {
-					return z(E.announceDragCancel, Y(String(e.id)));
+					return V(w.announceDragCancel, $(String(e.id)));
 				}
 			} },
-			children: /* @__PURE__ */ _("div", {
-				ref: P,
+			children: /* @__PURE__ */ y("div", {
+				ref: j,
 				role: "application",
-				"aria-label": E.boardAria,
-				className: t("kanban--component", "w-full", S),
-				children: [T, /* @__PURE__ */ g("div", {
+				"aria-label": w.boardAria,
+				className: t("kanban--component", "w-full", p),
+				children: [x, /* @__PURE__ */ v("div", {
 					className: "kanban--keyboard-announcement sr-only",
 					role: "status",
 					"aria-live": "assertive",
 					"aria-atomic": "true",
-					children: /* @__PURE__ */ g(r, {
+					children: /* @__PURE__ */ v(n, {
 						tag: "span",
-						children: k && B ? z(E.announceDragMove, Y(k)) : ""
+						children: k && R ? V(w.announceDragMove, $(k)) : ""
 					})
 				})]
 			})
 		})
 	});
 }
-B.displayName = "Kanban";
-function V({ className: e, style: n, children: r }) {
-	return /* @__PURE__ */ g("div", {
+W.displayName = "Kanban";
+function G({ className: e, style: n, children: r }) {
+	return /* @__PURE__ */ v("div", {
 		className: t("grid w-full gap-space-lg", e),
 		style: n,
 		children: r
 	});
 }
-V.displayName = "KanbanBoard";
-function H({ value: e, className: n, children: r }) {
-	let { setNodeRef: i, isOver: a } = S({ id: e });
-	return /* @__PURE__ */ g("div", {
+G.displayName = "KanbanBoard";
+function K({ value: e, className: n, children: r }) {
+	let { setNodeRef: i, isOver: a } = w({ id: e });
+	return /* @__PURE__ */ v("div", {
 		ref: i,
 		"data-slot": "kanban-column",
 		"data-column-id": e,
@@ -265,159 +280,214 @@ function H({ value: e, className: n, children: r }) {
 		children: r
 	});
 }
-H.displayName = "KanbanColumn";
-function U({ value: e, className: n, children: r }) {
-	let i = P(), a = (i.value[e] ?? []).map((e) => i.getItemValue(e));
-	return /* @__PURE__ */ g(T, {
+K.displayName = "KanbanColumn";
+function q({ value: e, className: n, children: r }) {
+	let i = I(), a = (i.value[e] ?? []).map((e) => i.getItemValue(e));
+	return /* @__PURE__ */ v(D, {
 		items: a,
-		strategy: D,
-		children: /* @__PURE__ */ g("div", {
+		strategy: k,
+		children: /* @__PURE__ */ v("div", {
 			"data-slot": "kanban-column-content",
 			className: t("flex flex-col gap-space-md", n),
 			children: r
 		})
 	});
 }
-U.displayName = "KanbanColumnContent";
-function W({ value: e, className: n, disabled: r = !1, onClick: i, children: a }) {
-	let o = P(), s = o.findItem(e), { attributes: c, listeners: u, setNodeRef: d, setActivatorNodeRef: f, transform: m, transition: _, isDragging: v } = E({
+q.displayName = "KanbanColumnContent";
+function J({ value: e, className: n, disabled: i = !1, onClick: a, children: o }) {
+	let s = I(), l = s.findItem(e), { attributes: u, listeners: f, setNodeRef: m, setActivatorNodeRef: g, transform: b, transition: x, isDragging: S } = O({
 		id: e,
-		disabled: r,
+		disabled: i,
 		data: {
-			columnId: s?.columnId,
-			index: s?.index
+			columnId: l?.columnId,
+			index: l?.index
+		}
+	}), C = {
+		transform: A.Transform.toString(b),
+		transition: x,
+		opacity: S ? .4 : void 0
+	}, [w, T] = _(0), E = w > 0, D = d(() => (T((e) => e + 1), () => T((e) => Math.max(0, e - 1))), []), [k, j] = _(0), M = d(() => (j((e) => e + 1), () => j((e) => Math.max(0, e - 1))), []), N = s.onItemClick, P = l?.item, F = !!(a || N), L = d(() => {
+		if (a) {
+			a();
+			return;
 		}
-	}), y = {
-		transform: O.Transform.toString(m),
-		transition: _,
-		opacity: v ? .4 : void 0
-	}, [b, x] = h(0), S = b > 0, C = l(() => (x((e) => e + 1), () => x((e) => Math.max(0, e - 1))), []), w = p(() => ({
-		listeners: u,
-		attributes: c,
-		setActivatorNodeRef: f,
-		registerHandle: C,
+		N && P !== void 0 && N(P);
+	}, [
+		a,
+		N,
+		P
+	]), z = h(() => ({
+		listeners: f,
+		attributes: u,
+		setActivatorNodeRef: g,
+		registerHandle: D,
+		registerTrigger: M,
 		itemId: e,
-		item: s?.item ?? null
+		item: l?.item ?? null,
+		activate: F ? L : void 0
 	}), [
-		u,
-		c,
 		f,
-		C,
+		u,
+		g,
+		D,
+		M,
 		e,
-		s?.item
-	]), T = o.onItemClick, D = l((e) => {
-		if (!e.target?.closest("[data-stop-item-click]")) {
-			if (i) {
-				i();
-				return;
-			}
-			T && s?.item !== void 0 && T(s.item);
+		l?.item,
+		F,
+		L
+	]), H = d((e) => {
+		e.target?.closest("[data-stop-item-click]") || L();
+	}, [L]), U = F && !E && !i, { registerEnterActivation: W } = s;
+	p(() => {
+		if (U) return W?.();
+	}, [U, W]);
+	let G = f?.onKeyDown, K = (e) => {
+		if (U && !s.activeId && e.key === "Enter" && e.target === e.currentTarget) {
+			e.preventDefault(), L();
+			return;
 		}
-	}, [
-		i,
-		T,
-		s?.item
-	]), k = !!(i || T);
-	return /* @__PURE__ */ g(I, {
-		value: w,
-		children: /* @__PURE__ */ g("div", {
-			ref: d,
-			style: y,
+		E || G?.(e);
+	}, q = F && E && k === 0 && !i, J = q ? V(s.strings?.openItemAria ?? B.openItemAria, { name: P === void 0 ? e : s.getItemLabel?.(P) ?? e }) : void 0;
+	return /* @__PURE__ */ v(R, {
+		value: z,
+		children: /* @__PURE__ */ y("div", {
+			ref: m,
+			style: C,
 			"data-slot": "kanban-item",
 			"data-kanban-item-id": e,
-			"data-dragging": v ? "true" : void 0,
-			className: t("touch-none select-none", k && "cursor-pointer", n),
-			onClick: k ? D : void 0,
-			...S ? {} : c,
-			...S ? {} : u,
-			children: a
+			"data-dragging": S ? "true" : void 0,
+			className: t("touch-none select-none", F && "cursor-pointer", q && "relative", n),
+			...E ? {} : u,
+			...E ? {} : f,
+			onClick: F ? H : void 0,
+			onKeyDown: K,
+			children: [q && /* @__PURE__ */ v("button", {
+				type: "button",
+				"data-slot": "kanban-item-open",
+				"data-stop-item-click": !0,
+				"aria-label": J,
+				onClick: (e) => {
+					e.stopPropagation(), L();
+				},
+				className: t("kanban-item--open pointer-events-none absolute inset-0 z-0 rounded-radius focus-visible:outline-none", c.nativeButtonReset, r.inset)
+			}), o]
 		})
 	});
 }
-W.displayName = "KanbanItem";
-var G = c(function({ className: e, children: r }, i) {
-	let { setActivatorNodeRef: a, listeners: o, attributes: s, registerHandle: c } = L();
-	d(() => c(), [c]);
-	let u = l((e) => {
-		a(e), typeof i == "function" ? i(e) : i && (i.current = e);
-	}, [a, i]);
-	return /* @__PURE__ */ g(n, {
+J.displayName = "KanbanItem";
+var Y = u(function({ className: e, ariaLabel: n, children: r }, a) {
+	let { setActivatorNodeRef: o, listeners: s, attributes: c, registerHandle: l, item: u, itemId: f } = z(), { strings: h = B, getItemLabel: y } = I();
+	p(() => l(), [l]);
+	let b = g(null), [x, S] = _(!0);
+	m(() => {
+		S(!!b.current?.textContent?.trim());
+	}, [r]);
+	let C = n ?? (x ? void 0 : V(h.dragHandleAria, { name: u === null ? f : y?.(u) ?? f })), w = d((e) => {
+		b.current = e, o(e), typeof a == "function" ? a(e) : a && (a.current = e);
+	}, [o, a]);
+	return /* @__PURE__ */ v(i, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "ghost",
 		size: "sm",
 		iconOnly: !0,
-		ref: u,
+		ref: w,
 		"data-slot": "kanban-item-handle",
 		"data-stop-item-click": !0,
 		onClick: (e) => e.stopPropagation(),
-		className: t("cursor-grab shadow-none active:cursor-grabbing", e),
+		className: t("kanban-item-handle--component cursor-grab shadow-none active:cursor-grabbing", e),
+		...c,
 		...s,
-		...o,
+		"aria-label": C,
 		children: r
 	});
 });
-G.displayName = "KanbanItemHandle";
-function K({ className: t, icon: n, ariaLabel: r }) {
-	let i = P(), s = L(), c = e(R, void 0), l = s.item, u = i.itemActions, d = p(() => !u || l == null ? [] : (typeof u == "function" ? u(l) : u).flatMap((e) => {
-		let t = typeof e.visible == "function" ? e.visible(l) : e.visible ?? !0;
+Y.displayName = "KanbanItemHandle";
+var X = u(function({ className: e, children: i }, a) {
+	let { activate: o, registerTrigger: s } = z();
+	p(() => s?.(), [s]);
+	let l = typeof i == "string" ? /* @__PURE__ */ v(n, {
+		tag: "span",
+		type: "inherit",
+		weight: "semibold",
+		children: i
+	}) : i;
+	return o ? /* @__PURE__ */ v("button", {
+		ref: a,
+		type: "button",
+		"data-slot": "kanban-item-trigger",
+		"data-stop-item-click": !0,
+		onClick: (e) => {
+			e.stopPropagation(), o();
+		},
+		className: t("kanban-item-trigger--component min-w-0 cursor-pointer rounded-radius-xs text-start text-inherit", c.nativeButtonReset, r.text, e),
+		children: l
+	}) : /* @__PURE__ */ v("span", {
+		className: t("kanban-item-trigger--component min-w-0", e),
+		children: l
+	});
+});
+X.displayName = "KanbanItemTrigger";
+function Z({ className: e, icon: t, ariaLabel: n }) {
+	let r = I(), i = z(), a = r.strings ?? B, c = i.item, l = r.itemActions, u = h(() => !l || c == null ? [] : (typeof l == "function" ? l(c) : l).flatMap((e) => {
+		let t = typeof e.visible == "function" ? e.visible(c) : e.visible ?? !0;
 		if (!t) return [];
-		let n = typeof e.disabled == "function" ? e.disabled(l) : e.disabled ?? !1;
+		let n = typeof e.disabled == "function" ? e.disabled(c) : e.disabled ?? !1;
 		return [{
 			...e,
 			visible: t,
 			disabled: n
 		}];
-	}), [u, l]);
-	if (l === null || d.length === 0) return null;
-	let f = d.map((e) => ({
+	}), [l, c]);
+	if (c === null || u.length === 0) return null;
+	let d = u.map((e) => ({
 		id: e.id,
 		label: e.label,
 		icon: e.icon,
 		disabled: e.disabled,
 		tone: e.tone,
 		buttonStyle: e.buttonStyle,
-		onClick: () => e.onClick(l)
+		onClick: () => e.onClick(c)
 	}));
-	return /* @__PURE__ */ g("span", {
+	return /* @__PURE__ */ v("span", {
 		className: "kanban-item-actions--component inline-flex",
 		"data-stop-item-click": !0,
 		onClick: (e) => e.stopPropagation(),
 		onPointerDown: (e) => e.stopPropagation(),
-		children: /* @__PURE__ */ g(o, {
-			actions: f,
-			icon: n ?? void 0,
-			srText: r ?? c.itemActionsAria,
-			width: a.xs,
+		children: /* @__PURE__ */ v(s, {
+			actions: d,
+			icon: t ?? void 0,
+			srText: n ?? a.itemActionsAria,
+			width: o.xs,
 			align: "end",
 			buttonProps: {
-				className: t,
+				className: e,
 				"data-slot": "kanban-item-actions-trigger",
 				"data-stop-item-click": !0,
-				"aria-label": r ?? c.itemActionsAria
+				"aria-label": n ?? a.itemActionsAria
 			}
 		})
 	});
 }
-K.displayName = "KanbanItemActions";
-function q({ className: e, render: n }) {
-	let { activeItem: a, activeId: o, findItem: s } = P();
-	return /* @__PURE__ */ g(y, { children: o ? n ? n({
-		item: a,
+Z.displayName = "KanbanItemActions";
+function Q({ className: e, render: r }) {
+	let { activeItem: i, activeId: o, findItem: s, getItemLabel: c } = I();
+	return /* @__PURE__ */ v(x, { children: o ? r ? r({
+		item: i,
 		columnId: s(o)?.columnId ?? null
-	}) : /* @__PURE__ */ g("div", {
-		className: t("kanban-overlay--component pointer-events-none rounded-surface border-2 border-dashed p-surface shadow-lg", i.primary.edge, i.primary.wash, e),
-		children: /* @__PURE__ */ g(r, {
+	}) : /* @__PURE__ */ v("div", {
+		className: t("kanban-overlay--component pointer-events-none rounded-surface border-2 border-dashed p-surface shadow-lg", a.primary.edge, a.primary.wash, e),
+		children: /* @__PURE__ */ v(n, {
 			tag: "span",
 			size: "xs",
 			weight: "medium",
 			className: "text-primary-accent",
-			children: o
+			children: i === null ? o : c?.(i) ?? o
 		})
 	}) : null });
 }
-q.displayName = "KanbanOverlay";
+Q.displayName = "KanbanOverlay";
 //#endregion
-export { B as Kanban, V as KanbanBoard, H as KanbanColumn, U as KanbanColumnContent, W as KanbanItem, K as KanbanItemActions, G as KanbanItemHandle, q as KanbanOverlay, R as defaultKanbanStrings, z as interpolateKanbanString, j as useKanban };
+export { W as Kanban, G as KanbanBoard, K as KanbanColumn, q as KanbanColumnContent, J as KanbanItem, Z as KanbanItemActions, Y as KanbanItemHandle, X as KanbanItemTrigger, Q as KanbanOverlay, B as defaultKanbanStrings, V as interpolateKanbanString, N as useKanban };
 
 //# sourceMappingURL=kanban.js.map