@pixpilot/shadcn-kanban 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pixpilot
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,46 @@
+# @pixpilot/shadcn-kanban
+
+A generic, controlled Kanban board with drag-and-drop powered by
+[`@dnd-kit`](https://dndkit.com), built on
+[`@pixpilot/shadcn-ui`](../shadcn-ui). It owns dragging, column reordering,
+filtering and paging; you own the data.
+
+## Install
+
+```bash
+pnpm add @pixpilot/shadcn-kanban
+```
+
+## Usage
+
+```tsx
+import { KanbanBoard } from '@pixpilot/shadcn-kanban';
+
+<KanbanBoard
+  columns={[
+    { id: 'todo', title: 'To Do' },
+    { id: 'done', title: 'Done' },
+  ]}
+  items={items}
+  onChange={(event) => setItems(event.items)}
+/>;
+```
+
+The board is **controlled**: it renders the `items` prop and never mutates your
+data. A drop produces a `KanbanChangeEvent` carrying the full reordered array —
+assign `event.items` back to your state and the board settles.
+
+## Documentation
+
+| Document                                             | Covers                                                         |
+| ---------------------------------------------------- | -------------------------------------------------------------- |
+| [docs/README.md](./docs/README.md)                   | Overview, layout contract and generics                         |
+| [docs/api.md](./docs/api.md)                         | Every prop, type and callback                                  |
+| [docs/drag-and-drop.md](./docs/drag-and-drop.md)     | How the drag state machine works, and why it is built this way |
+| [docs/filters.md](./docs/filters.md)                 | Per-column filters, board-side and parent-side                 |
+| [docs/infinite-scroll.md](./docs/infinite-scroll.md) | Loading a column's items a page at a time                      |
+| [docs/virtualization.md](./docs/virtualization.md)   | Mounting only the cards near a column's scroll window          |
+
+## License
+
+MIT

package/dist/AddColumnButton.cjs

@@ -0,0 +1,82 @@
+'use client';
+
+
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+let __pixpilot_shadcn_ui = require("@pixpilot/shadcn-ui");
+__pixpilot_shadcn_ui = require_rolldown_runtime.__toESM(__pixpilot_shadcn_ui);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/AddColumnButton.tsx
+/**
+* A button + inline popover that lets the user type a column name
+* and add it to the Kanban board.
+*/
+function AddColumnButton({ onAdd, className }) {
+	const [open, setOpen] = react.default.useState(false);
+	const [value, setValue] = react.default.useState("");
+	const inputRef = react.default.useRef(null);
+	const handleOpen = () => {
+		setOpen(true);
+		requestAnimationFrame(() => inputRef.current?.focus());
+	};
+	const handleClose = () => {
+		setOpen(false);
+		setValue("");
+	};
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		const trimmed = value.trim();
+		if (trimmed.length === 0) return;
+		onAdd(trimmed);
+		handleClose();
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Escape") handleClose();
+	};
+	if (!open) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick: handleOpen,
+		className: (0, __pixpilot_shadcn_ui.cn)("flex min-w-[250px] shrink-0 cursor-pointer items-center justify-center gap-2", "border-muted-foreground/30 rounded-lg border-2 border-dashed", "bg-muted/20 text-muted-foreground p-4 text-sm", "hover:border-primary/40 hover:bg-muted/40 hover:text-foreground transition-colors", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, { className: "h-4 w-4" }), "Add column"]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, __pixpilot_shadcn_ui.cn)("bg-muted/40 flex min-w-[250px] shrink-0 flex-col gap-3 rounded-lg border p-3", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm font-semibold",
+				children: "New column"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: handleClose,
+				className: "text-muted-foreground hover:text-foreground rounded p-0.5 transition-colors",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "h-4 w-4" })
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+			onSubmit: handleSubmit,
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: inputRef,
+				type: "text",
+				placeholder: "Column name…",
+				value,
+				onChange: (e) => setValue(e.target.value),
+				onKeyDown: handleKeyDown,
+				className: (0, __pixpilot_shadcn_ui.cn)("bg-background rounded-md border px-3 py-1.5 text-sm", "placeholder:text-muted-foreground", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "submit",
+				disabled: value.trim().length === 0,
+				className: (0, __pixpilot_shadcn_ui.cn)("bg-primary text-primary-foreground rounded-md px-3 py-1.5 text-sm font-medium", "hover:bg-primary/90 transition-colors", "disabled:cursor-not-allowed disabled:opacity-50"),
+				children: "Add"
+			})]
+		})]
+	});
+}
+
+//#endregion
+exports.AddColumnButton = AddColumnButton;

