@thebuoyant-tsdev/mui-ts-library 3.30.0 → 3.31.0

package/dist/components/kanban-board/KanbanBoard.d.ts

@@ -1,2 +1,2 @@
 import { type KanbanBoardProps } from "./KanbanBoard.types";
-export declare function KanbanBoard({ tasks, columns, onTasksChange, onCardClick, enableBuiltinDialogs, onTaskCreated, onTaskUpdated, onTaskDeleted, onTaskMoved, showAssignee, showDueDate, chipVariant, height, translation, }: KanbanBoardProps): import("react/jsx-runtime").JSX.Element;
+export declare function KanbanBoard({ tasks, columns, onTasksChange, onCardClick, enableBuiltinDialogs, onTaskCreated, onTaskUpdated, onTaskDeleted, onTaskMoved, showAssignee, showDueDate, showDueDateWarning, chipVariant, width, height, translation, }: KanbanBoardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/kanban-board/KanbanBoard.js

@@ -9,62 +9,62 @@ import { Box as m } from "@mui/material";
 import { useEffect as h, useState as g } from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/kanban-board/KanbanBoard.tsx
-function y({ tasks: y, columns: b, onTasksChange: x, onCardClick: S, enableBuiltinDialogs: C = !0, onTaskCreated: w, onTaskUpdated: T, onTaskDeleted: E, onTaskMoved: D, showAssignee: O = !0, showDueDate: k = !0, chipVariant: A = "outlined", height: j = "100%", translation: M }) {
-	let N = {
+function y({ tasks: y, columns: b, onTasksChange: x, onCardClick: S, enableBuiltinDialogs: C = !0, onTaskCreated: w, onTaskUpdated: T, onTaskDeleted: E, onTaskMoved: D, showAssignee: O = !0, showDueDate: k = !0, showDueDateWarning: A = !0, chipVariant: j = "outlined", width: M = "100%", height: N = "100%", translation: P }) {
+	let F = {
 		...t,
-		...M
-	}, [P, F] = g(y);
+		...P
+	}, [I, L] = g(y);
 	h(() => {
-		F(y);
+		L(y);
 	}, [y]);
-	let [I, L] = g(null), [R, z] = g(null), B = d(u(c, { activationConstraint: { distance: 8 } }), u(s, { coordinateGetter: p }));
-	function V({ active: e }) {
-		L(P.find((t) => t.id === e.id) ?? null);
+	let [R, z] = g(null), [B, V] = g(null), H = d(u(c, { activationConstraint: { distance: 8 } }), u(s, { coordinateGetter: p }));
+	function U({ active: e }) {
+		z(I.find((t) => t.id === e.id) ?? null);
 	}
-	function H({ active: e, over: t }) {
+	function W({ active: e, over: t }) {
 		if (!t) return;
-		let n = e.id, r = t.id, i = P.find((e) => e.id === n);
+		let n = e.id, r = t.id, i = I.find((e) => e.id === n);
 		if (!i) return;
-		let a = b.find((e) => e.id === r), o = P.find((e) => e.id === r), s = a?.id ?? o?.status;
-		!s || i.status === s || F((e) => e.map((e) => e.id === n ? {
+		let a = b.find((e) => e.id === r), o = I.find((e) => e.id === r), s = a?.id ?? o?.status;
+		!s || i.status === s || L((e) => e.map((e) => e.id === n ? {
 			...e,
 			status: s
 		} : e));
 	}
-	function U({ active: e, over: t }) {
-		let n = I?.status;
-		if (L(null), !t) {
-			F(y);
+	function G({ active: e, over: t }) {
+		let n = R?.status;
+		if (z(null), !t) {
+			L(y);
 			return;
 		}
-		let r = e.id, i = t.id, a = P.findIndex((e) => e.id === r), o = P.findIndex((e) => e.id === i), s;
-		if (s = a !== -1 && o !== -1 && a !== o ? f(P, a, o) : [...P], F(s), x?.(s), n) {
+		let r = e.id, i = t.id, a = I.findIndex((e) => e.id === r), o = I.findIndex((e) => e.id === i), s;
+		if (s = a !== -1 && o !== -1 && a !== o ? f(I, a, o) : [...I], L(s), x?.(s), n) {
 			let e = s.find((e) => e.id === r);
 			e && e.status !== n && D?.(e, n, e.status);
 		}
 	}
-	function W(e) {
-		C ? z({
+	function K(e) {
+		C ? V({
 			mode: "edit",
 			task: e
 		}) : S?.(e);
 	}
-	function G(e) {
-		z({
+	function q(e) {
+		V({
 			mode: "add",
 			columnId: e
 		});
 	}
-	function K(e) {
-		let t = !P.find((t) => t.id === e.id), n = t ? [...P, e] : P.map((t) => t.id === e.id ? e : t);
-		F(n), x?.(n), t ? w?.(e) : T?.(e), z(null);
+	function J(e) {
+		let t = !I.find((t) => t.id === e.id), n = t ? [...I, e] : I.map((t) => t.id === e.id ? e : t);
+		L(n), x?.(n), t ? w?.(e) : T?.(e), V(null);
 	}
-	function q(e) {
-		let t = P.filter((t) => t.id !== e);
-		F(t), x?.(t), E?.(e), z(null);
+	function Y(e) {
+		let t = I.filter((t) => t.id !== e);
+		L(t), x?.(t), E?.(e), V(null);
 	}
-	function J(e) {
-		z({
+	function X(e) {
+		V({
 			mode: "delete",
 			task: e
 		});
@@ -72,17 +72,18 @@ function y({ tasks: y, columns: b, onTasksChange: x, onCardClick: S, enableBuilt
 	return /* @__PURE__ */ v(m, {
 		className: e.root,
 		sx: {
-			height: j,
+			width: M,
+			height: N,
 			display: "flex",
 			flexDirection: "column",
 			overflow: "hidden"
 		},
 		children: [/* @__PURE__ */ v(a, {
-			sensors: B,
+			sensors: H,
 			collisionDetection: l,
-			onDragStart: V,
-			onDragOver: H,
-			onDragEnd: U,
+			onDragStart: U,
+			onDragOver: W,
+			onDragEnd: G,
 			children: [/* @__PURE__ */ _(m, {
 				className: e.columns,
 				sx: {
@@ -92,37 +93,39 @@ function y({ tasks: y, columns: b, onTasksChange: x, onCardClick: S, enableBuilt
 					p: 2,
 					overflowX: "auto",
 					overflowY: "hidden",
-					alignItems: "flex-start"
+					alignItems: "stretch"
 				},
 				children: b.map((e) => /* @__PURE__ */ _(i, {
 					column: e,
-					tasks: P.filter((t) => t.status === e.id),
+					tasks: I.filter((t) => t.status === e.id),
 					showAssignee: O,
 					showDueDate: k,
-					chipVariant: A,
-					t: N,
+					showDueDateWarning: A,
+					chipVariant: j,
+					t: F,
 					enableBuiltinDialogs: C,
-					onCardClick: W,
-					onAddClick: G
+					onCardClick: K,
+					onAddClick: q
 				}, e.id))
-			}), /* @__PURE__ */ _(o, { children: I && /* @__PURE__ */ _(n, {
-				task: I,
+			}), /* @__PURE__ */ _(o, { children: R && /* @__PURE__ */ _(n, {
+				task: R,
 				showAssignee: O,
 				showDueDate: k,
-				chipVariant: A,
-				t: N,
+				showDueDateWarning: A,
+				chipVariant: j,
+				t: F,
 				onCardClick: () => {},
 				isOverlay: !0
 			}) })]
 		}), C && /* @__PURE__ */ _(r, {
-			state: R,
+			state: B,
 			columns: b,
-			t: N,
-			onSave: K,
-			onDelete: q,
-			onRequestDelete: J,
-			onClose: () => z(null)
-		}, R ? `${R.mode}-${R.mode === "add" ? R.columnId : R.task.id}` : "closed")]
+			t: F,
+			onSave: J,
+			onDelete: Y,
+			onRequestDelete: X,
+			onClose: () => V(null)
+		}, B ? `${B.mode}-${B.mode === "add" ? B.columnId : B.task.id}` : "closed")]
 	});
 }
 //#endregion

package/dist/components/kanban-board/KanbanBoard.types.d.ts

@@ -71,12 +71,21 @@ export type KanbanBoardProps = {
     showAssignee?: boolean;
     /** Show the due date on cards (default: true). */
     showDueDate?: boolean;
+    /**
+     * Highlight cards whose `dueDate` is in the past (default: true).
+     * When true, the due-date chip turns red (`color="error"`) and the card
+     * receives a subtle red background tint and left border stripe.
+     * Has no effect when `showDueDate` is false or when the card has no `dueDate`.
+     */
+    showDueDateWarning?: boolean;
     /**
      * MUI Chip variant for assignee and due-date chips on cards.
      * `"outlined"` (default) — subtle border, transparent background.
      * `"filled"` — solid background, more prominent.
      */
     chipVariant?: "outlined" | "filled";
+    /** Width of the board. Default: "100%". */
+    width?: number | string;
     /** Height of the board. Default: "100%". */
     height?: number | string;
     /** Override any label or message — unset keys fall back to English defaults. */

package/dist/components/kanban-board/KanbanBoardCard.d.ts

@@ -3,11 +3,12 @@ type KanbanBoardCardProps = {
     task: KanbanTask;
     showAssignee: boolean;
     showDueDate: boolean;
+    showDueDateWarning: boolean;
     chipVariant: "outlined" | "filled";
     t: Required<KanbanBoardTranslation>;
     onCardClick: (task: KanbanTask) => void;
     /** True when this card is the drag overlay ghost — rendered without transform/listeners. */
     isOverlay?: boolean;
 };
-export declare function KanbanBoardCard({ task, showAssignee, showDueDate, chipVariant, t, onCardClick, isOverlay, }: KanbanBoardCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function KanbanBoardCard({ task, showAssignee, showDueDate, showDueDateWarning, chipVariant, t, onCardClick, isOverlay, }: KanbanBoardCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/kanban-board/KanbanBoardCard.js

@@ -5,9 +5,10 @@ import { Box as r, Card as i, CardActionArea as a, CardContent as o, Chip as s,
 import { CSS as l } from "@dnd-kit/utilities";
 import u from "@mui/icons-material/CalendarToday";
 import d from "@mui/icons-material/Person";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { alpha as f } from "@mui/material/styles";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/kanban-board/KanbanBoardCard.tsx
-var m = {
+var h = {
 	fontSize: "0.7rem",
 	height: 22,
 	"& .MuiChip-icon": {
@@ -22,78 +23,91 @@ var m = {
 		pr: "10px"
 	}
 };
-function h({ task: h, showAssignee: g, showDueDate: _, chipVariant: v, t: y, onCardClick: b, isOverlay: x = !1 }) {
-	let { attributes: S, listeners: C, setNodeRef: w, transform: T, transition: E, isDragging: D } = n({
-		id: h.id,
-		disabled: x
-	}), O = x ? { cursor: "grabbing" } : {
-		transform: l.Transform.toString(T),
-		transition: E,
-		opacity: +!D,
-		cursor: "grab"
-	}, k = g && !!h.assignee || _ && !!h.dueDate, A = h.dueDate ? h.dueDate.toLocaleDateString(void 0, {
+function g({ task: g, showAssignee: _, showDueDate: v, showDueDateWarning: y, chipVariant: b, t: x, onCardClick: S, isOverlay: C = !1 }) {
+	let { attributes: w, listeners: T, setNodeRef: E, transform: D, transition: O, isDragging: k } = n({
+		id: g.id,
+		disabled: C
+	}), A = C ? void 0 : {
+		transform: l.Transform.toString(D),
+		transition: O,
+		opacity: +!k
+	}, j = _ && !!g.assignee || v && !!g.dueDate, M = g.dueDate ? g.dueDate.toLocaleDateString(void 0, {
 		day: "2-digit",
 		month: "short",
 		year: "numeric"
-	}) : null;
-	return /* @__PURE__ */ f(i, {
-		ref: x ? void 0 : w,
-		style: O,
-		className: [t.card, D && e.selected].filter(Boolean).join(" "),
+	}) : null, N = /* @__PURE__ */ new Date();
+	N.setHours(0, 0, 0, 0);
+	let P = y && !!g.dueDate && g.dueDate < N;
+	return /* @__PURE__ */ p(i, {
+		ref: C ? void 0 : E,
+		style: A,
+		elevation: 0,
+		className: [t.card, k && e.selected].filter(Boolean).join(" "),
 		sx: {
 			mb: 1,
-			borderLeft: h.color ? `4px solid ${h.color}` : void 0,
+			border: "1px solid",
+			borderColor: P && !g.color ? "error.light" : "divider",
+			borderLeft: g.color ? `4px solid ${g.color}` : P ? (e) => `4px solid ${e.palette.error.main}` : void 0,
 			userSelect: "none",
-			bgcolor: (e) => e.palette.mode === "dark" ? "grey.800" : "background.paper",
+			cursor: C ? "grabbing" : "grab",
+			bgcolor: (e) => P ? e.palette.mode === "dark" ? f(e.palette.error.main, .12) : f(e.palette.error.main, .04) : e.palette.mode === "dark" ? e.palette.grey[800] : e.palette.background.paper,
+			boxShadow: (e) => e.palette.mode === "dark" ? "0 1px 3px rgba(0,0,0,0.4)" : "0 1px 3px rgba(0,0,0,0.08)",
+			transition: "box-shadow 0.15s ease, transform 0.15s ease",
+			...!k && !C && { "&:hover": {
+				boxShadow: (e) => e.palette.mode === "dark" ? "0 4px 14px rgba(0,0,0,0.5)" : "0 4px 14px rgba(0,0,0,0.12)",
+				transform: "translateY(-1px)"
+			} },
 			"&:active": { cursor: "grabbing" }
 		},
-		...x ? {} : {
-			...S,
-			...C
+		...C ? {} : {
+			...w,
+			...T
 		},
-		onClick: () => !D && b(h),
-		"aria-label": h.title,
-		children: /* @__PURE__ */ f(a, {
+		onClick: () => !k && S(g),
+		"aria-label": g.title,
+		children: /* @__PURE__ */ p(a, {
 			component: "div",
 			sx: { cursor: "inherit" },
-			children: /* @__PURE__ */ p(o, {
+			children: /* @__PURE__ */ m(o, {
 				sx: {
 					p: 1.5,
 					"&:last-child": { pb: 1.5 }
 				},
-				children: [/* @__PURE__ */ f(c, {
+				children: [/* @__PURE__ */ p(c, {
 					className: t.cardTitle,
 					variant: "body2",
 					sx: {
-						mb: +!!k,
+						mb: +!!j,
 						lineHeight: 1.4,
-						fontWeight: 600
+						fontWeight: 700,
+						letterSpacing: "-0.01em"
 					},
-					children: h.title
-				}), k && /* @__PURE__ */ p(r, {
+					children: g.title
+				}), j && /* @__PURE__ */ m(r, {
 					className: t.cardMeta,
 					sx: {
 						display: "flex",
-						gap: .75,
+						gap: 1,
 						flexWrap: "wrap",
 						alignItems: "center"
 					},
-					children: [g && h.assignee && /* @__PURE__ */ f(s, {
+					children: [_ && g.assignee && /* @__PURE__ */ p(s, {
 						className: t.cardAssignee,
-						icon: /* @__PURE__ */ f(d, {}),
-						label: h.assignee,
+						icon: /* @__PURE__ */ p(d, {}),
+						label: g.assignee,
 						size: "small",
-						variant: v,
-						"aria-label": `${y.dialogFieldAssignee}: ${h.assignee}`,
-						sx: m
-					}), _ && A && /* @__PURE__ */ f(s, {
+						variant: b,
+						"aria-label": `${x.dialogFieldAssignee}: ${g.assignee}`,
+						sx: h
+					}), v && M && /* @__PURE__ */ p(s, {
 						className: t.cardDueDate,
-						icon: /* @__PURE__ */ f(u, {}),
-						label: A,
+						icon: /* @__PURE__ */ p(u, {}),
+						label: M,
 						size: "small",
-						variant: v,
-						"aria-label": `${y.dialogFieldDueDate}: ${A}`,
-						sx: m
+						variant: b,
+						color: P ? "error" : "default",
+						"aria-label": `${x.dialogFieldDueDate}: ${M}`,
+						sx: h
 					})]
 				})]
 			})
@@ -101,4 +115,4 @@ function h({ task: h, showAssignee: g, showDueDate: _, chipVariant: v, t: y, onC
 	});
 }
 //#endregion
-export { h as KanbanBoardCard };
+export { g as KanbanBoardCard };

package/dist/components/kanban-board/KanbanBoardColumn.d.ts

@@ -4,11 +4,12 @@ type KanbanBoardColumnProps = {
     tasks: KanbanTask[];
     showAssignee: boolean;
     showDueDate: boolean;
+    showDueDateWarning: boolean;
     chipVariant: "outlined" | "filled";
     t: Required<KanbanBoardTranslation>;
     enableBuiltinDialogs: boolean;
     onCardClick: (task: KanbanTask) => void;
     onAddClick: (columnId: string) => void;
 };
-export declare function KanbanBoardColumn({ column, tasks, showAssignee, showDueDate, chipVariant, t, enableBuiltinDialogs, onCardClick, onAddClick, }: KanbanBoardColumnProps): import("react/jsx-runtime").JSX.Element;
+export declare function KanbanBoardColumn({ column, tasks, showAssignee, showDueDate, showDueDateWarning, chipVariant, t, enableBuiltinDialogs, onCardClick, onAddClick, }: KanbanBoardColumnProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/kanban-board/KanbanBoardColumn.js

@@ -6,8 +6,8 @@ import { Box as a, Button as o, Chip as s, Typography as c } from "@mui/material
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import d from "@mui/icons-material/Add";
 //#region src/components/kanban-board/KanbanBoardColumn.tsx
-function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, chipVariant: g, t: _, enableBuiltinDialogs: v, onCardClick: y, onAddClick: b }) {
-	let { setNodeRef: x, isOver: S } = n({ id: f.id }), C = f.wipLimit !== void 0 && p.length > f.wipLimit, w = f.wipLimit === void 0 ? `${p.length}` : `${p.length} / ${f.wipLimit}`, T = f.color ?? "primary.main";
+function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, showDueDateWarning: g, chipVariant: _, t: v, enableBuiltinDialogs: y, onCardClick: b, onAddClick: x }) {
+	let { setNodeRef: S, isOver: C } = n({ id: f.id }), w = f.wipLimit !== void 0 && p.length > f.wipLimit, T = f.wipLimit === void 0 ? `${p.length}` : `${p.length} / ${f.wipLimit}`, E = f.color ?? "primary.main";
 	return /* @__PURE__ */ u(a, {
 		className: e.column,
 		sx: {
@@ -46,13 +46,13 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, chipVariant:
 					children: f.label
 				}), /* @__PURE__ */ l(s, {
 					className: e.columnCount,
-					label: w,
+					label: T,
 					size: "small",
-					color: C ? "error" : "default",
+					color: w ? "error" : "default",
 					sx: {
 						height: 20,
 						fontSize: "0.7rem",
-						...!C && f.color && {
+						...!w && f.color && {
 							bgcolor: f.color,
 							color: "#fff"
 						}
@@ -64,17 +64,19 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, chipVariant:
 				items: p.map((e) => e.id),
 				strategy: i,
 				children: /* @__PURE__ */ u(a, {
-					ref: x,
+					ref: S,
 					className: e.columnBody,
 					sx: {
 						flex: 1,
 						overflowY: "auto",
+						scrollbarWidth: "none",
+						"&::-webkit-scrollbar": { display: "none" },
 						p: 1,
 						minHeight: 80,
-						bgcolor: (e) => S ? e.palette.action.selected : e.palette.mode === "dark" ? e.palette.grey[900] : e.palette.grey[100],
+						bgcolor: (e) => C ? e.palette.action.selected : e.palette.mode === "dark" ? e.palette.grey[900] : e.palette.grey[100],
 						transition: "background-color 0.15s"
 					},
-					children: [p.length === 0 && !S && /* @__PURE__ */ l(c, {
+					children: [p.length === 0 && !C && /* @__PURE__ */ l(c, {
 						variant: "caption",
 						color: "text.disabled",
 						sx: {
@@ -82,18 +84,19 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, chipVariant:
 							textAlign: "center",
 							mt: 2
 						},
-						children: _.noCardsLabel
+						children: v.noCardsLabel
 					}), p.map((e) => /* @__PURE__ */ l(t, {
 						task: e,
 						showAssignee: m,
 						showDueDate: h,
-						chipVariant: g,
-						t: _,
-						onCardClick: y
+						showDueDateWarning: g,
+						chipVariant: _,
+						t: v,
+						onCardClick: b
 					}, e.id))]
 				})
 			}),
-			v && /* @__PURE__ */ l(a, {
+			y && /* @__PURE__ */ l(a, {
 				sx: {
 					p: 1,
 					borderTop: "1px solid",
@@ -104,12 +107,12 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, chipVariant:
 					startIcon: /* @__PURE__ */ l(d, {}),
 					size: "small",
 					fullWidth: !0,
-					onClick: () => b(f.id),
+					onClick: () => x(f.id),
 					sx: {
 						justifyContent: "flex-start",
-						color: T,
+						color: E,
 						border: "1px dashed",
-						borderColor: T,
+						borderColor: E,
 						borderRadius: 1,
 						py: .75,
 						fontWeight: 600,
@@ -119,7 +122,7 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, chipVariant:
 							borderStyle: "dashed"
 						}
 					},
-					children: _.addCardLabel
+					children: v.addCardLabel
 				})
 			})
 		]