@etus/ui 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/chunk-AUCDXPWH.js

@@ -0,0 +1,853 @@
+import { DndContext, DragOverlay, Droppable, SortableItem, DragHandle } from './chunk-BIUVOZQG.js';
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-YP2ATSXP.js';
+import { Button } from './chunk-ONQCNOLU.js';
+import { Badge } from './chunk-TNROOKX3.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { SortableContext, horizontalListSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { Calendar, MessageSquare, Paperclip, Search, Plus, ChevronRight, ChevronDown, GripVertical } from 'lucide-react';
+import { useId, useState, useMemo } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var kanbanBoardVariants = cva(
+  [
+    "flex",
+    "w-full",
+    "min-w-0",
+    "gap-4",
+    "p-4",
+    "bg-muted/30",
+    "rounded-lg",
+    "overflow-x-auto"
+  ],
+  {
+    defaultVariants: {
+      layout: "horizontal",
+      variant: "default"
+    },
+    variants: {
+      layout: {
+        horizontal: "flex-row",
+        vertical: "flex-col"
+      },
+      variant: {
+        collapsed: "",
+        compact: "[&_[data-slot=kanban-card]]:p-2 [&_[data-slot=kanban-column]]:w-60",
+        default: "",
+        swimlanes: "flex-col gap-6"
+      }
+    }
+  }
+);
+var kanbanColumnVariants = cva(
+  [
+    "flex",
+    "flex-col",
+    "gap-2",
+    "rounded-lg",
+    "bg-muted/50",
+    "min-h-52"
+  ],
+  {
+    defaultVariants: {
+      isCollapsed: false,
+      isOver: false
+    },
+    variants: {
+      isCollapsed: {
+        false: "w-72",
+        true: "w-12"
+      },
+      isOver: {
+        false: "",
+        true: "ring-2 ring-primary/50 bg-primary/5"
+      }
+    }
+  }
+);
+var kanbanColumnHeaderVariants = cva(
+  [
+    "flex",
+    "items-center",
+    "justify-between",
+    "gap-2",
+    "p-3",
+    "bg-card",
+    "rounded-t-lg",
+    "border-b"
+  ],
+  {
+    defaultVariants: {
+      wipStatus: "normal"
+    },
+    variants: {
+      wipStatus: {
+        exceeded: "[&_[data-slot=wip-indicator]]:text-destructive",
+        normal: "",
+        warning: "[&_[data-slot=wip-indicator]]:text-warning"
+      }
+    }
+  }
+);
+var kanbanColumnContentVariants = cva(
+  [
+    "flex",
+    "flex-col",
+    "flex-1",
+    "gap-2",
+    "p-2",
+    "min-h-24"
+  ],
+  {
+    defaultVariants: {},
+    variants: {}
+  }
+);
+var kanbanCardVariants = cva(
+  [
+    "group",
+    "flex",
+    "flex-col",
+    "gap-2",
+    "p-3",
+    "bg-card",
+    "rounded-md",
+    "border",
+    "shadow-sm",
+    "cursor-pointer",
+    "transition-all",
+    "duration-200",
+    "hover:shadow-md",
+    "hover:border-primary/30"
+  ],
+  {
+    defaultVariants: {
+      isDragging: false,
+      priority: null
+    },
+    variants: {
+      isDragging: {
+        false: "",
+        true: "opacity-50 ring-2 ring-primary shadow-lg"
+      },
+      priority: {
+        high: "border-l-4 border-l-orange-500",
+        low: "border-l-4 border-l-gray-400",
+        medium: "border-l-4 border-l-yellow-500",
+        null: "",
+        urgent: "border-l-4 border-l-destructive"
+      }
+    }
+  }
+);
+var kanbanCardTitleVariants = cva(
+  [
+    "text-sm",
+    "font-medium",
+    "text-foreground",
+    "line-clamp-2"
+  ],
+  {
+    defaultVariants: {},
+    variants: {}
+  }
+);
+var kanbanCardDescriptionVariants = cva(
+  [
+    "text-xs",
+    "text-muted-foreground",
+    "line-clamp-2"
+  ],
+  {
+    defaultVariants: {},
+    variants: {}
+  }
+);
+var kanbanCardMetaVariants = cva(
+  [
+    "flex",
+    "flex-wrap",
+    "items-center",
+    "gap-2",
+    "text-xs",
+    "text-muted-foreground"
+  ],
+  {
+    defaultVariants: {},
+    variants: {}
+  }
+);
+var kanbanLabelVariants = cva(
+  [
+    "inline-flex",
+    "items-center",
+    "px-1.5",
+    "py-0.5",
+    "rounded-sm",
+    "text-xs",
+    "font-medium"
+  ],
+  {
+    defaultVariants: {},
+    variants: {}
+  }
+);
+var kanbanDropIndicatorVariants = cva(
+  [
+    "h-1",
+    "rounded-full",
+    "bg-primary/20",
+    "border",
+    "border-primary",
+    "transition-opacity"
+  ],
+  {
+    defaultVariants: {
+      isVisible: false
+    },
+    variants: {
+      isVisible: {
+        false: "opacity-0",
+        true: "opacity-100"
+      }
+    }
+  }
+);
+var kanbanAddButtonVariants = cva(
+  [
+    "flex",
+    "items-center",
+    "justify-center",
+    "gap-1",
+    "w-full",
+    "p-2",
+    "text-sm",
+    "text-muted-foreground",
+    "rounded-md",
+    "border",
+    "border-dashed",
+    "hover:bg-muted/50",
+    "hover:text-foreground",
+    "transition-colors"
+  ],
+  {
+    defaultVariants: {},
+    variants: {}
+  }
+);
+var kanbanSwimlaneVariants = cva(
+  [
+    "flex",
+    "flex-col",
+    "gap-2",
+    "p-3",
+    "rounded-lg",
+    "bg-muted/20"
+  ],
+  {
+    defaultVariants: {},
+    variants: {}
+  }
+);
+var kanbanSearchVariants = cva(
+  [
+    "flex",
+    "items-center",
+    "gap-2",
+    "px-3",
+    "py-2",
+    "bg-background",
+    "border",
+    "rounded-md",
+    "focus-within:ring-2",
+    "focus-within:ring-primary/50"
+  ],
+  {
+    defaultVariants: {},
+    variants: {}
+  }
+);
+function getInitials(name) {
+  return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
+}
+function formatDueDate(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diff = date.getTime() - now.getTime();
+  const days = Math.ceil(diff / (1e3 * 60 * 60 * 24));
+  if (days < 0) return "Overdue";
+  if (days === 0) return "Today";
+  if (days === 1) return "Tomorrow";
+  if (days <= 7) return `${String(days)} days`;
+  return date.toLocaleDateString();
+}
+function getWipStatus(itemCount, wipLimit) {
+  if (!wipLimit) return "normal";
+  if (itemCount >= wipLimit) return "exceeded";
+  if (itemCount >= wipLimit - 1) return "warning";
+  return "normal";
+}
+function KanbanCard({
+  className,
+  isDragging = false,
+  item,
+  onClick,
+  onDelete: _onDelete
+}) {
+  const cardId = useId();
+  const hasMeta = Boolean(
+    item.assignees?.length ?? item.labels?.length ?? item.dueDate ?? item.comments ?? item.attachments ?? item.subtasks
+  );
+  const handleClick = () => {
+    onClick?.({ item });
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-describedby": item.description ? `${cardId}-desc` : void 0,
+      "aria-label": item.title,
+      className: cn(kanbanCardVariants({ isDragging, priority: item.priority ?? null }), className),
+      "data-slot": "kanban-card",
+      role: "listitem",
+      tabIndex: 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        item.labels && item.labels.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", "data-slot": "kanban-card-labels", children: [
+          item.labels.slice(0, 3).map((label) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: kanbanLabelVariants(),
+              style: { backgroundColor: `${label.color}20`, color: label.color },
+              children: label.name
+            },
+            label.id
+          )),
+          item.labels.length > 3 ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            "+",
+            item.labels.length - 3
+          ] }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: kanbanCardTitleVariants(), "data-slot": "kanban-card-title", children: item.title }),
+        item.description ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: kanbanCardDescriptionVariants(),
+            "data-slot": "kanban-card-description",
+            id: `${cardId}-desc`,
+            children: item.description
+          }
+        ) : null,
+        hasMeta ? /* @__PURE__ */ jsxs("div", { className: kanbanCardMetaVariants(), "data-slot": "kanban-card-meta", children: [
+          item.dueDate ? /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                "flex items-center gap-1",
+                new Date(item.dueDate) < /* @__PURE__ */ new Date() && "text-destructive"
+              ),
+              title: `Due: ${item.dueDate.toLocaleDateString()}`,
+              children: [
+                /* @__PURE__ */ jsx(Calendar, { className: "h-3 w-3" }),
+                formatDueDate(new Date(item.dueDate))
+              ]
+            }
+          ) : null,
+          item.subtasks ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", title: "Subtasks progress", children: [
+            item.subtasks.completed,
+            "/",
+            item.subtasks.total
+          ] }) : null,
+          item.comments ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", title: `${String(item.comments)} comments`, children: [
+            /* @__PURE__ */ jsx(MessageSquare, { className: "h-3 w-3" }),
+            item.comments
+          ] }) : null,
+          item.attachments ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", title: `${String(item.attachments)} attachments`, children: [
+            /* @__PURE__ */ jsx(Paperclip, { className: "h-3 w-3" }),
+            item.attachments
+          ] }) : null,
+          /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+          item.assignees && item.assignees.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex -space-x-1", "data-slot": "kanban-card-assignees", children: [
+            item.assignees.slice(0, 3).map((user) => /* @__PURE__ */ jsxs(
+              Avatar,
+              {
+                className: "h-5 w-5 border-2 border-background",
+                title: user.name,
+                children: [
+                  user.avatar ? /* @__PURE__ */ jsx(AvatarImage, { alt: user.name, src: user.avatar }) : null,
+                  /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getInitials(user.name) })
+                ]
+              },
+              user.id
+            )),
+            item.assignees.length > 3 ? /* @__PURE__ */ jsxs("span", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-muted text-xs border-2 border-background", children: [
+              "+",
+              item.assignees.length - 3
+            ] }) : null
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+function KanbanColumn({
+  allowAddItem = true,
+  className,
+  column,
+  isOver = false,
+  items,
+  onItemAdd,
+  onItemClick,
+  onItemDelete,
+  onToggleCollapse,
+  showColumnCount = true,
+  showWipLimits = true
+}) {
+  const columnId = useId();
+  const wipStatus = getWipStatus(items.length, column.wipLimit);
+  const isCollapsed = column.isCollapsed ?? false;
+  const handleAddItem = () => {
+    onItemAdd?.({ columnId: column.id });
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      const target = event.currentTarget;
+      const cards = [...target.querySelectorAll('[data-slot="kanban-card"]')];
+      const focused = document.activeElement;
+      const currentIndex = cards.indexOf(focused);
+      if (currentIndex === -1) {
+        cards[0]?.focus();
+        return;
+      }
+      const nextIndex = event.key === "ArrowDown" ? Math.min(currentIndex + 1, cards.length - 1) : Math.max(currentIndex - 1, 0);
+      const nextElement = cards[nextIndex];
+      nextElement?.focus();
+      event.preventDefault();
+    }
+  };
+  if (isCollapsed) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-collapsed": true,
+        className: cn(kanbanColumnVariants({ isCollapsed: true, isOver: false }), className),
+        "data-slot": "kanban-column",
+        children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "aria-expanded": false,
+            "aria-label": `Expand ${column.title}`,
+            className: "h-full w-full flex flex-col items-center justify-start pt-3 gap-2",
+            variant: "ghost",
+            onClick: onToggleCollapse,
+            children: [
+              /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "text-sm font-semibold writing-mode-vertical",
+                  style: { writingMode: "vertical-rl" },
+                  children: column.title
+                }
+              ),
+              showColumnCount ? /* @__PURE__ */ jsx(Badge, { className: "mt-2", color: "muted", type: "pill-color", children: items.length }) : null
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Droppable, { data: { type: "column", column }, id: column.id, children: ({ isOver: droppableIsOver }) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        kanbanColumnVariants({ isCollapsed: false, isOver: isOver || droppableIsOver }),
+        className
+      ),
+      "aria-label": `${column.title} column`,
+      "data-slot": "kanban-column",
+      role: "list",
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: kanbanColumnHeaderVariants({ wipStatus }),
+            "data-slot": "kanban-column-header",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                column.color ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "h-3 w-3 rounded-full",
+                    style: { backgroundColor: column.color }
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: column.title }),
+                showColumnCount ? /* @__PURE__ */ jsx(Badge, { color: "muted", "data-slot": "column-count", type: "pill-color", children: items.length }) : null,
+                showWipLimits && column.wipLimit ? /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "text-xs",
+                    "data-slot": "wip-indicator",
+                    title: `WIP Limit: ${String(column.wipLimit)}`,
+                    children: [
+                      "/",
+                      column.wipLimit
+                    ]
+                  }
+                ) : null
+              ] }),
+              onToggleCollapse ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "aria-expanded": true,
+                  "aria-label": `Collapse ${column.title}`,
+                  className: "h-6 w-6 p-0",
+                  size: "sm",
+                  variant: "ghost",
+                  onClick: onToggleCollapse,
+                  children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SortableContext,
+          {
+            items: items.map((i) => i.id),
+            strategy: verticalListSortingStrategy,
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "aria-labelledby": columnId,
+                className: kanbanColumnContentVariants(),
+                "data-slot": "kanban-column-content",
+                children: [
+                  items.map((item) => /* @__PURE__ */ jsx(
+                    SortableItem,
+                    {
+                      data: { type: "item", item, columnId: column.id },
+                      id: item.id,
+                      children: ({ isDragging }) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                        /* @__PURE__ */ jsx(
+                          DragHandle,
+                          {
+                            "aria-label": `Drag ${item.title}`,
+                            className: "absolute left-1 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing h-6 w-6 flex items-center justify-center",
+                            children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4 text-muted-foreground" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          KanbanCard,
+                          {
+                            isDragging,
+                            item,
+                            onClick: onItemClick,
+                            onDelete: onItemDelete
+                          }
+                        )
+                      ] })
+                    },
+                    item.id
+                  )),
+                  allowAddItem ? /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      "aria-label": `Add item to ${column.title}`,
+                      className: kanbanAddButtonVariants(),
+                      type: "button",
+                      onClick: handleAddItem,
+                      children: [
+                        /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+                        "Add card"
+                      ]
+                    }
+                  ) : null
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+function KanbanBoard({
+  allowAddColumn = false,
+  allowAddItem = true,
+  allowColumnReorder = false,
+  className,
+  columns,
+  columnWidth = 288,
+  filterBy,
+  groupBy,
+  items,
+  onColumnAdd,
+  onColumnDelete: _onColumnDelete,
+  onColumnReorder: _onColumnReorder,
+  onColumnUpdate: _onColumnUpdate,
+  onItemAdd,
+  onItemClick,
+  onItemDelete,
+  onItemMove,
+  onItemUpdate: _onItemUpdate,
+  searchable = false,
+  showColumnCount = true,
+  showWipLimits = true,
+  variant = "default",
+  layout = "horizontal",
+  ...props
+}) {
+  useId();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [activeId, setActiveId] = useState(null);
+  const [collapsedColumns, setCollapsedColumns] = useState(() => /* @__PURE__ */ new Set());
+  const filteredItems = useMemo(() => {
+    let result = [...items];
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(
+        (item) => item.title.toLowerCase().includes(query) || item.description?.toLowerCase().includes(query)
+      );
+    }
+    if (filterBy) {
+      if (filterBy.priority?.length) {
+        result = result.filter(
+          (item) => item.priority && filterBy.priority?.includes(item.priority)
+        );
+      }
+      if (filterBy.assignees?.length) {
+        result = result.filter(
+          (item) => item.assignees?.some((a) => filterBy.assignees?.includes(a.id))
+        );
+      }
+      if (filterBy.labels?.length) {
+        result = result.filter(
+          (item) => item.labels?.some((l) => filterBy.labels?.includes(l.id))
+        );
+      }
+      if (filterBy.dueDate) {
+        result = result.filter((item) => {
+          if (!item.dueDate) return false;
+          const date = new Date(item.dueDate);
+          if (filterBy.dueDate?.from && date < filterBy.dueDate.from) return false;
+          if (filterBy.dueDate?.to && date > filterBy.dueDate.to) return false;
+          return true;
+        });
+      }
+    }
+    return result;
+  }, [items, searchQuery, filterBy]);
+  const getColumnItems = (columnId) => {
+    return filteredItems.filter((item) => item.columnId === columnId).sort((a, b) => a.order - b.order);
+  };
+  const activeItem = useMemo(() => {
+    if (!activeId) return null;
+    return items.find((item) => item.id === activeId) ?? null;
+  }, [activeId, items]);
+  const handleToggleCollapse = (columnId) => {
+    setCollapsedColumns((prev) => {
+      const next = new Set(prev);
+      if (next.has(columnId)) {
+        next.delete(columnId);
+      } else {
+        next.add(columnId);
+      }
+      return next;
+    });
+  };
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+  const handleDragOver = (_event) => {
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    setActiveId(null);
+    if (!over) return;
+    const activeData = active.data.current;
+    const overData = over.data.current;
+    if (activeData?.type !== "item") return;
+    const activeItem2 = activeData.item;
+    if (!activeItem2) return;
+    let toColumn;
+    let index = 0;
+    if (overData?.type === "column") {
+      toColumn = overData.column?.id ?? "";
+      index = getColumnItems(toColumn).length;
+    } else if (overData?.type === "item") {
+      toColumn = overData.item?.columnId ?? "";
+      const targetItems = getColumnItems(toColumn);
+      const overItem = overData.item;
+      index = overItem ? targetItems.findIndex((i) => i.id === overItem.id) : 0;
+    } else {
+      return;
+    }
+    if (activeItem2.columnId !== toColumn || active.id !== over.id) {
+      onItemMove?.({
+        fromColumn: activeItem2.columnId,
+        index,
+        itemId: activeItem2.id,
+        toColumn
+      });
+    }
+  };
+  const handleDragCancel = () => {
+    setActiveId(null);
+  };
+  const columnsWithState = columns.map((col) => ({
+    ...col,
+    isCollapsed: collapsedColumns.has(col.id) || col.isCollapsed
+  }));
+  const swimlanes = useMemo(() => {
+    if (!groupBy || variant !== "swimlanes") return null;
+    const groups = /* @__PURE__ */ new Map();
+    for (const item of filteredItems) {
+      const key = item.customFields?.[groupBy] ?? "Ungrouped";
+      const group = groups.get(key) ?? [];
+      group.push(item);
+      groups.set(key, group);
+    }
+    return groups;
+  }, [filteredItems, groupBy, variant]);
+  const widthValue = typeof columnWidth === "number" ? `${String(columnWidth)}px` : columnWidth;
+  const columnStyle = {
+    minWidth: widthValue,
+    width: widthValue
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Kanban board",
+      className: "flex flex-col gap-4",
+      "data-slot": "kanban-board-wrapper",
+      role: "region",
+      ...props,
+      children: [
+        searchable ? /* @__PURE__ */ jsxs("div", { className: kanbanSearchVariants(), "data-slot": "kanban-search", children: [
+          /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              "aria-label": "Search items",
+              className: "flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+              placeholder: "Search items...",
+              type: "text",
+              value: searchQuery,
+              onChange: (e) => {
+                setSearchQuery(e.target.value);
+              }
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsxs(
+          DndContext,
+          {
+            className: cn(kanbanBoardVariants({ layout, variant }), className),
+            onDragCancel: handleDragCancel,
+            onDragEnd: handleDragEnd,
+            onDragOver: handleDragOver,
+            onDragStart: handleDragStart,
+            children: [
+              variant === "swimlanes" && swimlanes ? (
+                // Swimlanes layout
+                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", "data-slot": "kanban-swimlanes", children: [...swimlanes.entries()].map(([lane, _laneItems]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-muted-foreground", children: lane }),
+                  /* @__PURE__ */ jsx("div", { className: "flex gap-4 overflow-x-auto", children: /* @__PURE__ */ jsx(
+                    SortableContext,
+                    {
+                      disabled: !allowColumnReorder,
+                      items: columnsWithState.map((c) => c.id),
+                      strategy: horizontalListSortingStrategy,
+                      children: columnsWithState.map((column) => /* @__PURE__ */ jsx("div", { style: columnStyle, children: /* @__PURE__ */ jsx(
+                        KanbanColumn,
+                        {
+                          items: getColumnItems(column.id).filter(
+                            (item) => (item.customFields?.[groupBy ?? ""] ?? "Ungrouped") === lane
+                          ),
+                          allowAddItem,
+                          column,
+                          showColumnCount,
+                          showWipLimits,
+                          onItemAdd,
+                          onItemClick,
+                          onItemDelete,
+                          onToggleCollapse: () => {
+                            handleToggleCollapse(column.id);
+                          }
+                        }
+                      ) }, column.id))
+                    }
+                  ) })
+                ] }, lane)) })
+              ) : (
+                // Standard layout
+                /* @__PURE__ */ jsxs(
+                  SortableContext,
+                  {
+                    disabled: !allowColumnReorder,
+                    items: columnsWithState.map((c) => c.id),
+                    strategy: horizontalListSortingStrategy,
+                    children: [
+                      columnsWithState.map((column) => /* @__PURE__ */ jsx("div", { style: column.isCollapsed ? void 0 : columnStyle, children: /* @__PURE__ */ jsx(
+                        KanbanColumn,
+                        {
+                          allowAddItem,
+                          column,
+                          items: getColumnItems(column.id),
+                          showColumnCount,
+                          showWipLimits,
+                          onItemAdd,
+                          onItemClick,
+                          onItemDelete,
+                          onToggleCollapse: () => {
+                            handleToggleCollapse(column.id);
+                          }
+                        }
+                      ) }, column.id)),
+                      allowAddColumn ? /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          className: cn(
+                            kanbanAddButtonVariants(),
+                            "min-w-52 h-52 flex-col"
+                          ),
+                          "aria-label": "Add column",
+                          type: "button",
+                          onClick: onColumnAdd,
+                          children: [
+                            /* @__PURE__ */ jsx(Plus, { className: "h-6 w-6" }),
+                            "Add column"
+                          ]
+                        }
+                      ) : null
+                    ]
+                  }
+                )
+              ),
+              /* @__PURE__ */ jsx(DragOverlay, { children: activeItem ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "opacity-90 rotate-3",
+                  style: columnStyle,
+                  children: /* @__PURE__ */ jsx(KanbanCard, { isDragging: true, item: activeItem })
+                }
+              ) : null })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { KanbanBoard, KanbanCard, kanbanAddButtonVariants, kanbanBoardVariants, kanbanCardDescriptionVariants, kanbanCardMetaVariants, kanbanCardTitleVariants, kanbanCardVariants, kanbanColumnContentVariants, kanbanColumnHeaderVariants, kanbanColumnVariants, kanbanDropIndicatorVariants, kanbanLabelVariants, kanbanSearchVariants, kanbanSwimlaneVariants };
+//# sourceMappingURL=chunk-AUCDXPWH.js.map
+//# sourceMappingURL=chunk-AUCDXPWH.js.map