@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/kanban/kanban.js

@@ -0,0 +1,591 @@
+import { useActionRunner, useDirection, useFormatter, usePanel, useT } from "../../context.js";
+import { usePageActionContext } from "../actions/action-context.js";
+import { cn } from "../../lib/utils.js";
+import { badgeColorClasses, colorClass, cssColor } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { Spinner } from "../ui/spinner.js";
+import { ActionList } from "../actions/action-list.js";
+import { Card, CardTitle } from "../ui/card.js";
+import { FormProvider } from "../form/form-context.js";
+import { SchemaRenderer } from "../schema/schema-renderer.js";
+import { Input } from "../ui/input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { showToast } from "../notifications/flash-toasts.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar.js";
+import { KanbanController, attachKanbanPointer, clientErrorNotification, createKanbanFiltersStore, kanbanActiveFilters, kanbanCardsIn, kanbanInitials, kanbanWipState } from "@alfakit/core";
+import { router } from "@inertiajs/react";
+import { Fragment, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon, ChevronRightIcon, ChevronsLeftRightIcon, ChevronsRightLeftIcon, FilterIcon, PlusIcon, SearchIcon } from "lucide-react";
+//#region src/components/kanban/kanban.tsx
+/**
+* The board of a `KanbanPage` (schema component `kanban`) or a `KanbanWidget`
+* (alfasix/alfakit-kanban). Cards move by dragging (mouse, pen, touch) or with the
+* keyboard, and every move is saved in one request.
+*/
+function Kanban({ component, widget }) {
+	const board = component ?? widget?.kanban;
+	return board ? /* @__PURE__ */ jsx(KanbanBoard, { board }, board.actionComponent) : null;
+}
+function KanbanBoard({ board }) {
+	const runner = useActionRunner();
+	const page = usePageActionContext();
+	const panel = usePanel();
+	const t = useT();
+	const direction = useDirection();
+	const formatter = useFormatter();
+	const labelId = useId();
+	const instructionsId = useId();
+	const environment = () => ({
+		runner,
+		token: page.token,
+		t,
+		notify: (notifications) => notifications.forEach((notification) => showToast(notification)),
+		error: (message) => showToast(clientErrorNotification("kanban", message)),
+		visit: (url) => router.visit(url)
+	});
+	const [controller] = useState(() => new KanbanController(board, environment()));
+	const [filters] = useState(() => createKanbanFiltersStore(board, page.token, panel.endpoints.schemaOptions));
+	const root = useRef(null);
+	const cards = useRef(/* @__PURE__ */ new Map());
+	const [focused, setFocused] = useState(null);
+	useEffect(() => {
+		controller.setEnvironment(environment());
+	});
+	const first = useRef(true);
+	useEffect(() => {
+		if (first.current) {
+			first.current = false;
+			return;
+		}
+		controller.setBoard(board);
+	}, [controller, board]);
+	useEffect(() => root.current ? attachKanbanPointer(root.current, controller) : void 0, [controller]);
+	useEffect(() => controller.startPolling(), [controller]);
+	useEffect(() => () => {
+		controller.destroy();
+		filters?.destroy();
+	}, [controller, filters]);
+	const state = useStore(controller.store);
+	const schema = controller.schema;
+	const lanes = controller.lanes();
+	const keys = state.columns.flatMap((column) => column.cards.map((card) => card.key));
+	const current = focused !== null && keys.includes(focused) ? focused : keys[0] ?? null;
+	const focus = (key) => {
+		if (!key) return;
+		setFocused(key);
+		requestAnimationFrame(() => cards.current.get(key)?.focus());
+	};
+	const picked = state.picked;
+	useEffect(() => {
+		if (picked?.via === "keyboard") {
+			const element = cards.current.get(picked.key);
+			if (element && document.activeElement !== element) element.focus();
+		}
+	}, [picked]);
+	const onKeyDown = (key) => (event) => {
+		if (event.target !== event.currentTarget) return;
+		const result = controller.handleKey(key, event, direction);
+		if (!result.handled) return;
+		event.preventDefault();
+		if (result.open) controller.open(key);
+		else focus(result.focus);
+	};
+	const template = state.columns.map((column) => state.collapsed.has(column.key) ? "3.25rem" : "minmax(16rem, 20rem)").join(" ");
+	return /* @__PURE__ */ jsxs(Card, {
+		ref: root,
+		role: "region",
+		"aria-labelledby": labelId,
+		className: "gap-3 py-4",
+		"data-slot": "kanban",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2 px-4",
+				"data-slot": "kanban-toolbar",
+				children: [schema.heading ? /* @__PURE__ */ jsx(CardTitle, {
+					id: labelId,
+					className: "text-base",
+					children: schema.heading
+				}) : /* @__PURE__ */ jsx("span", {
+					id: labelId,
+					className: "sr-only",
+					children: t("kanban.label", {}, "Kanban board")
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "ms-auto flex w-full flex-wrap items-center gap-2 sm:w-auto",
+					children: [
+						state.loading && /* @__PURE__ */ jsx(Spinner, {
+							className: "size-4",
+							"aria-label": t("kanban.loading", {}, "Loading board")
+						}),
+						schema.searchable && /* @__PURE__ */ jsx(KanbanSearch, {
+							controller,
+							search: state.search,
+							t
+						}),
+						filters && /* @__PURE__ */ jsx(KanbanFilters, {
+							controller,
+							store: filters,
+							t
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: instructionsId,
+				className: "sr-only",
+				children: t("kanban.instructions", {}, "Press Space to pick up a card. While it is picked up, use the arrow keys to move it, Space to drop it and Escape to cancel.")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative overflow-x-auto overscroll-x-contain px-4 pb-2",
+				"data-slot": "kanban-scroller",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "grid w-max min-w-full snap-x gap-3",
+					style: { gridTemplateColumns: template },
+					children: [state.columns.map((column) => /* @__PURE__ */ jsx(ColumnHeader, {
+						column,
+						id: `${labelId}-column-${column.key}`,
+						collapsed: state.collapsed.has(column.key),
+						creatable: Boolean(column.creatable && schema.createAction),
+						filtered: state.search !== "" || kanbanActiveFilters(state.filters) > 0,
+						onToggle: () => controller.toggleColumn(column.key),
+						onCreate: () => controller.create(column.key),
+						t
+					}, column.key)), lanes.map((lane) => {
+						const laneId = lane ? `${labelId}-lane-${lane.key}` : void 0;
+						const collapsedLane = lane !== null && state.collapsedLanes.has(lane.key);
+						return /* @__PURE__ */ jsxs(Fragment, { children: [lane && /* @__PURE__ */ jsx(LaneHeader, {
+							lane,
+							id: laneId,
+							count: state.columns.reduce((sum, column) => sum + kanbanCardsIn(column, lane.key).length, 0),
+							collapsed: collapsedLane,
+							onToggle: () => controller.toggleLane(lane.key),
+							t
+						}), !collapsedLane && state.columns.map((column) => {
+							const collapsed = state.collapsed.has(column.key);
+							const items = kanbanCardsIn(column, lane?.key ?? null);
+							const hidden = lane === null ? column.total - column.cards.length : 0;
+							return /* @__PURE__ */ jsxs("ul", {
+								role: "list",
+								"aria-labelledby": [`${labelId}-column-${column.key}`, laneId].filter(Boolean).join(" "),
+								"data-slot": "kanban-dropzone",
+								"data-column": column.key,
+								"data-lane": lane?.key,
+								"data-refused": state.picked && state.refused?.column === column.key ? "" : void 0,
+								className: cn("bg-muted/40 flex min-h-24 flex-col gap-2 rounded-lg p-2", lane === null && "max-h-[70vh] overflow-y-auto"),
+								children: [
+									!collapsed && items.map((card) => /* @__PURE__ */ jsx(KanbanCard, {
+										card,
+										board: schema,
+										token: page.token,
+										current: current === card.key,
+										picked: state.picked?.key === card.key ? state.picked.via : void 0,
+										saving: state.saving.has(card.key),
+										describedBy: instructionsId,
+										formatter,
+										t,
+										setRef: (element) => {
+											if (element) cards.current.set(card.key, element);
+											else cards.current.delete(card.key);
+										},
+										onFocus: () => setFocused(card.key),
+										onKeyDown: onKeyDown(card.key),
+										onOpen: () => controller.open(card.key)
+									}, card.key)),
+									!collapsed && items.length === 0 && /* @__PURE__ */ jsx("li", {
+										className: "text-muted-foreground rounded-md border border-dashed px-2 py-6 text-center text-xs",
+										"data-slot": "kanban-empty",
+										children: state.search !== "" || kanbanActiveFilters(state.filters) > 0 ? t("kanban.no_results", {}, "No cards match") : column.emptyState ?? t("kanban.empty", {}, "No cards")
+									}),
+									!collapsed && hidden > 0 && /* @__PURE__ */ jsx("li", {
+										className: "text-muted-foreground px-2 text-center text-xs",
+										children: t("kanban.more_cards", { count: hidden }, "+:count more")
+									})
+								]
+							}, column.key);
+						})] }, lane?.key ?? "__board");
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "sr-only",
+				role: "status",
+				"aria-live": "polite",
+				children: state.announcement
+			})
+		]
+	});
+}
+function KanbanSearch({ controller, search, t }) {
+	const [value, setValue] = useState(search);
+	const [synced, setSynced] = useState(search);
+	if (synced !== search) {
+		setSynced(search);
+		setValue(search);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full sm:w-64",
+		children: [/* @__PURE__ */ jsx(SearchIcon, {
+			className: "text-muted-foreground pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ jsx(Input, {
+			type: "search",
+			value,
+			className: "h-8 ps-8",
+			placeholder: t("kanban.search_placeholder", {}, "Search…"),
+			"aria-label": t("kanban.search", {}, "Search cards"),
+			onChange: (event) => {
+				setValue(event.target.value);
+				controller.setSearch(event.target.value);
+			}
+		})]
+	});
+}
+function KanbanFilters({ controller, store, t }) {
+	const form = useStore(store.store);
+	const [initial] = useState(() => ({
+		components: store.state.components,
+		state: store.state.values,
+		columns: store.state.columns
+	}));
+	const active = kanbanActiveFilters(form.values);
+	useEffect(() => {
+		if (form.dirty.size > 0) controller.setFilters(form.values);
+	}, [
+		controller,
+		form.values,
+		form.dirty
+	]);
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			"data-slot": "kanban-filters",
+			children: [
+				/* @__PURE__ */ jsx(FilterIcon, { "aria-hidden": "true" }),
+				t("kanban.filters", {}, "Filters"),
+				active > 0 && /* @__PURE__ */ jsx(Badge, {
+					className: "h-5 min-w-5 px-1",
+					children: active
+				})
+			]
+		})
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		align: "end",
+		className: "w-80 sm:w-96",
+		children: /* @__PURE__ */ jsx(FormProvider, {
+			store,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4",
+				children: [/* @__PURE__ */ jsx(SchemaRenderer, {
+					components: form.components,
+					columns: form.columns,
+					className: "gap-4"
+				}), active > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex justify-end",
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "link",
+						size: "sm",
+						onClick: () => {
+							store.fill(initial);
+							controller.setFilters(null, 0);
+						},
+						children: t("kanban.reset_filters", {}, "Reset")
+					})
+				})]
+			})
+		})
+	})] });
+}
+function ColumnHeader({ column, id, collapsed, creatable, filtered, onToggle, onCreate, t }) {
+	const wip = kanbanWipState(column);
+	const shown = column.wipLimit !== void 0 ? column.count : filtered ? column.total : column.count;
+	const countLabel = column.wipLimit !== void 0 ? t("kanban.wip", {
+		count: column.count,
+		limit: column.wipLimit
+	}, ":count of :limit") : filtered && column.total !== column.count ? t("kanban.count_filtered", {
+		shown: column.total,
+		count: column.count
+	}, ":shown of :count cards") : t("kanban.count", { count: column.count }, ":count cards");
+	const style = column.color ? { borderTopColor: cssColor(column.color) } : void 0;
+	const toggleLabel = collapsed ? t("kanban.expand", { column: column.label }, "Expand :column") : t("kanban.collapse", { column: column.label }, "Collapse :column");
+	if (collapsed) return /* @__PURE__ */ jsxs("div", {
+		className: "bg-muted/60 flex snap-start flex-col items-center gap-2 rounded-lg border border-t-4 px-1 py-2",
+		style,
+		"data-slot": "kanban-column-header",
+		"data-column": column.key,
+		"data-collapsed": "",
+		"data-wip": wip ?? void 0,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-xs",
+				"aria-label": toggleLabel,
+				"aria-expanded": false,
+				onClick: onToggle,
+				children: /* @__PURE__ */ jsx(ChevronsLeftRightIcon, { "aria-hidden": "true" })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs tabular-nums",
+				title: countLabel,
+				children: shown
+			}),
+			/* @__PURE__ */ jsx("h3", {
+				id,
+				className: "text-sm font-medium [writing-mode:vertical-rl]",
+				children: column.label
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bg-muted/60 flex snap-start flex-col gap-1 rounded-lg border border-t-4 px-3 py-2",
+		style,
+		"data-slot": "kanban-column-header",
+		"data-column": column.key,
+		"data-wip": wip ?? void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					column.icon && /* @__PURE__ */ jsx(Icon, {
+						name: column.icon,
+						className: "text-muted-foreground size-4"
+					}),
+					/* @__PURE__ */ jsx("h3", {
+						id,
+						className: "min-w-0 truncate text-sm font-semibold",
+						children: column.label
+					}),
+					/* @__PURE__ */ jsxs(Badge, {
+						variant: "secondary",
+						className: cn("h-5 px-1.5 tabular-nums", wip === "over" && "bg-destructive/15 text-destructive", wip === "full" && "bg-warning/15 text-warning"),
+						title: countLabel,
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: column.wipLimit !== void 0 ? `${column.count}/${column.wipLimit}` : shown
+						}), /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: countLabel
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "ms-auto flex items-center",
+						children: [creatable && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-xs",
+							"aria-label": t("kanban.add_card", { column: column.label }, "Add a card to :column"),
+							title: t("kanban.add_card", { column: column.label }, "Add a card to :column"),
+							onClick: onCreate,
+							children: /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" })
+						}), column.collapsible && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-xs",
+							"aria-label": toggleLabel,
+							title: toggleLabel,
+							"aria-expanded": true,
+							onClick: onToggle,
+							children: /* @__PURE__ */ jsx(ChevronsRightLeftIcon, { "aria-hidden": "true" })
+						})]
+					})
+				]
+			}),
+			column.description && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground line-clamp-2 text-xs",
+				children: column.description
+			}),
+			wip === "over" && /* @__PURE__ */ jsx("p", {
+				className: "text-destructive text-xs",
+				children: t("kanban.wip_over", { limit: column.wipLimit ?? 0 }, "Over the limit of :limit cards")
+			}),
+			wip === "full" && column.wipStrict && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-xs",
+				children: t("kanban.wip_full", {}, "This column is full")
+			})
+		]
+	});
+}
+function LaneHeader({ lane, id, count, collapsed, onToggle, t }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 pt-2",
+		style: { gridColumn: "1 / -1" },
+		"data-slot": "kanban-lane",
+		"data-lane": lane.key,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				"aria-expanded": !collapsed,
+				"aria-label": collapsed ? t("kanban.expand_lane", { lane: lane.label }, "Expand row :lane") : t("kanban.collapse_lane", { lane: lane.label }, "Collapse row :lane"),
+				onClick: onToggle,
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+					className: cn("transition-transform rtl:rotate-180", !collapsed && "rotate-90 rtl:rotate-90"),
+					"aria-hidden": "true"
+				})
+			}),
+			lane.avatar ? /* @__PURE__ */ jsxs(Avatar, {
+				className: "size-6",
+				children: [/* @__PURE__ */ jsx(AvatarImage, {
+					src: lane.avatar,
+					alt: ""
+				}), /* @__PURE__ */ jsx(AvatarFallback, { children: kanbanInitials(lane.label) })]
+			}) : lane.icon && /* @__PURE__ */ jsx(Icon, {
+				name: lane.icon,
+				className: "text-muted-foreground size-4"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				id,
+				className: "text-sm font-semibold",
+				children: lane.label
+			}),
+			/* @__PURE__ */ jsx(Badge, {
+				variant: "secondary",
+				className: "h-5 px-1.5 tabular-nums",
+				children: count
+			})
+		]
+	});
+}
+function KanbanCard({ card, board, token, current, picked, saving, describedBy, formatter, t, setRef, onFocus, onKeyDown, onOpen }) {
+	const titleId = useId();
+	const opens = card.clickable !== false && Boolean(card.url || board.cardAction);
+	const assignees = card.assignees ?? [];
+	const shownAssignees = assignees.slice(0, 3);
+	return /* @__PURE__ */ jsxs("li", {
+		className: "relative",
+		"data-slot": "kanban-card",
+		"data-key": card.key,
+		"data-movable": board.movable && card.movable !== false ? void 0 : "false",
+		"data-picked": picked,
+		"data-saving": saving ? "" : void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			ref: setRef,
+			role: "button",
+			tabIndex: current ? 0 : -1,
+			"aria-labelledby": titleId,
+			"aria-describedby": describedBy,
+			"aria-disabled": opens ? void 0 : true,
+			"data-slot": "kanban-card-body",
+			className: cn("bg-card text-card-foreground focus-visible:ring-ring/50 flex touch-manipulation flex-col gap-2 overflow-hidden rounded-lg border p-3 text-start shadow-xs outline-none select-none focus-visible:ring-[3px]", opens && "hover:border-ring/60 cursor-pointer", card.color && "border-s-4"),
+			style: card.color ? { borderInlineStartColor: cssColor(card.color) } : void 0,
+			onFocus: (event) => event.target === event.currentTarget && onFocus(),
+			onKeyDown,
+			onClick: () => opens && onOpen(),
+			children: [
+				card.coverImage && /* @__PURE__ */ jsx("img", {
+					src: card.coverImage,
+					alt: card.coverImageAlt ?? "",
+					loading: "lazy",
+					draggable: false,
+					className: "-mx-3 -mt-3 h-32 w-[calc(100%+1.5rem)] max-w-none object-cover"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					id: titleId,
+					className: cn("text-sm leading-snug font-medium", card.actions && "pe-7"),
+					children: card.title
+				}),
+				card.description && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground line-clamp-3 text-xs",
+					children: card.description
+				}),
+				card.badges && card.badges.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-1",
+					children: card.badges.map((badge, index) => /* @__PURE__ */ jsxs(Badge, {
+						variant: "outline",
+						title: badge.tooltip,
+						className: colorClass(badgeColorClasses, badge.color, "gray"),
+						children: [badge.icon && /* @__PURE__ */ jsx(Icon, { name: badge.icon }), badge.label]
+					}, index))
+				}),
+				card.schema && card.schema.length > 0 && /* @__PURE__ */ jsx(SchemaRenderer, {
+					components: card.schema,
+					className: "gap-2 text-xs"
+				}),
+				card.progress !== void 0 && /* @__PURE__ */ jsx("div", {
+					role: "progressbar",
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuenow": Math.round(card.progress),
+					"aria-label": t("kanban.progress", { percent: formatter.percent(card.progress / 100) }, ":percent complete"),
+					className: "bg-muted h-1.5 overflow-hidden rounded-full",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "bg-primary h-full rounded-full",
+						style: { width: `${card.progress}%` }
+					})
+				}),
+				(card.dueDate || assignees.length > 0) && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 text-xs",
+					children: [card.dueDate && /* @__PURE__ */ jsxs("span", {
+						className: cn("inline-flex items-center gap-1", card.overdue ? "text-destructive font-medium" : "text-muted-foreground"),
+						children: [
+							/* @__PURE__ */ jsx(CalendarIcon, {
+								className: "size-3.5",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: t("kanban.due", { date: formatter.date(card.dueDate) }, "Due :date")
+							}),
+							/* @__PURE__ */ jsx("time", {
+								dateTime: card.dueDate,
+								"aria-hidden": "true",
+								children: formatter.date(card.dueDate)
+							}),
+							card.overdue && /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: t("kanban.overdue", {}, "Overdue")
+							})
+						]
+					}), assignees.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "ms-auto flex items-center",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: t("kanban.assignees", { names: formatter.list(assignees.map((assignee) => assignee.name)) }, "Assigned to :names")
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex -space-x-1.5 rtl:space-x-reverse",
+							"aria-hidden": "true",
+							children: [shownAssignees.map((assignee, index) => /* @__PURE__ */ jsxs(Avatar, {
+								className: "ring-card size-6 ring-2",
+								title: assignee.name,
+								children: [assignee.avatar && /* @__PURE__ */ jsx(AvatarImage, {
+									src: assignee.avatar,
+									alt: ""
+								}), /* @__PURE__ */ jsx(AvatarFallback, {
+									className: "text-[0.625rem]",
+									children: kanbanInitials(assignee.name)
+								})]
+							}, index)), assignees.length > shownAssignees.length && /* @__PURE__ */ jsx("span", {
+								className: "bg-muted ring-card flex size-6 items-center justify-center rounded-full text-[0.625rem] font-medium ring-2",
+								children: t("kanban.more_assignees", { count: assignees.length - shownAssignees.length }, "+:count")
+							})]
+						})]
+					})]
+				})
+			]
+		}), card.actions && card.actions.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "absolute end-1.5 top-1.5",
+			"data-kanban-no-drag": "",
+			children: /* @__PURE__ */ jsx(ActionList, {
+				actions: card.actions,
+				context: {
+					token,
+					component: board.actionComponent,
+					record: card.key
+				},
+				size: "xs"
+			})
+		})]
+	});
+}
+//#endregion
+export { Kanban };
+
+//# sourceMappingURL=kanban.js.map