@thebuoyant-tsdev/mui-ts-library 3.33.1 → 3.35.0

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

@@ -4,139 +4,173 @@ import { KanbanBoardCard as n } from "./KanbanBoardCard.js";
 import { KanbanBoardCardDialog as r } from "./KanbanBoardCardDialog.js";
 import { KanbanBoardColumn as i } from "./KanbanBoardColumn.js";
 import { DndContext as a, DragOverlay as o, KeyboardSensor as s, PointerSensor as c, closestCorners as l, useSensor as u, useSensors as d } from "@dnd-kit/core";
-import { arrayMove as f, sortableKeyboardCoordinates as p } from "@dnd-kit/sortable";
-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";
+import { arrayMove as ee, sortableKeyboardCoordinates as f } from "@dnd-kit/sortable";
+import p from "@mui/icons-material/Search";
+import { Box as m, InputAdornment as h, TextField as g } from "@mui/material";
+import { useEffect as _, useState as v } from "react";
+import { jsx as y, jsxs as b } 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, showPriority: O = !0, showAssignee: k = !0, showDueDate: A = !0, showDueDateWarning: j = !0, chipVariant: M = "outlined", filterText: N = "", width: P = "100%", height: F = "100%", translation: I }) {
-	let L = {
+function x({ tasks: x, columns: S, onTasksChange: C, onCardClick: w, enableBuiltinDialogs: T = !0, onTaskCreated: E, onTaskUpdated: D, onTaskDeleted: O, onTaskMoved: k, showPriority: A = !0, showAssignee: j = !0, showDueDate: M = !0, showDueDateWarning: N = !0, showSubtasks: P = !0, chipVariant: F = "outlined", showSearchField: I = !1, filterText: L = "", width: R = "100%", height: z = "100%", translation: B }) {
+	let V = {
 		...t,
-		...I
-	}, [R, z] = g(y);
-	h(() => {
-		z(y);
-	}, [y]);
-	let [B, V] = g(null), [H, U] = g(null), W = d(u(c, { activationConstraint: { distance: 8 } }), u(s, { coordinateGetter: p }));
-	function G({ active: e }) {
-		V(R.find((t) => t.id === e.id) ?? null);
+		...B
+	}, [H, U] = v(x);
+	_(() => {
+		U(x);
+	}, [x]);
+	let [W, G] = v(null), [K, q] = v(null), [J, Y] = v(""), X = d(u(c, { activationConstraint: { distance: 8 } }), u(s, { coordinateGetter: f }));
+	function Z({ active: e }) {
+		G(H.find((t) => t.id === e.id) ?? null);
 	}
-	function K({ active: e, over: t }) {
+	function Q({ active: e, over: t }) {
 		if (!t) return;
-		let n = e.id, r = t.id, i = R.find((e) => e.id === n);
+		let n = e.id, r = t.id, i = H.find((e) => e.id === n);
 		if (!i) return;
-		let a = b.find((e) => e.id === r), o = R.find((e) => e.id === r), s = a?.id ?? o?.status;
-		!s || i.status === s || z((e) => e.map((e) => e.id === n ? {
+		let a = S.find((e) => e.id === r), o = H.find((e) => e.id === r), s = a?.id ?? o?.status;
+		!s || i.status === s || U((e) => e.map((e) => e.id === n ? {
 			...e,
 			status: s
 		} : e));
 	}
-	function q({ active: e, over: t }) {
-		let n = B?.status;
-		if (V(null), !t) {
-			z(y);
+	function te({ active: e, over: t }) {
+		let n = W?.status;
+		if (G(null), !t) {
+			U(x);
 			return;
 		}
-		let r = e.id, i = t.id, a = R.findIndex((e) => e.id === r), o = R.findIndex((e) => e.id === i), s;
-		if (s = a !== -1 && o !== -1 && a !== o ? f(R, a, o) : [...R], z(s), x?.(s), n) {
+		let r = e.id, i = t.id, a = H.findIndex((e) => e.id === r), o = H.findIndex((e) => e.id === i), s;
+		if (s = a !== -1 && o !== -1 && a !== o ? ee(H, a, o) : [...H], U(s), C?.(s), n) {
 			let e = s.find((e) => e.id === r);
-			e && e.status !== n && D?.(e, n, e.status);
+			e && e.status !== n && k?.(e, n, e.status);
 		}
 	}
-	function J(e) {
-		C ? U({
+	function ne(e) {
+		T ? q({
 			mode: "edit",
 			task: e
-		}) : S?.(e);
+		}) : w?.(e);
 	}
-	function Y(e) {
-		U({
+	function re(e) {
+		q({
 			mode: "add",
 			columnId: e
 		});
 	}
-	function X(e) {
-		let t = !R.find((t) => t.id === e.id), n = t ? [...R, e] : R.map((t) => t.id === e.id ? e : t);
-		z(n), x?.(n), t ? w?.(e) : T?.(e), U(null);
+	function ie(e) {
+		let t = !H.find((t) => t.id === e.id), n = t ? [...H, e] : H.map((t) => t.id === e.id ? e : t);
+		U(n), C?.(n), t ? E?.(e) : D?.(e), q(null);
 	}
-	function Z(e) {
-		let t = R.filter((t) => t.id !== e);
-		z(t), x?.(t), E?.(e), U(null);
+	function ae(e) {
+		let t = H.filter((t) => t.id !== e);
+		U(t), C?.(t), O?.(e), q(null);
 	}
-	function Q(e) {
-		U({
+	function oe(e) {
+		q({
 			mode: "delete",
 			task: e
 		});
 	}
-	let $ = N.trim().toLowerCase();
-	function ee(e) {
+	let $ = (L || J).trim().toLowerCase();
+	function se(e) {
 		return $ ? e.title.toLowerCase().includes($) || (e.assignee?.toLowerCase().includes($) ?? !1) : !0;
 	}
-	return /* @__PURE__ */ v(m, {
+	return /* @__PURE__ */ b(m, {
 		className: e.root,
 		sx: {
-			width: P,
-			height: F,
+			width: R,
+			height: z,
 			display: "flex",
 			flexDirection: "column",
 			overflow: "hidden"
 		},
-		children: [/* @__PURE__ */ v(a, {
-			sensors: W,
-			collisionDetection: l,
-			onDragStart: G,
-			onDragOver: K,
-			onDragEnd: q,
-			children: [/* @__PURE__ */ _(m, {
-				className: e.columns,
+		children: [
+			I && /* @__PURE__ */ y(m, {
+				className: e.searchFieldWrapper,
 				sx: {
-					flex: 1,
-					display: "flex",
-					gap: 2,
-					p: 2,
-					overflowX: "auto",
-					overflowY: "hidden",
-					alignItems: "stretch"
+					px: 2,
+					pt: 1.5,
+					pb: .5
 				},
-				children: b.map((e) => {
-					let t = R.filter((t) => t.status === e.id);
-					return /* @__PURE__ */ _(i, {
-						column: e,
-						tasks: t.filter(ee),
-						totalCount: t.length,
-						showPriority: O,
-						showAssignee: k,
-						showDueDate: A,
-						showDueDateWarning: j,
-						chipVariant: M,
-						t: L,
-						enableBuiltinDialogs: C,
-						onCardClick: J,
-						onAddClick: Y
-					}, e.id);
+				children: /* @__PURE__ */ y(g, {
+					className: e.searchField,
+					size: "small",
+					placeholder: V.searchFieldPlaceholder,
+					value: J,
+					onChange: (e) => Y(e.target.value),
+					slotProps: {
+						input: { startAdornment: /* @__PURE__ */ y(h, {
+							position: "start",
+							children: /* @__PURE__ */ y(p, {
+								fontSize: "small",
+								sx: { color: "text.disabled" }
+							})
+						}) },
+						htmlInput: { "aria-label": V.searchFieldPlaceholder }
+					},
+					sx: { width: 280 }
 				})
-			}), /* @__PURE__ */ _(o, { children: B && /* @__PURE__ */ _(n, {
-				task: B,
-				showPriority: O,
-				showAssignee: k,
-				showDueDate: A,
-				showDueDateWarning: j,
-				chipVariant: M,
-				t: L,
-				onCardClick: () => {},
-				isOverlay: !0
-			}) })]
-		}), C && /* @__PURE__ */ _(r, {
-			state: H,
-			columns: b,
-			t: L,
-			onSave: X,
-			onDelete: Z,
-			onRequestDelete: Q,
-			onClose: () => U(null)
-		}, H ? `${H.mode}-${H.mode === "add" ? H.columnId : H.task.id}` : "closed")]
+			}),
+			/* @__PURE__ */ b(a, {
+				sensors: X,
+				collisionDetection: l,
+				onDragStart: Z,
+				onDragOver: Q,
+				onDragEnd: te,
+				children: [/* @__PURE__ */ y(m, {
+					className: e.columns,
+					sx: {
+						flex: 1,
+						display: "flex",
+						gap: 2,
+						p: 2,
+						overflowX: "auto",
+						overflowY: "hidden",
+						alignItems: "stretch"
+					},
+					children: S.map((e) => {
+						let t = H.filter((t) => t.status === e.id);
+						return /* @__PURE__ */ y(i, {
+							column: e,
+							tasks: t.filter(se),
+							totalCount: t.length,
+							showPriority: A,
+							showAssignee: j,
+							showDueDate: M,
+							showDueDateWarning: N,
+							showSubtasks: P,
+							chipVariant: F,
+							t: V,
+							enableBuiltinDialogs: T,
+							onCardClick: ne,
+							onAddClick: re
+						}, e.id);
+					})
+				}), /* @__PURE__ */ y(o, { children: W && /* @__PURE__ */ y(n, {
+					task: W,
+					showPriority: A,
+					showAssignee: j,
+					showDueDate: M,
+					showDueDateWarning: N,
+					showSubtasks: P,
+					enableBuiltinDialogs: !1,
+					chipVariant: F,
+					t: V,
+					onCardClick: () => {},
+					isOverlay: !0
+				}) })]
+			}),
+			T && /* @__PURE__ */ y(r, {
+				state: K,
+				columns: S,
+				t: V,
+				showSubtasks: P,
+				onSave: ie,
+				onDelete: ae,
+				onRequestDelete: oe,
+				onClose: () => q(null)
+			}, K ? `${K.mode}-${K.mode === "add" ? K.columnId : K.task.id}` : "closed")
+		]
 	});
 }
 //#endregion
-export { y as KanbanBoard };
+export { x as KanbanBoard };

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

@@ -1,4 +1,9 @@
 export type KanbanTaskPriority = "low" | "medium" | "high" | "critical";
+export type KanbanSubtask = {
+    id: string;
+    title: string;
+    done: boolean;
+};
 export type KanbanTask = {
     id: string;
     title: string;
@@ -11,6 +16,8 @@ export type KanbanTask = {
     dueDate?: Date;
     /** Optional priority level — shown as a colored dot next to the card title when `showPriority` is true. */
     priority?: KanbanTaskPriority;
+    /** Optional checklist items — shown as a progress bar on the card and a checklist in the edit dialog. */
+    subtasks?: KanbanSubtask[];
 };
 export type KanbanColumn = {
     /** Used as the key — must match `KanbanTask.status` values. */
@@ -37,6 +44,14 @@ export type KanbanBoardTranslation = {
     dialogFieldDueDate: string;
     dialogFieldStatus: string;
     noCardsLabel: string;
+    /** Placeholder text for the built-in search field (`showSearchField={true}`). */
+    searchFieldPlaceholder: string;
+    /** Section label for the subtask checklist in the edit/add dialog. */
+    dialogFieldSubtasks: string;
+    /** Placeholder for the "add subtask" input in the dialog. */
+    dialogSubtaskAdd: string;
+    /** Tooltip for the "+" button on the card's subtask progress bar. */
+    cardSubtaskAdd: string;
 };
 export declare const DEFAULT_KANBAN_BOARD_TRANSLATION: Required<KanbanBoardTranslation>;
 export type KanbanBoardProps = {
@@ -92,12 +107,28 @@ export type KanbanBoardProps = {
      * `"filled"` — solid background, more prominent.
      */
     chipVariant?: "outlined" | "filled";
+    /**
+     * Show the subtask progress bar on cards and the subtask checklist in the edit/add dialog (default: true).
+     * Has no visual effect when a card has no `subtasks` field set.
+     */
+    showSubtasks?: boolean;
+    /**
+     * When `true`, renders a built-in `size="small"` search field above the board columns.
+     * The board manages the search state internally — no extra wiring needed.
+     * Customize the placeholder via `translation.searchFieldPlaceholder`.
+     *
+     * For full control over placement, styling, or debouncing, leave this `false` (default)
+     * and pass `filterText` instead.
+     */
+    showSearchField?: boolean;
     /**
      * Filters visible cards by title and assignee (case-insensitive substring match).
      * The consumer is responsible for rendering the search input and passing the string.
      * An empty string or `undefined` shows all cards.
      * Column counters reflect the filtered count; WIP-limit checks always use the
      * unfiltered column total so the over-limit warning is never hidden by a filter.
+     *
+     * Alternative: set `showSearchField={true}` to let the board render a built-in field.
      */
     filterText?: string;
     /** Width of the board. Default: "100%". */

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

@@ -13,7 +13,11 @@ var e = {
 	dialogFieldAssignee: "Assignee",
 	dialogFieldDueDate: "Due date",
 	dialogFieldStatus: "Status",
-	noCardsLabel: "No cards"
+	noCardsLabel: "No cards",
+	searchFieldPlaceholder: "Search by title or assignee…",
+	dialogFieldSubtasks: "Subtasks",
+	dialogSubtaskAdd: "Add subtask",
+	cardSubtaskAdd: "Add subtask"
 };
 //#endregion
 export { e as DEFAULT_KANBAN_BOARD_TRANSLATION };

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

@@ -5,11 +5,13 @@ type KanbanBoardCardProps = {
     showAssignee: boolean;
     showDueDate: boolean;
     showDueDateWarning: boolean;
+    showSubtasks: boolean;
+    enableBuiltinDialogs: 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, showPriority, showAssignee, showDueDate, showDueDateWarning, chipVariant, t, onCardClick, isOverlay, }: KanbanBoardCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function KanbanBoardCard({ task, showPriority, showAssignee, showDueDate, showDueDateWarning, showSubtasks, enableBuiltinDialogs, chipVariant, t, onCardClick, isOverlay, }: KanbanBoardCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,19 +1,20 @@
 import { muiTsStateClasses as e } from "../../utils/muiTsClasses.js";
 import { kanbanBoardClasses as t } from "./kanbanBoardClasses.js";
 import { useSortable as n } from "@dnd-kit/sortable";
-import { Box as r, Card as i, CardActionArea as a, CardContent as o, Chip as s, Typography as c } from "@mui/material";
-import { CSS as l } from "@dnd-kit/utilities";
-import u from "@mui/icons-material/CalendarToday";
-import d from "@mui/icons-material/Person";
-import { alpha as f } from "@mui/material/styles";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Box as r, Card as i, CardActionArea as a, CardContent as o, Chip as s, IconButton as c, LinearProgress as l, Tooltip as u, Typography as d } from "@mui/material";
+import { CSS as f } from "@dnd-kit/utilities";
+import p from "@mui/icons-material/Add";
+import m from "@mui/icons-material/CalendarToday";
+import h from "@mui/icons-material/Person";
+import { alpha as g } from "@mui/material/styles";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/kanban-board/KanbanBoardCard.tsx
-var h = {
+var y = {
 	low: "#4caf50",
 	medium: "#ff9800",
 	high: "#f44336",
 	critical: "#9c27b0"
-}, g = {
+}, b = {
 	fontSize: "0.7rem",
 	height: 22,
 	"& .MuiChip-icon": {
@@ -28,116 +29,175 @@ var h = {
 		pr: "10px"
 	}
 };
-function _({ task: _, showPriority: v, showAssignee: y, showDueDate: b, showDueDateWarning: x, chipVariant: S, t: C, onCardClick: w, isOverlay: T = !1 }) {
-	let { attributes: E, listeners: D, setNodeRef: O, transform: k, transition: A, isDragging: j } = n({
-		id: _.id,
-		disabled: T
-	}), M = T ? void 0 : {
-		transform: l.Transform.toString(k),
-		transition: A,
-		opacity: +!j
-	}, N = y && !!_.assignee || b && !!_.dueDate, P = _.dueDate ? _.dueDate.toLocaleDateString(void 0, {
+function x({ task: x, showPriority: S, showAssignee: C, showDueDate: w, showDueDateWarning: T, showSubtasks: E, enableBuiltinDialogs: D, chipVariant: O, t: k, onCardClick: A, isOverlay: j = !1 }) {
+	let { attributes: M, listeners: N, setNodeRef: P, transform: F, transition: I, isDragging: L } = n({
+		id: x.id,
+		disabled: j
+	}), R = j ? void 0 : {
+		transform: f.Transform.toString(F),
+		transition: I,
+		opacity: +!L
+	}, z = C && !!x.assignee || w && !!x.dueDate, B = E && !!x.subtasks?.length, V = x.subtasks?.length ?? 0, H = x.subtasks?.filter((e) => e.done).length ?? 0, U = x.dueDate ? x.dueDate.toLocaleDateString(void 0, {
 		day: "2-digit",
 		month: "short",
 		year: "numeric"
-	}) : null, F = /* @__PURE__ */ new Date();
-	F.setHours(0, 0, 0, 0);
-	let I = x && !!_.dueDate && _.dueDate < F;
-	return /* @__PURE__ */ p(i, {
-		ref: T ? void 0 : O,
-		style: M,
+	}) : null, W = /* @__PURE__ */ new Date();
+	W.setHours(0, 0, 0, 0);
+	let G = T && !!x.dueDate && x.dueDate < W;
+	return /* @__PURE__ */ _(i, {
+		ref: j ? void 0 : P,
+		style: R,
 		elevation: 0,
-		className: [t.card, j && e.selected].filter(Boolean).join(" "),
+		className: [t.card, L && e.selected].filter(Boolean).join(" "),
 		sx: {
 			mb: 1,
 			border: "1px solid",
-			borderColor: I && !_.color ? "error.light" : "divider",
-			borderLeft: _.color ? `4px solid ${_.color}` : I ? (e) => `4px solid ${e.palette.error.main}` : void 0,
+			borderColor: G && !x.color ? "error.light" : "divider",
+			borderLeft: x.color ? `4px solid ${x.color}` : G ? (e) => `4px solid ${e.palette.error.main}` : void 0,
 			userSelect: "none",
-			cursor: T ? "grabbing" : "grab",
-			bgcolor: (e) => I ? 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,
+			cursor: j ? "grabbing" : "grab",
+			bgcolor: (e) => G ? e.palette.mode === "dark" ? g(e.palette.error.main, .12) : g(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",
-			...!j && !T && { "&:hover": {
+			...!L && !j && { "&: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" }
 		},
-		...T ? {} : {
-			...E,
-			...D
+		...j ? {} : {
+			...M,
+			...N
 		},
-		onClick: () => !j && w(_),
-		"aria-label": _.title,
-		children: /* @__PURE__ */ p(a, {
+		onClick: () => !L && A(x),
+		"aria-label": x.title,
+		children: /* @__PURE__ */ _(a, {
 			component: "div",
 			sx: { cursor: "inherit" },
-			children: /* @__PURE__ */ m(o, {
+			children: /* @__PURE__ */ v(o, {
 				sx: {
 					p: 1.5,
 					"&:last-child": { pb: 1.5 }
 				},
-				children: [/* @__PURE__ */ m(r, {
-					sx: {
-						display: "flex",
-						alignItems: "flex-start",
-						gap: .75,
-						mb: +!!N
-					},
-					children: [v && _.priority && /* @__PURE__ */ p(r, {
-						className: t.cardPriorityDot,
-						role: "img",
-						"aria-label": `Priority: ${_.priority}`,
+				children: [
+					/* @__PURE__ */ v(r, {
 						sx: {
-							width: 8,
-							height: 8,
-							minWidth: 8,
-							borderRadius: "50%",
-							bgcolor: h[_.priority],
-							mt: "5px",
-							flexShrink: 0
-						}
-					}), /* @__PURE__ */ p(c, {
-						className: t.cardTitle,
-						variant: "body2",
+							display: "flex",
+							alignItems: "flex-start",
+							gap: .75,
+							mb: z || B ? 1 : 0
+						},
+						children: [S && x.priority && /* @__PURE__ */ _(r, {
+							className: t.cardPriorityDot,
+							role: "img",
+							"aria-label": `Priority: ${x.priority}`,
+							sx: {
+								width: 8,
+								height: 8,
+								minWidth: 8,
+								borderRadius: "50%",
+								bgcolor: y[x.priority],
+								mt: "5px",
+								flexShrink: 0
+							}
+						}), /* @__PURE__ */ _(d, {
+							className: t.cardTitle,
+							variant: "body2",
+							sx: {
+								lineHeight: 1.4,
+								fontWeight: 700,
+								letterSpacing: "-0.01em"
+							},
+							children: x.title
+						})]
+					}),
+					z && /* @__PURE__ */ v(r, {
+						className: t.cardMeta,
+						sx: {
+							display: "flex",
+							gap: 1,
+							flexWrap: "wrap",
+							alignItems: "center"
+						},
+						children: [C && x.assignee && /* @__PURE__ */ _(s, {
+							className: t.cardAssignee,
+							icon: /* @__PURE__ */ _(h, {}),
+							label: x.assignee,
+							size: "small",
+							variant: O,
+							"aria-label": `${k.dialogFieldAssignee}: ${x.assignee}`,
+							sx: b
+						}), w && U && /* @__PURE__ */ _(s, {
+							className: t.cardDueDate,
+							icon: /* @__PURE__ */ _(m, {}),
+							label: U,
+							size: "small",
+							variant: O,
+							color: G ? "error" : "default",
+							"aria-label": `${k.dialogFieldDueDate}: ${U}`,
+							sx: b
+						})]
+					}),
+					B && /* @__PURE__ */ v(r, {
+						className: t.cardSubtasks,
 						sx: {
-							lineHeight: 1.4,
-							fontWeight: 700,
-							letterSpacing: "-0.01em"
+							display: "flex",
+							alignItems: "center",
+							gap: 1,
+							mt: z ? .75 : 0
 						},
-						children: _.title
-					})]
-				}), N && /* @__PURE__ */ m(r, {
-					className: t.cardMeta,
-					sx: {
-						display: "flex",
-						gap: 1,
-						flexWrap: "wrap",
-						alignItems: "center"
-					},
-					children: [y && _.assignee && /* @__PURE__ */ p(s, {
-						className: t.cardAssignee,
-						icon: /* @__PURE__ */ p(d, {}),
-						label: _.assignee,
-						size: "small",
-						variant: S,
-						"aria-label": `${C.dialogFieldAssignee}: ${_.assignee}`,
-						sx: g
-					}), b && P && /* @__PURE__ */ p(s, {
-						className: t.cardDueDate,
-						icon: /* @__PURE__ */ p(u, {}),
-						label: P,
-						size: "small",
-						variant: S,
-						color: I ? "error" : "default",
-						"aria-label": `${C.dialogFieldDueDate}: ${P}`,
-						sx: g
-					})]
-				})]
+						children: [
+							/* @__PURE__ */ _(l, {
+								className: t.cardSubtasksBar,
+								variant: "determinate",
+								value: H / V * 100,
+								sx: {
+									flex: 1,
+									height: 4,
+									borderRadius: 2
+								},
+								"aria-label": `${H} of ${V} subtasks done`
+							}),
+							/* @__PURE__ */ v(d, {
+								variant: "caption",
+								sx: {
+									whiteSpace: "nowrap",
+									color: "text.secondary",
+									fontSize: "0.65rem",
+									lineHeight: 1
+								},
+								children: [
+									H,
+									" / ",
+									V,
+									" ✓"
+								]
+							}),
+							D && !j && /* @__PURE__ */ _(u, {
+								title: k.cardSubtaskAdd,
+								placement: "top",
+								arrow: !0,
+								children: /* @__PURE__ */ _(c, {
+									size: "small",
+									"aria-label": k.cardSubtaskAdd,
+									onClick: (e) => {
+										e.stopPropagation(), A(x);
+									},
+									sx: {
+										p: .25,
+										opacity: 0,
+										transition: "opacity 0.15s",
+										[`.${t.card}:hover &`]: { opacity: 1 }
+									},
+									children: /* @__PURE__ */ _(p, { sx: { fontSize: "0.85rem" } })
+								})
+							})
+						]
+					})
+				]
 			})
 		})
 	});
 }
 //#endregion
-export { _ as KanbanBoardCard };
+export { x as KanbanBoardCard };