package/dist/AddColumnButton.js

@@ -0,0 +1,77 @@
+'use client';
+
+
+import { cn } from "@pixpilot/shadcn-ui";
+import React from "react";
+import { Plus, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/AddColumnButton.tsx
+/**
+* A button + inline popover that lets the user type a column name
+* and add it to the Kanban board.
+*/
+function AddColumnButton({ onAdd, className }) {
+	const [open, setOpen] = React.useState(false);
+	const [value, setValue] = React.useState("");
+	const inputRef = React.useRef(null);
+	const handleOpen = () => {
+		setOpen(true);
+		requestAnimationFrame(() => inputRef.current?.focus());
+	};
+	const handleClose = () => {
+		setOpen(false);
+		setValue("");
+	};
+	const handleSubmit = (e) => {
+		e.preventDefault();
+		const trimmed = value.trim();
+		if (trimmed.length === 0) return;
+		onAdd(trimmed);
+		handleClose();
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Escape") handleClose();
+	};
+	if (!open) return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: handleOpen,
+		className: cn("flex min-w-[250px] shrink-0 cursor-pointer items-center justify-center gap-2", "border-muted-foreground/30 rounded-lg border-2 border-dashed", "bg-muted/20 text-muted-foreground p-4 text-sm", "hover:border-primary/40 hover:bg-muted/40 hover:text-foreground transition-colors", className),
+		children: [/* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }), "Add column"]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("bg-muted/40 flex min-w-[250px] shrink-0 flex-col gap-3 rounded-lg border p-3", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-semibold",
+				children: "New column"
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: handleClose,
+				className: "text-muted-foreground hover:text-foreground rounded p-0.5 transition-colors",
+				children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+			})]
+		}), /* @__PURE__ */ jsxs("form", {
+			onSubmit: handleSubmit,
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: "text",
+				placeholder: "Column name…",
+				value,
+				onChange: (e) => setValue(e.target.value),
+				onKeyDown: handleKeyDown,
+				className: cn("bg-background rounded-md border px-3 py-1.5 text-sm", "placeholder:text-muted-foreground", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none")
+			}), /* @__PURE__ */ jsx("button", {
+				type: "submit",
+				disabled: value.trim().length === 0,
+				className: cn("bg-primary text-primary-foreground rounded-md px-3 py-1.5 text-sm font-medium", "hover:bg-primary/90 transition-colors", "disabled:cursor-not-allowed disabled:opacity-50"),
+				children: "Add"
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { AddColumnButton };

package/dist/ColumnFilterButton.cjs

@@ -0,0 +1,68 @@
+'use client';
+
+
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+let __pixpilot_shadcn_ui = require("@pixpilot/shadcn-ui");
+__pixpilot_shadcn_ui = require_rolldown_runtime.__toESM(__pixpilot_shadcn_ui);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/ColumnFilterButton.tsx
+/**
+* A filter icon button rendered in a Kanban column header. Clicking it opens
+* a popover listing the column's filters; selecting one toggles it. A badge
+* shows how many filters are currently active.
+*/
+function ColumnFilterButton({ filters, activeFilterIds, onToggle, onClear }) {
+	const activeCount = activeFilterIds.length;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.Popover, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn_ui.PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			"aria-label": "Filter column",
+			className: (0, __pixpilot_shadcn_ui.cn)("text-muted-foreground hover:text-foreground relative rounded p-0.5 transition-colors", activeCount > 0 && "text-primary"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Filter, { className: "h-4 w-4" }), activeCount > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "bg-primary text-primary-foreground absolute -top-1 -right-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full px-1 text-[10px] leading-none font-medium",
+				children: activeCount
+			}) : null]
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn_ui.PopoverContent, {
+		align: "end",
+		className: "w-56 p-1",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-muted-foreground px-2 py-1.5 text-xs font-medium",
+				children: "Filters"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: "flex flex-col",
+				children: filters.map((filter) => {
+					const active = activeFilterIds.includes(filter.id);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick: () => onToggle(filter.id),
+						"aria-pressed": active,
+						className: (0, __pixpilot_shadcn_ui.cn)("hover:bg-accent hover:text-accent-foreground flex w-full items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors", active && "text-foreground font-medium"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "truncate",
+							children: filter.label
+						}), active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "text-primary h-4 w-4 shrink-0" }) : null]
+					}) }, filter.id);
+				})
+			}),
+			activeCount > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-border my-1 h-px" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: onClear,
+				className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground w-full rounded-sm px-2 py-1.5 text-left text-sm transition-colors",
+				children: "Clear filters"
+			})] }) : null
+		]
+	})] });
+}
+
+//#endregion
+exports.ColumnFilterButton = ColumnFilterButton;

