@pixpilot/shadcn-kanban 0.0.0

package/dist/KanbanBoard.js

@@ -0,0 +1,131 @@
+'use client';
+
+
+import { AddColumnButton } from "./AddColumnButton.js";
+import { toColumnSortableId } from "./utils/column-sortable-id.js";
+import { useKanbanDrag } from "./hooks/use-kanban-drag.js";
+import { useKanbanFilters } from "./hooks/use-kanban-filters.js";
+import { KanbanColumn } from "./KanbanColumn.js";
+import { KanbanDragOverlay } from "./KanbanDragOverlay.js";
+import { DndContext, MeasuringStrategy } from "@dnd-kit/core";
+import { SortableContext, horizontalListSortingStrategy } from "@dnd-kit/sortable";
+import { cn } from "@pixpilot/shadcn-ui";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/KanbanBoard.tsx
+const MEASURING = { droppable: { strategy: 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.useRef(false);
+	React.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 } = useKanbanDrag({
+		externalItems,
+		columns,
+		onChange,
+		onColumnChange
+	});
+	const { activeFilters, resolveFilters, handleToggleFilter, handleClearFilters } = 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) => toColumnSortableId(c.id) === String(activeId)) : void 0;
+	const columnItemsMap = React.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.useMemo(() => internalColumns.map((c) => toColumnSortableId(c.id)), [internalColumns]);
+	const isColumnSortable = Boolean(onColumnChange) && !dragDisabled;
+	return /* @__PURE__ */ jsxs(DndContext, {
+		sensors,
+		collisionDetection,
+		measuring: MEASURING,
+		onDragStart: handleDragStart,
+		onDragOver: handleDragOver,
+		onDragEnd: handleDragEnd,
+		onDragCancel: handleDragCancel,
+		children: [/* @__PURE__ */ jsx(SortableContext, {
+			items: columnSortableIds,
+			strategy: horizontalListSortingStrategy,
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-testid": "kanban-board",
+				className: 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__ */ jsx(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__ */ jsx(AddColumnButton, { onAdd: onAddColumn }) : null]
+			})
+		}), /* @__PURE__ */ jsx(KanbanDragOverlay, {
+			activeItem,
+			activeItemColumn,
+			activeColumn,
+			activeColumnItemCount: activeColumn ? items.filter((i) => i.columnId === activeColumn.id).length : 0,
+			renderItem,
+			itemClassName,
+			columnClassName
+		})]
+	});
+}
+
+//#endregion
+export { KanbanBoard };

package/dist/KanbanColumn.cjs

