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

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. */
@@ -39,6 +46,12 @@ export type KanbanBoardTranslation = {
     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 = {
@@ -94,6 +107,11 @@ 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.

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

@@ -14,7 +14,10 @@ var e = {
 	dialogFieldDueDate: "Due date",
 	dialogFieldStatus: "Status",
 	noCardsLabel: "No cards",
-	searchFieldPlaceholder: "Search by title or assignee…"
+	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 };

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

@@ -13,11 +13,12 @@ type KanbanBoardCardDialogProps = {
     state: KanbanDialogState | null;
     columns: KanbanColumn[];
     t: Required<KanbanBoardTranslation>;
+    showSubtasks: boolean;
     onSave: (task: KanbanTask) => void;
     onDelete: (taskId: string) => void;
     onClose: () => void;
     /** Switch from edit to delete confirmation — handled in parent. */
     onRequestDelete: (task: KanbanTask) => void;
 };
-export declare function KanbanBoardCardDialog({ state, columns, t, onSave, onDelete, onClose, onRequestDelete }: KanbanBoardCardDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function KanbanBoardCardDialog({ state, columns, t, showSubtasks, onSave, onDelete, onClose, onRequestDelete }: KanbanBoardCardDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,120 +1,216 @@
-import { Button as e, Dialog as t, DialogActions as n, DialogContent as r, DialogContentText as i, DialogTitle as a, MenuItem as o, Stack as s, TextField as c } from "@mui/material";
-import { useState as l } from "react";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import p from "@mui/icons-material/Delete";
+import { Box as e, Button as t, Checkbox as n, Dialog as r, DialogActions as i, DialogContent as a, DialogContentText as o, DialogTitle as s, FormControlLabel as c, IconButton as l, InputAdornment as u, MenuItem as d, Stack as f, TextField as p, Typography as m } from "@mui/material";
+import { useState as h } from "react";
+import g from "@mui/icons-material/Add";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import b from "@mui/icons-material/Close";
+import x from "@mui/icons-material/Delete";
 //#region src/components/kanban-board/KanbanBoardCardDialog.tsx
-function m({ state: m, columns: h, t: g, onSave: _, onDelete: v, onClose: y, onRequestDelete: b }) {
-	let x = m?.mode === "add", S = m?.mode === "edit", C = m?.mode === "delete", w = S ? m.task : null, T = C ? m.task : null, E = x ? m.columnId : null, [D, O] = l(() => S && w ? { ...w } : x && E ? {
+function S({ state: S, columns: C, t: w, showSubtasks: T, onSave: E, onDelete: D, onClose: O, onRequestDelete: k }) {
+	let A = S?.mode === "add", j = S?.mode === "edit", M = S?.mode === "delete", N = j ? S.task : null, P = M ? S.task : null, F = A ? S.columnId : null, [I, L] = h(() => j && N ? { ...N } : A && F ? {
 		id: "",
 		title: "",
-		status: E
+		status: F
 	} : {
 		id: "",
 		title: "",
-		status: h[0]?.id ?? ""
-	});
-	function k() {
-		let e = D.title.trim();
-		e && _({
-			...D,
+		status: C[0]?.id ?? ""
+	}), [R, z] = h("");
+	function B() {
+		let e = R.trim();
+		if (!e) return;
+		let t = {
+			id: crypto.randomUUID(),
+			title: e,
+			done: !1
+		};
+		L((e) => ({
+			...e,
+			subtasks: [...e.subtasks ?? [], t]
+		})), z("");
+	}
+	function V(e) {
+		L((t) => ({
+			...t,
+			subtasks: t.subtasks?.map((t) => t.id === e ? {
+				...t,
+				done: !t.done
+			} : t)
+		}));
+	}
+	function H(e) {
+		L((t) => ({
+			...t,
+			subtasks: t.subtasks?.filter((t) => t.id !== e)
+		}));
+	}
+	function U() {
+		let e = I.title.trim();
+		e && E({
+			...I,
 			title: e,
-			id: S ? D.id : crypto.randomUUID()
+			id: j ? I.id : crypto.randomUUID()
 		});
 	}
-	function A(e, t) {
-		O((n) => ({
+	function W(e, t) {
+		L((n) => ({
 			...n,
 			[e]: t
 		}));
 	}
-	let j = x ? g.dialogAddTitle : S ? g.dialogEditTitle : g.dialogDeleteTitle;
-	return /* @__PURE__ */ f(t, {
-		open: !!m,
-		onClose: y,
+	let G = A ? w.dialogAddTitle : j ? w.dialogEditTitle : w.dialogDeleteTitle;
+	return /* @__PURE__ */ y(r, {
+		open: !!S,
+		onClose: O,
 		maxWidth: "xs",
 		fullWidth: !0,
-		children: [/* @__PURE__ */ d(a, { children: j }), C && T ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(r, { children: /* @__PURE__ */ d(i, { children: g.dialogDeleteConfirm.replace("{title}", T.title) }) }), /* @__PURE__ */ f(n, { children: [/* @__PURE__ */ d(e, {
-			onClick: y,
-			children: g.dialogCancel
-		}), /* @__PURE__ */ d(e, {
+		children: [/* @__PURE__ */ v(s, { children: G }), M && P ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(a, { children: /* @__PURE__ */ v(o, { children: w.dialogDeleteConfirm.replace("{title}", P.title) }) }), /* @__PURE__ */ y(i, { children: [/* @__PURE__ */ v(t, {
+			onClick: O,
+			children: w.dialogCancel
+		}), /* @__PURE__ */ v(t, {
 			color: "error",
-			startIcon: /* @__PURE__ */ d(p, {}),
-			onClick: () => v(T.id),
-			children: g.dialogDelete
-		})] })] }) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(r, { children: /* @__PURE__ */ f(s, {
+			startIcon: /* @__PURE__ */ v(x, {}),
+			onClick: () => D(P.id),
+			children: w.dialogDelete
+		})] })] }) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(a, { children: /* @__PURE__ */ y(f, {
 			spacing: 2,
 			sx: { pt: .5 },
 			children: [
-				/* @__PURE__ */ d(c, {
-					label: g.dialogFieldTitle,
-					value: D.title,
-					onChange: (e) => A("title", e.target.value),
+				/* @__PURE__ */ v(p, {
+					label: w.dialogFieldTitle,
+					value: I.title,
+					onChange: (e) => W("title", e.target.value),
 					required: !0,
 					fullWidth: !0,
 					size: "small",
 					autoFocus: !0,
-					onKeyDown: (e) => e.key === "Enter" && k()
+					onKeyDown: (e) => e.key === "Enter" && U()
 				}),
-				/* @__PURE__ */ d(c, {
-					label: g.dialogFieldDescription,
-					value: D.description ?? "",
-					onChange: (e) => A("description", e.target.value || void 0),
+				/* @__PURE__ */ v(p, {
+					label: w.dialogFieldDescription,
+					value: I.description ?? "",
+					onChange: (e) => W("description", e.target.value || void 0),
 					fullWidth: !0,
 					size: "small",
 					multiline: !0,
 					rows: 3
 				}),
-				/* @__PURE__ */ d(c, {
-					label: g.dialogFieldAssignee,
-					value: D.assignee ?? "",
-					onChange: (e) => A("assignee", e.target.value || void 0),
+				/* @__PURE__ */ v(p, {
+					label: w.dialogFieldAssignee,
+					value: I.assignee ?? "",
+					onChange: (e) => W("assignee", e.target.value || void 0),
 					fullWidth: !0,
 					size: "small"
 				}),
-				/* @__PURE__ */ d(c, {
-					label: g.dialogFieldDueDate,
+				/* @__PURE__ */ v(p, {
+					label: w.dialogFieldDueDate,
 					type: "date",
-					value: D.dueDate ? D.dueDate.toISOString().split("T")[0] : "",
-					onChange: (e) => A("dueDate", e.target.value ? /* @__PURE__ */ new Date(e.target.value + "T00:00:00") : void 0),
+					value: I.dueDate ? I.dueDate.toISOString().split("T")[0] : "",
+					onChange: (e) => W("dueDate", e.target.value ? /* @__PURE__ */ new Date(e.target.value + "T00:00:00") : void 0),
 					fullWidth: !0,
 					size: "small",
 					slotProps: { inputLabel: { shrink: !0 } }
 				}),
-				/* @__PURE__ */ d(c, {
+				/* @__PURE__ */ v(p, {
 					select: !0,
-					label: g.dialogFieldStatus,
-					value: D.status,
-					onChange: (e) => A("status", e.target.value),
+					label: w.dialogFieldStatus,
+					value: I.status,
+					onChange: (e) => W("status", e.target.value),
 					fullWidth: !0,
 					size: "small",
-					children: h.map((e) => /* @__PURE__ */ d(o, {
+					children: C.map((e) => /* @__PURE__ */ v(d, {
 						value: e.id,
 						children: e.label
 					}, e.id))
-				})
+				}),
+				T && /* @__PURE__ */ y(e, { children: [
+					/* @__PURE__ */ v(m, {
+						variant: "caption",
+						color: "text.secondary",
+						sx: {
+							display: "block",
+							mb: .5
+						},
+						children: w.dialogFieldSubtasks
+					}),
+					/* @__PURE__ */ v(f, {
+						spacing: .25,
+						children: (I.subtasks ?? []).map((t) => /* @__PURE__ */ y(e, {
+							sx: {
+								display: "flex",
+								alignItems: "center"
+							},
+							children: [/* @__PURE__ */ v(c, {
+								sx: {
+									flex: 1,
+									m: 0
+								},
+								control: /* @__PURE__ */ v(n, {
+									size: "small",
+									checked: t.done,
+									onChange: () => V(t.id),
+									sx: { p: .5 }
+								}),
+								label: /* @__PURE__ */ v(m, {
+									variant: "body2",
+									sx: {
+										textDecoration: t.done ? "line-through" : "none",
+										color: t.done ? "text.disabled" : "text.primary"
+									},
+									children: t.title
+								})
+							}), /* @__PURE__ */ v(l, {
+								size: "small",
+								onClick: () => H(t.id),
+								"aria-label": `Remove ${t.title}`,
+								children: /* @__PURE__ */ v(b, { fontSize: "small" })
+							})]
+						}, t.id))
+					}),
+					/* @__PURE__ */ v(p, {
+						size: "small",
+						placeholder: w.dialogSubtaskAdd,
+						value: R,
+						onChange: (e) => z(e.target.value),
+						onKeyDown: (e) => {
+							e.key === "Enter" && (e.preventDefault(), B());
+						},
+						fullWidth: !0,
+						sx: { mt: 1 },
+						slotProps: { input: { endAdornment: /* @__PURE__ */ v(u, {
+							position: "end",
+							children: /* @__PURE__ */ v(l, {
+								size: "small",
+								onClick: B,
+								disabled: !R.trim(),
+								"aria-label": w.dialogSubtaskAdd,
+								children: /* @__PURE__ */ v(g, { fontSize: "small" })
+							})
+						}) } }
+					})
+				] })
 			]
-		}) }), /* @__PURE__ */ f(n, {
-			sx: { justifyContent: S ? "space-between" : "flex-end" },
-			children: [S && w && /* @__PURE__ */ d(e, {
+		}) }), /* @__PURE__ */ y(i, {
+			sx: { justifyContent: j ? "space-between" : "flex-end" },
+			children: [j && N && /* @__PURE__ */ v(t, {
 				color: "error",
-				startIcon: /* @__PURE__ */ d(p, {}),
-				onClick: () => b(w),
-				children: g.dialogDelete
-			}), /* @__PURE__ */ f(s, {
+				startIcon: /* @__PURE__ */ v(x, {}),
+				onClick: () => k(N),
+				children: w.dialogDelete
+			}), /* @__PURE__ */ y(f, {
 				direction: "row",
 				spacing: 1,
-				children: [/* @__PURE__ */ d(e, {
-					onClick: y,
-					children: g.dialogCancel
-				}), /* @__PURE__ */ d(e, {
+				children: [/* @__PURE__ */ v(t, {
+					onClick: O,
+					children: w.dialogCancel
+				}), /* @__PURE__ */ v(t, {
 					variant: "contained",
-					onClick: k,
-					disabled: !D.title.trim(),
-					children: g.dialogSave
+					onClick: U,
+					disabled: !I.title.trim(),
+					children: w.dialogSave
 				})]
 			})]
 		})] })]
 	});
 }
 //#endregion
-export { m as KanbanBoardCardDialog };
+export { S as KanbanBoardCardDialog };