package/dist/ColumnFilterButton.js

@@ -0,0 +1,63 @@
+'use client';
+
+
+import { Popover, PopoverContent, PopoverTrigger, cn } from "@pixpilot/shadcn-ui";
+import React from "react";
+import { Check, Filter } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/ColumnFilterButton.tsx
+/**
+* A filter icon button rendered in a Kanban column header. Clicking it opens
+* a popover listing the column's filters; selecting one toggles it. A badge
+* shows how many filters are currently active.
+*/
+function ColumnFilterButton({ filters, activeFilterIds, onToggle, onClear }) {
+	const activeCount = activeFilterIds.length;
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-label": "Filter column",
+			className: cn("text-muted-foreground hover:text-foreground relative rounded p-0.5 transition-colors", activeCount > 0 && "text-primary"),
+			children: [/* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }), activeCount > 0 ? /* @__PURE__ */ jsx("span", {
+				className: "bg-primary text-primary-foreground absolute -top-1 -right-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full px-1 text-[10px] leading-none font-medium",
+				children: activeCount
+			}) : null]
+		})
+	}), /* @__PURE__ */ jsxs(PopoverContent, {
+		align: "end",
+		className: "w-56 p-1",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground px-2 py-1.5 text-xs font-medium",
+				children: "Filters"
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col",
+				children: filters.map((filter) => {
+					const active = activeFilterIds.includes(filter.id);
+					return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => onToggle(filter.id),
+						"aria-pressed": active,
+						className: cn("hover:bg-accent hover:text-accent-foreground flex w-full items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors", active && "text-foreground font-medium"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: filter.label
+						}), active ? /* @__PURE__ */ jsx(Check, { className: "text-primary h-4 w-4 shrink-0" }) : null]
+					}) }, filter.id);
+				})
+			}),
+			activeCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "bg-border my-1 h-px" }), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onClear,
+				className: "text-muted-foreground hover:bg-accent hover:text-accent-foreground w-full rounded-sm px-2 py-1.5 text-left text-sm transition-colors",
+				children: "Clear filters"
+			})] }) : null
+		]
+	})] });
+}
+
+//#endregion
+export { ColumnFilterButton };

package/dist/KanbanBoard.cjs