@@ -0,0 +1,142 @@
+'use client';
+
+
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_column_sortable_id = require('./utils/column-sortable-id.cjs');
+const require_ColumnFilterButton = require('./ColumnFilterButton.cjs');
+const require_InfiniteScrollSentinel = require('./infinite-scroll/InfiniteScrollSentinel.cjs');
+const require_KanbanColumnCards = require('./KanbanColumnCards.cjs');
+const require_KanbanVirtualColumnCards = require('./KanbanVirtualColumnCards.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 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);
+let __dnd_kit_utilities = require("@dnd-kit/utilities");
+__dnd_kit_utilities = require_rolldown_runtime.__toESM(__dnd_kit_utilities);
+
+//#region src/KanbanColumn.tsx
+function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnClassName, itemClassName, containerProps, hideHeader = false, sortable = false, filters, activeFilterIds, columnOverflow, infiniteScroll, virtualization, dragDisabled = false, activeItemId = null, onToggleFilter, onClearFilters }) {
+	const { className: containerClassName, style: containerStyle,...containerAttributes } = containerProps ?? {};
+	const filterButton = filters && filters.length > 0 && onToggleFilter && onClearFilters ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColumnFilterButton.ColumnFilterButton, {
+		filters,
+		activeFilterIds: activeFilterIds ?? [],
+		onToggle: onToggleFilter,
+		onClear: onClearFilters
+	}) : null;
+	const { setNodeRef: setDroppableRef, isOver } = (0, __dnd_kit_core.useDroppable)({
+		id: column.id,
+		data: {
+			type: "column",
+			column
+		}
+	});
+	const { attributes, listeners, setNodeRef: setSortableRef, transform, transition, isDragging } = (0, __dnd_kit_sortable.useSortable)({
+		id: require_column_sortable_id.toColumnSortableId(column.id),
+		data: {
+			type: "column-sortable",
+			column
+		},
+		disabled: !sortable
+	});
+	const style = sortable ? {
+		transform: __dnd_kit_utilities.CSS.Transform.toString(transform),
+		transition: transition ?? void 0
+	} : {};
+	const itemIds = react.default.useMemo(() => items.map((i) => i.id), [items]);
+	const [scroller, setScroller] = react.default.useState(null);
+	const setScrollerRef = react.default.useCallback((node) => {
+		setDroppableRef(node);
+		setScroller(node);
+	}, [setDroppableRef]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: setSortableRef,
+		style: {
+			...containerStyle,
+			...style
+		},
+		className: (0, __pixpilot_shadcn_ui.cn)("bg-muted/40 relative flex min-w-[250px] flex-1 flex-col rounded-lg border", columnOverflow === "scroll" ? "h-full min-h-0 overflow-hidden" : "min-h-full overflow-visible", isOver && "ring-primary/30 ring-2", isDragging && "opacity-50", columnClassName, containerClassName),
+		...sortable ? attributes : {},
+		...containerAttributes,
+		children: [!hideHeader && (renderColumnHeader ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-1 px-3 pt-3 pb-3",
+			children: [
+				sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "text-muted-foreground hover:text-foreground cursor-grab touch-none active:cursor-grabbing",
+					...listeners,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.GripVertical, { className: "h-4 w-4" })
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex-1",
+					children: renderColumnHeader(column, items.length)
+				}),
+				filterButton
+			]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-between px-3 pt-3 pb-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-1",
+				children: [sortable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "text-muted-foreground hover:text-foreground cursor-grab touch-none active:cursor-grabbing",
+					...listeners,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.GripVertical, { className: "h-4 w-4" })
+				}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: "text-sm font-semibold",
+					children: column.title
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs",
+					children: items.length
+				}), filterButton]
+			})]
+		})), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__dnd_kit_sortable.SortableContext, {
+			items: itemIds,
+			strategy: __dnd_kit_sortable.verticalListSortingStrategy,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: setScrollerRef,
+				"data-testid": `kanban-column-scroller-${column.id}`,
+				className: (0, __pixpilot_shadcn_ui.cn)("relative flex flex-1 flex-col gap-2 px-3 pb-3", columnOverflow === "scroll" ? "min-h-0 overflow-y-auto pr-2" : "min-h-[60px] overflow-visible"),
+				children: [virtualization ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_KanbanVirtualColumnCards.KanbanVirtualColumnCards, {
+					column,
+					items,
+					renderItem,
+					itemClassName,
+					scroller,
+					activeItemId,
+					options: virtualization,
+					dragDisabled
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_KanbanColumnCards.KanbanColumnCards, {
+					column,
+					items,
+					renderItem,
+					itemClassName,
+					dragDisabled
+				}), infiniteScroll ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InfiniteScrollSentinel.InfiniteScrollSentinel, {
+					root: scroller,
+					distance: infiniteScroll.distance,
+					threshold: infiniteScroll.threshold,
+					disabled: infiniteScroll.disabled,
+					hasMore: infiniteScroll.hasMore(column),
+					isLoading: infiniteScroll.isLoading?.(column) ?? false,
+					loadingComponent: infiniteScroll.loadingComponent,
+					endMessage: infiniteScroll.endMessage,
+					onLoadMore: () => infiniteScroll.onLoadMore(column)
+				}) : null]
+			})
+		})]
+	});
+}
+
+//#endregion
+exports.KanbanColumn = KanbanColumn;

package/dist/KanbanColumn.js

