tembro 4.0.0 → 4.1.0

package/dist/src/components/display/kanban.js

@@ -1,39 +1,42 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
-import { Card as t, CardContent as n, CardHeader as r, CardTitle as i } from "../ui/card/index.js";
-import { move as a } from "../../../node_modules/@dnd-kit/helpers/dist/index.js";
-import { DragDropProvider as o, DragOverlay as s, useDroppable as c } from "../../../node_modules/@dnd-kit/react/index.js";
-import { isSortable as l } from "../../../node_modules/@dnd-kit/dom/sortable.js";
-import { useSortable as u } from "../../../node_modules/@dnd-kit/react/sortable.js";
-import * as d from "react";
-import { GripVerticalIcon as f } from "lucide-react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Button as t } from "../ui/button/index.js";
+import { Badge as n } from "../ui/badge/index.js";
+import { Card as r, CardContent as i, CardHeader as a, CardTitle as o } from "../ui/card/index.js";
+import { Avatar as s } from "./avatar.js";
+import { move as c } from "../../../node_modules/@dnd-kit/helpers/dist/index.js";
+import { DragDropProvider as l, DragOverlay as u, useDroppable as d } from "../../../node_modules/@dnd-kit/react/index.js";
+import { isSortable as f } from "../../../node_modules/@dnd-kit/dom/sortable.js";
+import { useSortable as p } from "../../../node_modules/@dnd-kit/react/sortable.js";
+import * as m from "react";
+import { CalendarDaysIcon as h, CheckIcon as g, GripVerticalIcon as _, PlusIcon as v } from "lucide-react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region src/components/display/kanban.tsx
-var h = "tembro-kanban-card:", g = "tembro-kanban-column:";
-function _(e) {
-	return `${h}${e}`;
+var x = "tembro-kanban-card:", S = "tembro-kanban-column:";
+function C(e) {
+	return `${x}${e}`;
 }
-function v(e) {
-	return `${g}${e}`;
+function w(e) {
+	return `${S}${e}`;
 }
-function y(e) {
-	return e.startsWith(h) ? e.slice(19) : e;
+function T(e) {
+	return e.startsWith(x) ? e.slice(19) : e;
 }
-function b(e) {
+function E(e) {
 	let t = e === void 0 ? "" : String(e);
-	return t.startsWith(g) ? t.slice(21) : t;
+	return t.startsWith(S) ? t.slice(21) : t;
 }
-function x(e) {
-	return new Map(e.flatMap((e) => e.cards.map((e) => [_(e.key), e])));
+function D(e) {
+	return new Map(e.flatMap((e) => e.cards.map((e) => [C(e.key), e])));
 }
-function S(e, t) {
-	let n = x(e), r = a(Object.fromEntries(e.map((e) => [v(e.key), e.cards.map((e) => _(e.key))])), t);
+function O(e, t) {
+	let n = D(e), r = c(Object.fromEntries(e.map((e) => [w(e.key), e.cards.map((e) => C(e.key))])), t);
 	return e.map((e) => ({
 		...e,
-		cards: (r[v(e.key)] ?? []).map((e) => n.get(String(e))).filter((e) => !!e)
+		cards: (r[w(e.key)] ?? []).map((e) => n.get(String(e))).filter((e) => !!e)
 	}));
 }
-function C(e, t, n) {
+function ee(e, t, n) {
 	let r = e.find((e) => e.key === t.columnKey), i = e.find((e) => e.key === n.columnKey);
 	if (!r || !i) return null;
 	let a = r.cards.find((e) => e.key === t.cardKey);
@@ -64,49 +67,116 @@ function C(e, t, n) {
 		}
 	};
 }
-var w = d.forwardRef(function({ label: e, disabled: t }, n) {
-	return /* @__PURE__ */ p("button", {
+function k(e, t, n) {
+	let r = e.find((e) => e.cards.some((e) => e.key === n)), i = t.find((e) => e.cards.some((e) => e.key === n)), a = r?.cards.find((e) => e.key === n);
+	return !r || !i || !a ? null : {
+		card: a,
+		fromColumn: r,
+		toColumn: i,
+		fromIndex: r.cards.findIndex((e) => e.key === n),
+		toIndex: i.cards.findIndex((e) => e.key === n)
+	};
+}
+function A(e, t, n, r, i, a) {
+	let o = k(e, t, n);
+	if (!o) return !1;
+	let s = o.fromColumn.key !== o.toColumn.key;
+	return s && !r || !s && !i || s && o.toColumn.limit !== void 0 && o.toColumn.cards.length > o.toColumn.limit ? !1 : a?.(o) ?? !0;
+}
+var j = m.forwardRef(function({ label: e, disabled: t }, n) {
+	return /* @__PURE__ */ y("button", {
 		ref: n,
 		type: "button",
 		className: "inline-flex size-8 shrink-0 touch-none items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-45",
 		"aria-label": e,
 		disabled: t,
 		onClick: (e) => e.stopPropagation(),
-		children: /* @__PURE__ */ p(f, {
+		children: /* @__PURE__ */ y(_, {
 			className: "size-4",
 			"aria-hidden": "true"
 		})
 	});
 });
-function T({ card: e, handle: a }) {
-	return /* @__PURE__ */ m(t, {
-		className: "transition-colors hover:bg-muted/40",
-		children: [/* @__PURE__ */ p(r, {
-			className: "p-3 pb-1",
-			children: /* @__PURE__ */ m("div", {
+function M({ card: e, handle: t, selectControl: c }) {
+	let l = e.priority === "urgent" ? "danger" : e.priority === "high" ? "warning" : e.priority === "medium" ? "info" : "muted";
+	return /* @__PURE__ */ b(r, {
+		className: "border-border/80 shadow-sm transition-[border-color,box-shadow,transform] hover:-translate-y-0.5 hover:border-foreground/20 hover:shadow-md",
+		children: [/* @__PURE__ */ y(a, {
+			className: "p-3.5 pb-2",
+			children: /* @__PURE__ */ b("div", {
 				className: "flex items-start justify-between gap-2",
-				children: [/* @__PURE__ */ p(i, {
-					className: "text-sm",
-					children: e.title
-				}), /* @__PURE__ */ m("div", {
+				children: [/* @__PURE__ */ b("div", {
+					className: "flex min-w-0 items-start gap-2",
+					children: [c, /* @__PURE__ */ y(o, {
+						className: "min-w-0 text-sm leading-5",
+						children: e.title
+					})]
+				}), /* @__PURE__ */ b("div", {
 					className: "flex items-center gap-1",
-					children: [e.extra, a]
+					children: [e.extra, t]
 				})]
 			})
-		}), e.description || e.meta ? /* @__PURE__ */ m(n, {
-			className: "grid gap-2 p-3 pt-0 text-xs text-muted-foreground",
-			children: [e.description, e.meta ? /* @__PURE__ */ p("div", { children: e.meta }) : null]
+		}), e.description || e.meta || e.labels?.length || e.priority || e.assignee || e.dueDate || e.actions ? /* @__PURE__ */ b(i, {
+			className: "grid gap-3 p-3.5 pt-0 text-xs text-muted-foreground",
+			children: [
+				e.description ? /* @__PURE__ */ y("div", {
+					className: "line-clamp-3 leading-5",
+					children: e.description
+				}) : null,
+				e.labels?.length || e.priority ? /* @__PURE__ */ b("div", {
+					className: "flex flex-wrap gap-1.5",
+					children: [e.priority ? /* @__PURE__ */ y(n, {
+						size: "sm",
+						tone: l,
+						variant: "soft",
+						label: e.priority,
+						showDot: !0
+					}) : null, e.labels?.map((e, t) => m.isValidElement(e) ? m.cloneElement(e, { key: e.key ?? t }) : typeof e == "object" && e && "key" in e ? /* @__PURE__ */ y(n, {
+						size: "sm",
+						variant: "outline",
+						tone: e.tone,
+						label: e.label
+					}, e.key) : /* @__PURE__ */ y(n, {
+						size: "sm",
+						variant: "outline",
+						label: e
+					}, t))]
+				}) : null,
+				e.meta ? /* @__PURE__ */ y("div", { children: e.meta }) : null,
+				e.assignee || e.dueDate ? /* @__PURE__ */ b("div", {
+					className: "flex items-center justify-between gap-3 border-t pt-2.5",
+					children: [e.assignee ? /* @__PURE__ */ b("div", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [/* @__PURE__ */ y(s, {
+							size: "xs",
+							name: e.assignee.name,
+							src: e.assignee.src,
+							fallback: e.assignee.fallback
+						}), /* @__PURE__ */ y("span", {
+							className: "truncate",
+							children: e.assignee.name
+						})]
+					}) : /* @__PURE__ */ y("span", {}), e.dueDate ? /* @__PURE__ */ b("span", {
+						className: "inline-flex shrink-0 items-center gap-1",
+						children: [/* @__PURE__ */ y(h, { className: "size-3.5" }), e.dueDate]
+					}) : null]
+				}) : null,
+				e.actions ? /* @__PURE__ */ y("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: e.actions
+				}) : null
+			]
 		}) : null]
 	});
 }
-function E({ card: t, column: n, index: r, boardDisabled: i, renderCard: a, onCardClick: o, dragHandleLabel: s, cardClassName: c, onNativeDragStart: l, onNativeDragEnd: d, onNativeDrop: f }) {
-	let m = i || n.disabled === !0 || t.disabled === !0, { ref: h, handleRef: g, isDragging: y, isDropTarget: b } = u({
-		id: _(t.key),
+function N({ card: t, column: n, index: r, boardDisabled: i, renderCard: a, onCardClick: o, selected: s, selectionMode: c, onSelect: l, dragHandleLabel: u, cardClassName: d, onNativeDragStart: f, onNativeDragEnd: m, onNativeDrop: h }) {
+	let _ = i || n.disabled === !0 || t.disabled === !0, { ref: v, handleRef: b, isDragging: x, isDropTarget: S } = p({
+		id: C(t.key),
 		index: r,
-		group: v(n.key),
+		group: w(n.key),
 		type: "tembro-kanban-card",
 		accept: "tembro-kanban-card",
-		disabled: m,
+		disabled: _,
 		data: {
 			cardKey: t.key,
 			columnKey: n.key
@@ -116,203 +186,278 @@ function E({ card: t, column: n, index: r, boardDisabled: i, renderCard: a, onCa
 			easing: "cubic-bezier(0.2, 0, 0, 1)",
 			idle: !0
 		}
-	}), x = /* @__PURE__ */ p(w, {
-		ref: g,
-		label: s?.(t, n) ?? `Move ${String(t.title)}`,
-		disabled: m
-	}), S = {
+	}), T = /* @__PURE__ */ y(j, {
+		ref: b,
+		label: u?.(t, n) ?? `Move ${String(t.title)}`,
+		disabled: _
+	}), E = c === "none" ? null : /* @__PURE__ */ y("button", {
+		type: "button",
+		"aria-label": `${s ? "Deselect" : "Select"} ${String(t.title)}`,
+		"aria-pressed": s,
+		className: e("mt-0.5 grid size-4 shrink-0 place-items-center rounded border bg-background text-primary outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring", s && "border-primary bg-primary text-primary-foreground"),
+		onClick: (e) => {
+			e.stopPropagation(), l(t);
+		},
+		children: s ? /* @__PURE__ */ y(g, {
+			className: "size-3",
+			strokeWidth: 3
+		}) : null
+	}), D = {
 		index: r,
-		isDragging: y,
-		isDropTarget: b,
-		handle: x
+		isDragging: x,
+		isDropTarget: S,
+		selected: s,
+		selectControl: E,
+		handle: T
 	};
-	return /* @__PURE__ */ p("article", {
-		ref: h,
+	return /* @__PURE__ */ y("article", {
+		ref: v,
 		"data-slot": "kanban-card",
-		"data-dragging": y || void 0,
-		"data-drop-target": b || void 0,
-		"data-disabled": m || void 0,
-		role: o && !m ? "button" : void 0,
-		tabIndex: o && !m ? 0 : void 0,
+		"data-dragging": x || void 0,
+		"data-drop-target": S || void 0,
+		"data-disabled": _ || void 0,
+		role: "group",
 		"aria-label": typeof t.title == "string" ? t.title : void 0,
-		draggable: !m,
-		className: e("rounded-lg outline-none transition-[opacity,box-shadow]", o && !m && "cursor-pointer focus-visible:ring-2 focus-visible:ring-ring", b && "ring-2 ring-primary/30", y && "opacity-30", m && "opacity-55", c),
+		draggable: !_,
+		className: e("rounded-lg outline-none transition-[opacity,box-shadow]", o && !_ && "cursor-pointer focus-visible:ring-2 focus-visible:ring-ring", S && "ring-2 ring-primary/30", x && "opacity-30", s && "ring-2 ring-primary/35", _ && "opacity-55", d),
 		onClick: () => {
-			m || o?.(t, n);
+			_ || o?.(t, n);
 		},
 		onDragStart: (e) => {
-			if (m) return;
+			if (_) return;
 			let i = {
 				cardKey: t.key,
 				columnKey: n.key,
 				index: r
 			};
-			e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", JSON.stringify(i)), l?.(i);
+			e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", JSON.stringify(i)), f?.(i);
 		},
-		onDragEnd: d,
+		onDragEnd: m,
 		onDragOver: (e) => {
-			m || e.preventDefault();
+			_ || e.preventDefault();
 		},
 		onDrop: (e) => {
-			m || (e.preventDefault(), e.stopPropagation(), f?.({
+			_ || (e.preventDefault(), e.stopPropagation(), h?.({
 				columnKey: n.key,
 				index: r
 			}));
 		},
-		onKeyDown: (e) => {
-			e.target !== e.currentTarget || m || !o || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), o(t, n));
-		},
-		children: a?.(t, n, S) ?? /* @__PURE__ */ p(T, {
+		children: a?.(t, n, D) ?? /* @__PURE__ */ y(M, {
 			card: t,
-			handle: x
+			handle: T,
+			selectControl: E
 		})
 	});
 }
-function D({ column: t, boardDisabled: n, renderCard: r, onCardClick: i, dragHandleLabel: a, emptyColumn: o, columnClassName: s, cardClassName: l, onNativeDragStart: u, onNativeDragEnd: d, onNativeDrop: f }) {
-	let { ref: h, isDropTarget: g } = c({
-		id: v(t.key),
+function te({ column: r, boardDisabled: i, renderCard: a, onCardClick: o, selectedKeys: s, selectionMode: c, onSelect: l, onAddCard: u, renderColumnHeader: f, renderColumnFooter: p, dragHandleLabel: m, emptyColumn: h, columnClassName: g, cardClassName: _, onNativeDragStart: x, onNativeDragEnd: S, onNativeDrop: C, density: T }) {
+	let { ref: E, isDropTarget: D } = d({
+		id: w(r.key),
 		type: "tembro-kanban-column",
 		accept: "tembro-kanban-card",
-		disabled: n || t.disabled === !0,
+		disabled: i || r.disabled === !0,
 		collisionPriority: 1,
-		data: { columnKey: t.key }
+		data: { columnKey: r.key }
 	});
-	return /* @__PURE__ */ m("section", {
-		ref: h,
+	return /* @__PURE__ */ b("section", {
+		ref: E,
 		"data-slot": "kanban-column",
-		"data-drop-target": g || void 0,
-		"data-disabled": t.disabled || void 0,
-		"aria-label": typeof t.title == "string" ? t.title : void 0,
-		className: e("grid min-h-40 content-start gap-3 rounded-lg border bg-muted/35 p-3 transition-[border-color,background-color,box-shadow]", g && "border-primary/60 bg-primary/5 ring-2 ring-primary/15", t.disabled && "opacity-60", s),
+		"data-drop-target": D || void 0,
+		"data-disabled": r.disabled || void 0,
+		"data-density": T,
+		"aria-label": typeof r.title == "string" ? r.title : void 0,
+		className: e("grid min-h-40 content-start gap-3 rounded-lg border bg-muted/25 p-3 transition-[border-color,background-color,box-shadow] data-[density=compact]:gap-2 data-[density=compact]:p-2.5", D && "border-primary/60 bg-primary/5 ring-2 ring-primary/15", r.disabled && "opacity-60", g),
 		onDragOver: (e) => {
-			n || t.disabled === !0 || e.preventDefault();
+			i || r.disabled === !0 || e.preventDefault();
 		},
 		onDrop: (e) => {
-			n || t.disabled === !0 || (e.preventDefault(), f?.({
-				columnKey: t.key,
-				index: t.cards.length
+			i || r.disabled === !0 || (e.preventDefault(), C?.({
+				columnKey: r.key,
+				index: r.cards.length
 			}));
 		},
-		children: [/* @__PURE__ */ m("div", {
-			className: "flex items-start justify-between gap-3",
-			children: [/* @__PURE__ */ m("div", {
-				className: "grid gap-0.5",
-				children: [/* @__PURE__ */ p("h3", {
-					className: "text-sm font-semibold text-foreground",
-					children: t.title
-				}), t.description ? /* @__PURE__ */ p("p", {
-					className: "text-xs text-muted-foreground",
-					children: t.description
-				}) : null]
-			}), /* @__PURE__ */ p("div", {
-				className: "rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground",
-				children: t.count ?? t.cards.length
-			})]
-		}), /* @__PURE__ */ p("div", {
-			className: "grid min-h-16 content-start gap-2",
-			children: t.cards.length === 0 ? /* @__PURE__ */ m("div", {
-				className: "grid min-h-20 place-items-center rounded-lg border border-dashed p-3 text-center text-xs text-muted-foreground",
-				children: [/* @__PURE__ */ p("span", { children: o }), /* @__PURE__ */ p("span", {
-					className: "sr-only",
-					children: "No cards yet."
-				})]
-			}) : t.cards.map((e, o) => /* @__PURE__ */ p(E, {
-				card: e,
-				column: t,
-				index: o,
-				boardDisabled: n,
-				renderCard: r,
-				onCardClick: i,
-				dragHandleLabel: a,
-				cardClassName: l,
-				onNativeDragStart: u,
-				onNativeDragEnd: d,
-				onNativeDrop: f
-			}, e.key))
-		})]
+		children: [
+			f?.(r) ?? /* @__PURE__ */ b("div", {
+				className: "flex items-start justify-between gap-3",
+				children: [
+					r.color ? /* @__PURE__ */ y("span", {
+						className: "mt-1.5 size-2 shrink-0 rounded-full",
+						style: { backgroundColor: r.color }
+					}) : null,
+					/* @__PURE__ */ b("div", {
+						className: "grid gap-0.5",
+						children: [/* @__PURE__ */ y("h3", {
+							className: "text-sm font-semibold text-foreground",
+							children: r.title
+						}), r.description ? /* @__PURE__ */ y("p", {
+							className: "text-xs text-muted-foreground",
+							children: r.description
+						}) : null]
+					}),
+					/* @__PURE__ */ b("div", {
+						className: "ml-auto flex items-center gap-1",
+						children: [
+							r.actions,
+							u && !r.disabled ? /* @__PURE__ */ y(t, {
+								size: "icon-xs",
+								variant: "ghost",
+								iconOnly: !0,
+								"aria-label": `Add card to ${String(r.title)}`,
+								onClick: () => u(r),
+								children: /* @__PURE__ */ y(v, {})
+							}) : null,
+							/* @__PURE__ */ y(n, {
+								size: "sm",
+								variant: r.limit !== void 0 && r.cards.length >= r.limit ? "soft" : "outline",
+								tone: r.limit !== void 0 && r.cards.length >= r.limit ? "warning" : "muted",
+								label: r.count ?? (r.limit === void 0 ? r.cards.length : `${r.cards.length}/${r.limit}`)
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "grid min-h-16 content-start gap-2",
+				children: r.cards.length === 0 ? /* @__PURE__ */ b("div", {
+					className: "grid min-h-20 place-items-center rounded-lg border border-dashed p-3 text-center text-xs text-muted-foreground",
+					children: [/* @__PURE__ */ y("span", { children: h }), /* @__PURE__ */ y("span", {
+						className: "sr-only",
+						children: "No cards yet."
+					})]
+				}) : r.cards.map((e, t) => /* @__PURE__ */ y(N, {
+					card: e,
+					column: r,
+					index: t,
+					boardDisabled: i,
+					renderCard: a,
+					onCardClick: o,
+					selected: s.has(e.key) || e.selected === !0,
+					selectionMode: c,
+					onSelect: l,
+					dragHandleLabel: m,
+					cardClassName: _,
+					onNativeDragStart: x,
+					onNativeDragEnd: S,
+					onNativeDrop: C
+				}, e.key))
+			}),
+			p?.(r) ?? r.footer ?? (u && !r.disabled ? /* @__PURE__ */ y(t, {
+				size: "sm",
+				variant: "ghost",
+				className: "w-full justify-start",
+				leftIcon: /* @__PURE__ */ y(v, {}),
+				onClick: () => u(r),
+				children: "Add task"
+			}) : null)
+		]
 	});
 }
-function O({ columns: t, defaultColumns: n = [], onColumnsChange: r, onCardMove: i, renderCard: a, onCardClick: c, disabled: u = !1, emptyColumn: f = "Drop cards here.", dragHandleLabel: h, columnClassName: g, cardClassName: v, overlayClassName: x, className: w, "aria-label": E = "Kanban board", ...O }) {
-	let [k, A] = d.useState(() => n), [j, M] = d.useState(null), [N, P] = d.useState(null), F = d.useRef(null), I = d.useRef(null), L = t ?? k, R = j ?? L, z = t !== void 0;
-	function B(e) {
+function P({ columns: t, defaultColumns: n = [], onColumnsChange: r, onCardMove: i, canMoveCard: a, renderCard: o, onCardClick: s, onAddCard: c, onAddColumn: d, renderColumnHeader: p, renderColumnFooter: h, selectionMode: g = "none", selectedCardKeys: _, defaultSelectedCardKeys: x = [], onSelectionChange: S, allowCrossColumn: w = !0, allowReorder: D = !0, density: k = "comfortable", columnWidth: j = 320, disabled: N = !1, emptyColumn: P = "Drop cards here.", dragHandleLabel: ne, columnClassName: re, cardClassName: F, overlayClassName: I, className: L, "aria-label": R = "Kanban board", ...z }) {
+	let [B, V] = m.useState(() => n), [H, U] = m.useState(null), [W, G] = m.useState(null), K = m.useRef(null), q = m.useRef(null), [ie, ae] = m.useState(x), J = t ?? B, Y = H ?? J, X = t !== void 0, Z = _ ?? ie, Q = m.useMemo(() => new Set(Z), [Z]);
+	function oe(e) {
+		if (g === "none" || e.disabled) return;
+		let t = g === "single" ? Q.has(e.key) ? [] : [e.key] : Q.has(e.key) ? Z.filter((t) => t !== e.key) : [...Z, e.key];
+		_ === void 0 && ae(t);
+		let n = J.flatMap((e) => e.cards);
+		S?.(t, n.filter((e) => t.includes(e.key)));
+	}
+	function se(e) {
 		let t = e.operation.source;
 		if (!t) return;
 		let n = String(t.id);
-		F.current = L, M(L), P(n);
+		K.current = J, U(J), G(n);
 	}
-	function V(e) {
+	function ce(e) {
 		let t = e.operation.source;
-		if (!t || !l(t)) return;
-		let n = S(F.current ?? L, e);
-		F.current = n, M(n);
+		if (!t || !f(t)) return;
+		let n = O(K.current ?? J, e);
+		A(J, n, T(String(t.id)), w, D, a) && (K.current = n, U(n));
 	}
-	function H(e) {
+	function le(e) {
 		let t = e.operation.source;
-		if (P(null), e.canceled || !t || !l(t)) {
-			F.current = null, M(null);
+		if (G(null), e.canceled || !t || !f(t)) {
+			K.current = null, U(null);
 			return;
 		}
-		let n = F.current ?? S(L, e), a = y(String(t.id)), o = b(t.initialGroup), s = b(t.group), c = L.find((e) => e.key === o), u = n.find((e) => e.key === s), d = c?.cards.find((e) => e.key === a);
-		if (F.current = null, M(null), !d || !c || !u) return;
-		let f = {
+		let n = K.current ?? O(J, e), o = T(String(t.id)), s = E(t.initialGroup), c = E(t.group), l = J.find((e) => e.key === s), u = n.find((e) => e.key === c), d = l?.cards.find((e) => e.key === o);
+		if (K.current = null, U(null), !d || !l || !u) return;
+		let p = {
 			card: d,
-			fromColumn: c,
+			fromColumn: l,
 			toColumn: u,
 			fromIndex: t.initialIndex,
 			toIndex: t.index
 		};
-		z || A(n), r?.(n, f), i?.(f);
+		A(J, n, d.key, w, D, a) && (X || V(n), r?.(n, p), i?.(p));
 	}
-	function U(e) {
-		let t = I.current;
-		if (I.current = null, !t) return;
-		let n = C(L, t, e);
-		n && (z || A(n.columns), r?.(n.columns, n.change), i?.(n.change));
+	function ue(e) {
+		let t = q.current;
+		if (q.current = null, !t) return;
+		let n = ee(J, t, e);
+		n && A(J, n.columns, n.change.card.key, w, D, a) && (X || V(n.columns), r?.(n.columns, n.change), i?.(n.change));
 	}
-	let W = N ? R.flatMap((e) => e.cards.map((t) => ({
+	let $ = W ? Y.flatMap((e) => e.cards.map((t) => ({
 		card: t,
 		column: e
-	}))).find(({ card: e }) => _(e.key) === N) : void 0;
-	return /* @__PURE__ */ m(o, {
-		onDragStart: B,
-		onDragOver: V,
-		onDragEnd: H,
-		children: [/* @__PURE__ */ p("div", {
-			...O,
+	}))).find(({ card: e }) => C(e.key) === W) : void 0;
+	return /* @__PURE__ */ b(l, {
+		onDragStart: se,
+		onDragOver: ce,
+		onDragEnd: le,
+		children: [/* @__PURE__ */ b("div", {
+			...z,
 			role: "group",
-			"aria-label": E,
+			"aria-label": R,
 			"data-slot": "kanban-board",
-			className: e("grid gap-4 sm:auto-cols-[minmax(280px,1fr)] sm:grid-flow-col sm:overflow-x-auto sm:pb-2", w),
-			children: R.map((e) => /* @__PURE__ */ p(D, {
+			"data-density": k,
+			style: {
+				"--kanban-column-width": typeof j == "number" ? `${j}px` : j,
+				...z.style
+			},
+			className: e("grid gap-4 sm:auto-cols-[var(--kanban-column-width)] sm:grid-flow-col sm:overflow-x-auto sm:pb-2", L),
+			children: [Y.map((e) => /* @__PURE__ */ y(te, {
 				column: e,
-				boardDisabled: u,
-				renderCard: a,
-				onCardClick: c,
-				dragHandleLabel: h,
-				emptyColumn: f,
-				columnClassName: g,
-				cardClassName: v,
+				boardDisabled: N,
+				renderCard: o,
+				onCardClick: s,
+				selectedKeys: Q,
+				selectionMode: g,
+				onSelect: oe,
+				onAddCard: c,
+				renderColumnHeader: p,
+				renderColumnFooter: h,
+				dragHandleLabel: ne,
+				emptyColumn: P,
+				columnClassName: re,
+				cardClassName: F,
 				onNativeDragStart: (e) => {
-					I.current = e;
+					q.current = e;
 				},
 				onNativeDragEnd: () => {
-					I.current = null;
+					q.current = null;
 				},
-				onNativeDrop: U
-			}, e.key))
-		}), /* @__PURE__ */ p(s, { children: W ? /* @__PURE__ */ p("div", {
-			className: e("min-w-64 rotate-1 opacity-95 shadow-2xl", x),
-			children: a?.(W.card, W.column, {
-				index: W.column.cards.findIndex((e) => e.key === W.card.key),
+				onNativeDrop: ue,
+				density: k
+			}, e.key)), d ? /* @__PURE__ */ b("button", {
+				type: "button",
+				className: "flex min-h-32 items-center justify-center gap-2 rounded-lg border border-dashed bg-muted/15 text-sm font-medium text-muted-foreground outline-none transition-colors hover:border-foreground/25 hover:bg-muted/35 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+				onClick: d,
+				children: [/* @__PURE__ */ y(v, { className: "size-4" }), "Add column"]
+			}) : null]
+		}), /* @__PURE__ */ y(u, { children: $ ? /* @__PURE__ */ y("div", {
+			className: e("min-w-64 rotate-1 opacity-95 shadow-2xl", I),
+			children: o?.($.card, $.column, {
+				index: $.column.cards.findIndex((e) => e.key === $.card.key),
 				isDragging: !0,
 				isDropTarget: !1,
-				handle: null
-			}) ?? /* @__PURE__ */ p(T, {
-				card: W.card,
+				handle: null,
+				selected: Q.has($.card.key),
+				selectControl: null
+			}) ?? /* @__PURE__ */ y(M, {
+				card: $.card,
 				handle: null
 			})
 		}) : null })]
 	});
 }
 //#endregion
-export { O as KanbanBoard };
+export { P as KanbanBoard };

package/dist/src/components/display/timeline.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");var a={default:`border-primary bg-primary text-primary-foreground`,success:`border-emerald-500 bg-emerald-500 text-white`,info:`border-blue-500 bg-blue-500 text-white`,warning:`border-amber-500 bg-amber-500 text-white`,danger:`border-destructive bg-destructive text-destructive-foreground`,muted:`border-muted-foreground bg-muted-foreground text-background`};function o({items:e,orientation:n=`vertical`,pending:r=!1,pendingLabel:a=`Pending`,compact:o=!1,itemClassName:s,className:u,...d}){let f=e.filter(e=>!e.hidden);return n===`horizontal`?(0,i.jsx)(`div`,{"data-slot":`timeline`,"data-orientation":`horizontal`,className:t.cn(`overflow-x-auto`,u),...d,children:(0,i.jsxs)(`div`,{className:`flex min-w-max gap-3 pb-1`,children:[f.map(e=>(0,i.jsx)(l,{item:e,compact:o,className:s},e.key)),r&&(0,i.jsx)(l,{item:{key:`pending`,title:a,tone:`muted`},compact:o,className:s})]})}):(0,i.jsxs)(`div`,{"data-slot":`timeline`,"data-orientation":`vertical`,className:t.cn(`grid gap-0`,u),...d,children:[f.map((e,t)=>(0,i.jsx)(c,{item:e,compact:o,className:s,isLast:t===f.length-1&&!r},e.key)),r&&(0,i.jsx)(c,{item:{key:`pending`,title:a,tone:`muted`},compact:o,className:s,isLast:!0})]})}function s({item:e}){let n=e.tone??`default`;return(0,i.jsx)(`span`,{"data-slot":`timeline-dot`,"data-tone":n,className:t.cn(`flex size-7 shrink-0 items-center justify-center rounded-full border text-[10px]`,a[n]),children:e.icon??(0,i.jsx)(r.CircleIcon,{className:`size-2 fill-current`})})}function c({item:e,compact:n,className:r,isLast:a}){return(0,i.jsxs)(`div`,{"data-slot":`timeline-item`,className:t.cn(`grid grid-cols-[auto_1fr] gap-3`,r,e.className),children:[(0,i.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,i.jsx)(s,{item:e}),!a&&(0,i.jsx)(`div`,{"data-slot":`timeline-line`,className:`w-px flex-1 bg-border`})]}),(0,i.jsxs)(`div`,{className:t.cn(`min-w-0 pb-5`,n&&`pb-3`),children:[(0,i.jsxs)(`div`,{className:`flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between`,children:[(0,i.jsxs)(`div`,{className:`min-w-0`,children:[e.title&&(0,i.jsx)(`div`,{className:`text-sm font-medium text-foreground`,children:e.title}),e.description&&(0,i.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:e.description})]}),e.time&&(0,i.jsx)(`div`,{className:`shrink-0 text-xs text-muted-foreground`,children:e.time})]}),e.content&&(0,i.jsx)(`div`,{className:`mt-2 text-sm text-muted-foreground`,children:e.content}),e.actions&&(0,i.jsx)(`div`,{className:`mt-2`,children:e.actions})]})]})}function l({item:e,compact:n,className:r}){return(0,i.jsxs)(`div`,{"data-slot":`timeline-item`,className:t.cn(`min-w-48 rounded-xl border bg-card p-3`,n&&`min-w-40 p-2`,r,e.className),children:[(0,i.jsxs)(`div`,{className:`mb-3 flex items-center gap-2`,children:[(0,i.jsx)(s,{item:e}),e.time&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:e.time})]}),e.title&&(0,i.jsx)(`div`,{className:`text-sm font-medium`,children:e.title}),e.description&&(0,i.jsx)(`div`,{className:`mt-1 text-xs text-muted-foreground`,children:e.description}),e.content&&(0,i.jsx)(`div`,{className:`mt-2 text-sm text-muted-foreground`,children:e.content}),e.actions&&(0,i.jsx)(`div`,{className:`mt-2`,children:e.actions})]})}exports.Timeline=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");var a={default:`border-primary bg-primary text-primary-foreground`,success:`border-emerald-500 bg-emerald-500 text-white`,info:`border-blue-500 bg-blue-500 text-white`,warning:`border-amber-500 bg-amber-500 text-white`,danger:`border-destructive bg-destructive text-destructive-foreground`,muted:`border-muted-foreground bg-muted-foreground text-background`};function o({items:e,orientation:n=`vertical`,pending:r=!1,pendingLabel:a=`Pending`,compact:o=!1,itemClassName:s,className:u,...d}){let f=e.filter(e=>!e.hidden);return n===`horizontal`?(0,i.jsx)(`div`,{"data-slot":`timeline`,"data-orientation":`horizontal`,className:t.cn(`overflow-x-auto`,u),...d,children:(0,i.jsxs)(`div`,{className:`flex min-w-max gap-3 pb-1`,children:[f.map(e=>(0,i.jsx)(l,{item:e,compact:o,className:s},e.key)),r&&(0,i.jsx)(l,{item:{key:`pending`,title:a,tone:`muted`},compact:o,className:s})]})}):(0,i.jsxs)(`div`,{"data-slot":`timeline`,"data-orientation":`vertical`,className:t.cn(`grid gap-0`,u),...d,children:[f.map((e,t)=>(0,i.jsx)(c,{item:e,compact:o,className:s,isLast:t===f.length-1&&!r},e.key)),r&&(0,i.jsx)(c,{item:{key:`pending`,title:a,tone:`muted`},compact:o,className:s,isLast:!0})]})}function s({item:e}){let n=e.tone??`default`;return(0,i.jsx)(`span`,{"data-slot":`timeline-dot`,"data-tone":n,className:t.cn(`relative z-10 grid size-7 shrink-0 place-items-center rounded-full border-2 border-background text-[10px] shadow-[0_0_0_1px_var(--border)]`,a[n]),children:e.icon??(0,i.jsx)(r.CircleIcon,{className:`size-2 fill-current`})})}function c({item:e,compact:n,className:r,isLast:a}){return(0,i.jsxs)(`div`,{"data-slot":`timeline-item`,className:t.cn(`relative grid grid-cols-[1.75rem_minmax(0,1fr)] gap-3`,r,e.className),children:[(0,i.jsxs)(`div`,{className:`relative flex justify-center`,children:[(0,i.jsx)(s,{item:e}),!a&&(0,i.jsx)(`div`,{"data-slot":`timeline-line`,className:`absolute left-1/2 top-7 h-[calc(100%_-_1.75rem)] w-px -translate-x-1/2 bg-border`})]}),(0,i.jsxs)(`div`,{className:t.cn(`min-w-0 pb-5 pt-0.5`,n&&`pb-3`),children:[(0,i.jsxs)(`div`,{className:`flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between`,children:[(0,i.jsxs)(`div`,{className:`min-w-0`,children:[e.title&&(0,i.jsx)(`div`,{className:`text-sm font-medium text-foreground`,children:e.title}),e.description&&(0,i.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:e.description})]}),e.time&&(0,i.jsx)(`div`,{className:`shrink-0 text-xs text-muted-foreground`,children:e.time})]}),e.content&&(0,i.jsx)(`div`,{className:`mt-2 text-sm text-muted-foreground`,children:e.content}),e.actions&&(0,i.jsx)(`div`,{className:`mt-2`,children:e.actions})]})]})}function l({item:e,compact:n,className:r}){return(0,i.jsxs)(`div`,{"data-slot":`timeline-item`,className:t.cn(`min-w-48 rounded-xl border bg-card p-3`,n&&`min-w-40 p-2`,r,e.className),children:[(0,i.jsxs)(`div`,{className:`mb-3 flex items-center gap-2`,children:[(0,i.jsx)(s,{item:e}),e.time&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:e.time})]}),e.title&&(0,i.jsx)(`div`,{className:`text-sm font-medium`,children:e.title}),e.description&&(0,i.jsx)(`div`,{className:`mt-1 text-xs text-muted-foreground`,children:e.description}),e.content&&(0,i.jsx)(`div`,{className:`mt-2 text-sm text-muted-foreground`,children:e.content}),e.actions&&(0,i.jsx)(`div`,{className:`mt-2`,children:e.actions})]})}exports.Timeline=o;