@@ -0,0 +1,137 @@
+'use client';
+
+
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_AddColumnButton = require('./AddColumnButton.cjs');
+const require_column_sortable_id = require('./utils/column-sortable-id.cjs');
+const require_use_kanban_drag = require('./hooks/use-kanban-drag.cjs');
+const require_use_kanban_filters = require('./hooks/use-kanban-filters.cjs');
+const require_KanbanColumn = require('./KanbanColumn.cjs');
+const require_KanbanDragOverlay = require('./KanbanDragOverlay.cjs');
+let __dnd_kit_core = require("@dnd-kit/core");
+__dnd_kit_core = require_rolldown_runtime.__toESM(__dnd_kit_core);
+let __dnd_kit_sortable = require("@dnd-kit/sortable");
+__dnd_kit_sortable = require_rolldown_runtime.__toESM(__dnd_kit_sortable);
+let __pixpilot_shadcn_ui = require("@pixpilot/shadcn-ui");
+__pixpilot_shadcn_ui = require_rolldown_runtime.__toESM(__pixpilot_shadcn_ui);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/KanbanBoard.tsx
+const MEASURING = { droppable: { strategy: __dnd_kit_core.MeasuringStrategy.Always } };
+/**
+* Warns once, in development only, when a scroll-only feature is requested for
+* a column mode that cannot support it. Deliberately non-throwing: a mis-set
+* prop should not take a board down in production.
+*/
+function useScrollOnlyFeatureWarning(feature, consequence, requested, columnOverflow) {
+	const warned = react.default.useRef(false);
+	react.default.useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (!requested || columnOverflow === "scroll" || warned.current) return;
+		warned.current = true;
+		console.error(`[KanbanBoard] \`${feature}\` is not implemented for columnOverflow="${columnOverflow}" — only "scroll" is supported. ${consequence}`);
+	}, [
+		feature,
+		consequence,
+		requested,
+		columnOverflow
+	]);
+}
+/**
+* A generic, reusable Kanban board with drag-and-drop powered by `@dnd-kit`.
+*
+* Accepts an array of {@link KanbanItem} items and {@link KanbanColumn}
+* column definitions and calls `onChange` whenever an item is moved
+* between (or within) columns.
+*/
+function KanbanBoard({ items: externalItems, columns, onChange, renderItem, renderColumnHeader, className, style, columnClassName, getColumnProps, hideColumnHeaders = false, itemClassName, columnOverflow = "scroll", allowAddColumn, onAddColumn, onColumnChange, filters, onFilterChange, infiniteScroll, virtualization, dragDisabled = false }) {
+	useScrollOnlyFeatureWarning("infiniteScroll", "The sentinel will not be rendered.", Boolean(infiniteScroll), columnOverflow);
+	useScrollOnlyFeatureWarning("virtualization", "Every card will be rendered.", Boolean(virtualization), columnOverflow);
+	const activeInfiniteScroll = columnOverflow === "scroll" ? infiniteScroll : void 0;
+	const activeVirtualization = columnOverflow === "scroll" && virtualization?.disabled !== true ? virtualization : void 0;
+	const { items, internalColumns, activeId, isDraggingColumn, sensors, collisionDetection, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel } = require_use_kanban_drag.useKanbanDrag({
+		externalItems,
+		columns,
+		onChange,
+		onColumnChange
+	});
+	const { activeFilters, resolveFilters, handleToggleFilter, handleClearFilters } = require_use_kanban_filters.useKanbanFilters({
+		filters,
+		onFilterChange
+	});
+	const activeItem = activeId !== null && !isDraggingColumn ? items.find((i) => i.id === activeId) ?? null : null;
+	const activeItemColumn = activeItem ? internalColumns.find((c) => c.id === activeItem.columnId) : void 0;
+	const activeColumn = activeId !== null && isDraggingColumn ? internalColumns.find((c) => require_column_sortable_id.toColumnSortableId(c.id) === String(activeId)) : void 0;
+	const columnItemsMap = react.default.useMemo(() => internalColumns.map((col) => {
+		const colFilters = resolveFilters(col);
+		const activeIds = activeFilters[col.id] ?? [];
+		const activePredicates = colFilters.filter((f) => activeIds.includes(f.id) && typeof f.predicate === "function");
+		let colItems = items.filter((i) => i.columnId === col.id);
+		if (activePredicates.length > 0) colItems = colItems.filter((item) => activePredicates.every((f) => f.predicate(item, col)));
+		return {
+			column: col,
+			colItems,
+			colFilters,
+			activeIds
+		};
+	}), [
+		internalColumns,
+		items,
+		resolveFilters,
+		activeFilters
+	]);
+	const columnSortableIds = react.default.useMemo(() => internalColumns.map((c) => require_column_sortable_id.toColumnSortableId(c.id)), [internalColumns]);
+	const isColumnSortable = Boolean(onColumnChange) && !dragDisabled;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__dnd_kit_core.DndContext, {
+		sensors,
+		collisionDetection,
+		measuring: MEASURING,
+		onDragStart: handleDragStart,
+		onDragOver: handleDragOver,
+		onDragEnd: handleDragEnd,
+		onDragCancel: handleDragCancel,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__dnd_kit_sortable.SortableContext, {
+			items: columnSortableIds,
+			strategy: __dnd_kit_sortable.horizontalListSortingStrategy,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-testid": "kanban-board",
+				className: (0, __pixpilot_shadcn_ui.cn)("relative flex gap-4 overflow-x-auto overscroll-x-contain p-2", columnOverflow === "scroll" ? "h-full min-h-0" : "min-h-full", className),
+				style,
+				children: [columnItemsMap.map(({ column, colItems, colFilters, activeIds }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_KanbanColumn.KanbanColumn, {
+					column,
+					items: colItems,
+					renderItem,
+					renderColumnHeader,
+					columnClassName,
+					containerProps: getColumnProps?.(column),
+					hideHeader: hideColumnHeaders,
+					itemClassName,
+					sortable: isColumnSortable,
+					filters: colFilters,
+					activeFilterIds: activeIds,
+					columnOverflow,
+					infiniteScroll: activeInfiniteScroll,
+					virtualization: activeVirtualization,
+					dragDisabled,
+					activeItemId: activeItem?.id ?? null,
+					onToggleFilter: (filterId) => handleToggleFilter(column, filterId),
+					onClearFilters: () => handleClearFilters(column)
+				}, column.id)), allowAddColumn && onAddColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AddColumnButton.AddColumnButton, { onAdd: onAddColumn }) : null]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_KanbanDragOverlay.KanbanDragOverlay, {
+			activeItem,
+			activeItemColumn,
+			activeColumn,
+			activeColumnItemCount: activeColumn ? items.filter((i) => i.columnId === activeColumn.id).length : 0,
+			renderItem,
+			itemClassName,
+			columnClassName
+		})]
+	});
+}
+
+//#endregion
+exports.KanbanBoard = KanbanBoard;