@@ -0,0 +1,134 @@
+'use client';
+
+
+import { toColumnSortableId } from "./utils/column-sortable-id.js";
+import { ColumnFilterButton } from "./ColumnFilterButton.js";
+import { InfiniteScrollSentinel } from "./infinite-scroll/InfiniteScrollSentinel.js";
+import { KanbanColumnCards } from "./KanbanColumnCards.js";
+import { KanbanVirtualColumnCards } from "./KanbanVirtualColumnCards.js";
+import { useDroppable } from "@dnd-kit/core";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { cn } from "@pixpilot/shadcn-ui";
+import React from "react";
+import { GripVertical } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CSS } from "@dnd-kit/utilities";
+
+//#region src/KanbanColumn.tsx
+function KanbanColumn({ column, items, renderItem, renderColumnHeader, columnClassName, itemClassName, containerProps, hideHeader = false, sortable = false, filters, activeFilterIds, columnOverflow, infiniteScroll, virtualization, dragDisabled = false, activeItemId = null, onToggleFilter, onClearFilters }) {
+	const { className: containerClassName, style: containerStyle,...containerAttributes } = containerProps ?? {};
+	const filterButton = filters && filters.length > 0 && onToggleFilter && onClearFilters ? /* @__PURE__ */ jsx(ColumnFilterButton, {
+		filters,
+		activeFilterIds: activeFilterIds ?? [],
+		onToggle: onToggleFilter,
+		onClear: onClearFilters
+	}) : null;
+	const { setNodeRef: setDroppableRef, isOver } = useDroppable({
+		id: column.id,
+		data: {
+			type: "column",
+			column
+		}
+	});
+	const { attributes, listeners, setNodeRef: setSortableRef, transform, transition, isDragging } = useSortable({
+		id: toColumnSortableId(column.id),
+		data: {
+			type: "column-sortable",
+			column
+		},
+		disabled: !sortable
+	});
+	const style = sortable ? {
+		transform: CSS.Transform.toString(transform),
+		transition: transition ?? void 0
+	} : {};
+	const itemIds = React.useMemo(() => items.map((i) => i.id), [items]);
+	const [scroller, setScroller] = React.useState(null);
+	const setScrollerRef = React.useCallback((node) => {
+		setDroppableRef(node);
+		setScroller(node);
+	}, [setDroppableRef]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setSortableRef,
+		style: {
+			...containerStyle,
+			...style
+		},
+		className: cn("bg-muted/40 relative flex min-w-[250px] flex-1 flex-col rounded-lg border", columnOverflow === "scroll" ? "h-full min-h-0 overflow-hidden" : "min-h-full overflow-visible", isOver && "ring-primary/30 ring-2", isDragging && "opacity-50", columnClassName, containerClassName),
+		...sortable ? attributes : {},
+		...containerAttributes,
+		children: [!hideHeader && (renderColumnHeader ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1 px-3 pt-3 pb-3",
+			children: [
+				sortable ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "text-muted-foreground hover:text-foreground cursor-grab touch-none active:cursor-grabbing",
+					...listeners,
+					children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					className: "flex-1",
+					children: renderColumnHeader(column, items.length)
+				}),
+				filterButton
+			]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between px-3 pt-3 pb-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [sortable ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "text-muted-foreground hover:text-foreground cursor-grab touch-none active:cursor-grabbing",
+					...listeners,
+					children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+				}) : null, /* @__PURE__ */ jsx("h3", {
+					className: "text-sm font-semibold",
+					children: column.title
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs",
+					children: items.length
+				}), filterButton]
+			})]
+		})), /* @__PURE__ */ jsx(SortableContext, {
+			items: itemIds,
+			strategy: verticalListSortingStrategy,
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: setScrollerRef,
+				"data-testid": `kanban-column-scroller-${column.id}`,
+				className: cn("relative flex flex-1 flex-col gap-2 px-3 pb-3", columnOverflow === "scroll" ? "min-h-0 overflow-y-auto pr-2" : "min-h-[60px] overflow-visible"),
+				children: [virtualization ? /* @__PURE__ */ jsx(KanbanVirtualColumnCards, {
+					column,
+					items,
+					renderItem,
+					itemClassName,
+					scroller,
+					activeItemId,
+					options: virtualization,
+					dragDisabled
+				}) : /* @__PURE__ */ jsx(KanbanColumnCards, {
+					column,
+					items,
+					renderItem,
+					itemClassName,
+					dragDisabled
+				}), infiniteScroll ? /* @__PURE__ */ jsx(InfiniteScrollSentinel, {
+					root: scroller,
+					distance: infiniteScroll.distance,
+					threshold: infiniteScroll.threshold,
+					disabled: infiniteScroll.disabled,
+					hasMore: infiniteScroll.hasMore(column),
+					isLoading: infiniteScroll.isLoading?.(column) ?? false,
+					loadingComponent: infiniteScroll.loadingComponent,
+					endMessage: infiniteScroll.endMessage,
+					onLoadMore: () => infiniteScroll.onLoadMore(column)
+				}) : null]
+			})
+		})]
+	});
+}
+
+//#endregion
+export { KanbanColumn };

package/dist/KanbanColumnCards.cjs

@@ -0,0 +1,25 @@
+'use client';
+
+
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_KanbanItem = require('./KanbanItem.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/KanbanColumnCards.tsx
+/**
+* The card list of a column, rendered in full. Each card is a flex child of
+* the column's scroller, so spacing comes from the scroller's `gap`.
+*/
+function KanbanColumnCards({ column, items, renderItem, itemClassName, dragDisabled = false }) {
+	return items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_KanbanItem.KanbanItem, {
+		item,
+		column,
+		renderItem,
+		className: itemClassName,
+		dragDisabled
+	}, item.id));
+}
+
+//#endregion
+exports.KanbanColumnCards = KanbanColumnCards;

package/dist/KanbanColumnCards.js

@@ -0,0 +1,23 @@
+'use client';
+
+
+import { KanbanItem } from "./KanbanItem.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/KanbanColumnCards.tsx
+/**
+* The card list of a column, rendered in full. Each card is a flex child of
+* the column's scroller, so spacing comes from the scroller's `gap`.
+*/
+function KanbanColumnCards({ column, items, renderItem, itemClassName, dragDisabled = false }) {
+	return items.map((item) => /* @__PURE__ */ jsx(KanbanItem, {
+		item,
+		column,
+		renderItem,
+		className: itemClassName,
+		dragDisabled
+	}, item.id));
+}
+
+//#endregion
+export { KanbanColumnCards };

package/dist/KanbanDragOverlay.cjs

@@ -0,0 +1,42 @@
+'use client';
+
+
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+let __dnd_kit_core = require("@dnd-kit/core");
+__dnd_kit_core = require_rolldown_runtime.__toESM(__dnd_kit_core);
+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/KanbanDragOverlay.tsx
+/** Floating card/column preview that follows the cursor while dragging. */
+function KanbanDragOverlay({ activeItem, activeItemColumn, activeColumn, activeColumnItemCount, renderItem, itemClassName, columnClassName }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__dnd_kit_core.DragOverlay, { children: [activeItem && activeItemColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, __pixpilot_shadcn_ui.cn)("bg-background cursor-grabbing rounded-md border p-3 shadow-lg", itemClassName),
+		children: renderItem ? renderItem(activeItem, activeItemColumn) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-sm",
+			children: activeItem.name
+		})
+	}) : null, activeColumn ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, __pixpilot_shadcn_ui.cn)("bg-muted/40 flex min-w-[250px] flex-col rounded-lg border p-3 opacity-90 shadow-lg", columnClassName),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mb-3 flex items-center justify-between px-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+				className: "text-sm font-semibold",
+				children: activeColumn.title
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs",
+				children: activeColumnItemCount
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "text-muted-foreground flex min-h-[60px] items-center justify-center text-xs",
+			children: "Dragging column…"
+		})]
+	}) : null] });
+}
+
+//#endregion
+exports.KanbanDragOverlay = KanbanDragOverlay;

package/dist/KanbanDragOverlay.js

@@ -0,0 +1,37 @@
+'use client';
+
+
+import { DragOverlay } from "@dnd-kit/core";
+import { cn } from "@pixpilot/shadcn-ui";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/KanbanDragOverlay.tsx
+/** Floating card/column preview that follows the cursor while dragging. */
+function KanbanDragOverlay({ activeItem, activeItemColumn, activeColumn, activeColumnItemCount, renderItem, itemClassName, columnClassName }) {
+	return /* @__PURE__ */ jsxs(DragOverlay, { children: [activeItem && activeItemColumn ? /* @__PURE__ */ jsx("div", {
+		className: cn("bg-background cursor-grabbing rounded-md border p-3 shadow-lg", itemClassName),
+		children: renderItem ? renderItem(activeItem, activeItemColumn) : /* @__PURE__ */ jsx("span", {
+			className: "text-sm",
+			children: activeItem.name
+		})
+	}) : null, activeColumn ? /* @__PURE__ */ jsxs("div", {
+		className: cn("bg-muted/40 flex min-w-[250px] flex-col rounded-lg border p-3 opacity-90 shadow-lg", columnClassName),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-3 flex items-center justify-between px-1",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-semibold",
+				children: activeColumn.title
+			}), /* @__PURE__ */ jsx("span", {
+				className: "bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs",
+				children: activeColumnItemCount
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground flex min-h-[60px] items-center justify-center text-xs",
+			children: "Dragging column…"
+		})]
+	}) : null] });
+}
+
+//#endregion
+export { KanbanDragOverlay };