package/dist/KanbanBoard.d.cts

@@ -0,0 +1,36 @@
+import { KanbanBoardProps } from "./types.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/KanbanBoard.d.ts
+
+/**
+ * A generic, reusable Kanban board with drag-and-drop powered by `@dnd-kit`.
+ *
+ * Accepts an array of {@link KanbanItem} items and {@link KanbanColumn}
+ * column definitions and calls `onChange` whenever an item is moved
+ * between (or within) columns.
+ */
+declare function KanbanBoard<T = Record<string, unknown>>({
+  items: externalItems,
+  columns,
+  onChange,
+  renderItem,
+  renderColumnHeader,
+  className,
+  style,
+  columnClassName,
+  getColumnProps,
+  hideColumnHeaders,
+  itemClassName,
+  columnOverflow,
+  allowAddColumn,
+  onAddColumn,
+  onColumnChange,
+  filters,
+  onFilterChange,
+  infiniteScroll,
+  virtualization,
+  dragDisabled
+}: KanbanBoardProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { KanbanBoard };

package/dist/KanbanBoard.d.ts

@@ -0,0 +1,36 @@
+import { KanbanBoardProps } from "./types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/KanbanBoard.d.ts
+
+/**
+ * A generic, reusable Kanban board with drag-and-drop powered by `@dnd-kit`.
+ *
+ * Accepts an array of {@link KanbanItem} items and {@link KanbanColumn}
+ * column definitions and calls `onChange` whenever an item is moved
+ * between (or within) columns.
+ */
+declare function KanbanBoard<T = Record<string, unknown>>({
+  items: externalItems,
+  columns,
+  onChange,
+  renderItem,
+  renderColumnHeader,
+  className,
+  style,
+  columnClassName,
+  getColumnProps,
+  hideColumnHeaders,
+  itemClassName,
+  columnOverflow,
+  allowAddColumn,
+  onAddColumn,
+  onColumnChange,
+  filters,
+  onFilterChange,
+  infiniteScroll,
+  virtualization,
+  dragDisabled
+}: KanbanBoardProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { KanbanBoard };