package/dist/KanbanItem.cjs

@@ -0,0 +1,58 @@
+'use client';
+
+
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+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);
+let __dnd_kit_utilities = require("@dnd-kit/utilities");
+__dnd_kit_utilities = require_rolldown_runtime.__toESM(__dnd_kit_utilities);
+
+//#region src/KanbanItem.tsx
+function KanbanItemContent({ item, column, renderItem }) {
+	return renderItem ? renderItem(item, column) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "text-sm",
+		children: item.name
+	});
+}
+const MemoizedKanbanItemContent = react.default.memo(KanbanItemContent);
+/**
+* A single draggable item inside a Kanban column.
+* Wraps `useSortable` from `@dnd-kit/sortable`.
+*/
+function KanbanItem({ item, column, renderItem, className, dragDisabled = false }) {
+	const sortableData = react.default.useMemo(() => ({
+		type: "item",
+		item
+	}), [item]);
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, __dnd_kit_sortable.useSortable)({
+		id: item.id,
+		data: sortableData,
+		disabled: dragDisabled
+	});
+	const style = {
+		transform: __dnd_kit_utilities.CSS.Transform.toString(transform),
+		transition: transition ?? void 0
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: setNodeRef,
+		"data-testid": `kanban-item-${item.id}`,
+		style,
+		className: (0, __pixpilot_shadcn_ui.cn)("bg-background touch-none rounded-md border p-3 shadow-sm transition-shadow", "hover:shadow-md", dragDisabled ? "cursor-default" : "cursor-grab active:cursor-grabbing", isDragging && "z-50 opacity-50 shadow-lg", className),
+		...attributes,
+		...listeners,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedKanbanItemContent, {
+			item,
+			column,
+			renderItem
+		})
+	});
+}
+
+//#endregion
+exports.KanbanItem = KanbanItem;

package/dist/KanbanItem.js

@@ -0,0 +1,52 @@
+'use client';
+
+
+import { useSortable } from "@dnd-kit/sortable";
+import { cn } from "@pixpilot/shadcn-ui";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { CSS } from "@dnd-kit/utilities";
+
+//#region src/KanbanItem.tsx
+function KanbanItemContent({ item, column, renderItem }) {
+	return renderItem ? renderItem(item, column) : /* @__PURE__ */ jsx("span", {
+		className: "text-sm",
+		children: item.name
+	});
+}
+const MemoizedKanbanItemContent = React.memo(KanbanItemContent);
+/**
+* A single draggable item inside a Kanban column.
+* Wraps `useSortable` from `@dnd-kit/sortable`.
+*/
+function KanbanItem({ item, column, renderItem, className, dragDisabled = false }) {
+	const sortableData = React.useMemo(() => ({
+		type: "item",
+		item
+	}), [item]);
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+		id: item.id,
+		data: sortableData,
+		disabled: dragDisabled
+	});
+	const style = {
+		transform: CSS.Transform.toString(transform),
+		transition: transition ?? void 0
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: setNodeRef,
+		"data-testid": `kanban-item-${item.id}`,
+		style,
+		className: cn("bg-background touch-none rounded-md border p-3 shadow-sm transition-shadow", "hover:shadow-md", dragDisabled ? "cursor-default" : "cursor-grab active:cursor-grabbing", isDragging && "z-50 opacity-50 shadow-lg", className),
+		...attributes,
+		...listeners,
+		children: /* @__PURE__ */ jsx(MemoizedKanbanItemContent, {
+			item,
+			column,
+			renderItem
+		})
+	});
+}
+
+//#endregion
+export { KanbanItem };