@comitor/ui 2.0.0 → 2.1.0

package/dist/components/ui/kanban.js

@@ -0,0 +1,787 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  closestCenter,
+  closestCorners,
+  DndContext,
+  DragOverlay,
+  defaultDropAnimationSideEffects,
+  getFirstCollision,
+  KeyboardCode,
+  KeyboardSensor,
+  MeasuringStrategy,
+  MouseSensor,
+  pointerWithin,
+  rectIntersection,
+  TouchSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  defaultAnimateLayoutChanges,
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS, isKeyboardEvent } from "@dnd-kit/utilities";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { cn } from "../../lib/cn.js";
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { DEFAULT_KANBAN_LABELS } from "./kanban-constants.js";
+const directions = /* @__PURE__ */ new Set([KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left]);
+function getIsDirectionCode(code) {
+  return directions.has(code);
+}
+const coordinateGetter = (event, { context }) => {
+  const { active, droppableRects, droppableContainers, collisionRect } = context;
+  if (getIsDirectionCode(event.code)) {
+    event.preventDefault();
+    if (!active || !collisionRect) return;
+    const filteredContainers = [];
+    for (const entry of droppableContainers.getEnabled()) {
+      if (!entry || entry?.disabled) continue;
+      const rect = droppableRects.get(entry.id);
+      if (!rect) continue;
+      const data = entry.data.current;
+      if (data) {
+        const { type, children } = data;
+        if (type === "container" && children?.length > 0) {
+          if (active.data.current?.type !== "container") {
+            continue;
+          }
+        }
+      }
+      switch (event.code) {
+        case KeyboardCode.Down:
+          if (collisionRect.top < rect.top) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case KeyboardCode.Up:
+          if (collisionRect.top > rect.top) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case KeyboardCode.Left:
+          if (collisionRect.left >= rect.left + rect.width) {
+            filteredContainers.push(entry);
+          }
+          break;
+        case KeyboardCode.Right:
+          if (collisionRect.left + collisionRect.width <= rect.left) {
+            filteredContainers.push(entry);
+          }
+          break;
+      }
+    }
+    const collisions = closestCorners({
+      active,
+      collisionRect,
+      droppableRects,
+      droppableContainers: filteredContainers,
+      pointerCoordinates: null
+    });
+    const closestId = getFirstCollision(collisions, "id");
+    if (closestId != null) {
+      const newDroppable = droppableContainers.get(closestId);
+      const newNode = newDroppable?.node.current;
+      const newRect = newDroppable?.rect.current;
+      if (newNode && newRect) {
+        if (newDroppable.id === "placeholder") {
+          return {
+            x: newRect.left + (newRect.width - collisionRect.width) / 2,
+            y: newRect.top + (newRect.height - collisionRect.height) / 2
+          };
+        }
+        if (newDroppable.data.current?.type === "container") {
+          return {
+            x: newRect.left + 20,
+            y: newRect.top + 74
+          };
+        }
+        return {
+          x: newRect.left,
+          y: newRect.top
+        };
+      }
+    }
+  }
+  return void 0;
+};
+function isDragPrevented(event) {
+  return event.activatorEvent.defaultPrevented && !isKeyboardEvent(event.activatorEvent);
+}
+const ROOT_NAME = "Kanban";
+const BOARD_NAME = "KanbanBoard";
+const COLUMN_NAME = "KanbanColumn";
+const COLUMN_HANDLE_NAME = "KanbanColumnHandle";
+const ITEM_NAME = "KanbanItem";
+const ITEM_HANDLE_NAME = "KanbanItemHandle";
+const OVERLAY_NAME = "KanbanOverlay";
+const KanbanContext = React.createContext(null);
+function useKanbanContext(consumerName) {
+  const context = React.useContext(KanbanContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function Kanban(props) {
+  const {
+    value,
+    onValueChange,
+    modifiers,
+    strategy = verticalListSortingStrategy,
+    orientation = "horizontal",
+    onMove,
+    getItemValue: getItemValueProp,
+    accessibility,
+    flatCursor = false,
+    labels: labelsProp,
+    ...kanbanProps
+  } = props;
+  const id = React.useId();
+  const [activeId, setActiveId] = React.useState(null);
+  const lastOverIdRef = React.useRef(null);
+  const hasMovedRef = React.useRef(false);
+  const valueAtDragStartRef = React.useRef(null);
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter
+    })
+  );
+  const labels = React.useMemo(() => ({ ...DEFAULT_KANBAN_LABELS, ...labelsProp }), [labelsProp]);
+  const getItemValue = React.useCallback(
+    (item) => {
+      if (typeof item === "object" && !getItemValueProp) {
+        throw new Error("`getItemValue` l\xE0 b\u1EAFt bu\u1ED9c khi th\u1EBB l\xE0 object");
+      }
+      return getItemValueProp ? getItemValueProp(item) : item;
+    },
+    [getItemValueProp]
+  );
+  const getColumn = React.useCallback(
+    (targetId) => {
+      if (targetId in value) return targetId;
+      for (const [columnId, columnItems] of Object.entries(value)) {
+        if (columnItems.some((item) => getItemValue(item) === targetId)) {
+          return columnId;
+        }
+      }
+      return null;
+    },
+    [value, getItemValue]
+  );
+  const collisionDetection = React.useCallback(
+    (args) => {
+      if (activeId && activeId in value) {
+        return closestCenter({
+          ...args,
+          droppableContainers: args.droppableContainers.filter((container) => container.id in value)
+        });
+      }
+      const pointerIntersections = pointerWithin(args);
+      const intersections = pointerIntersections.length > 0 ? pointerIntersections : rectIntersection(args);
+      let overId = getFirstCollision(intersections, "id");
+      if (!overId) {
+        if (hasMovedRef.current) {
+          lastOverIdRef.current = activeId;
+        }
+        return lastOverIdRef.current ? [{ id: lastOverIdRef.current }] : [];
+      }
+      if (overId in value) {
+        const containerItems = value[overId];
+        if (containerItems && containerItems.length > 0) {
+          const closestItem = closestCenter({
+            ...args,
+            droppableContainers: args.droppableContainers.filter(
+              (container) => container.id !== overId && containerItems.some((item) => getItemValue(item) === container.id)
+            )
+          });
+          if (closestItem.length > 0) {
+            overId = closestItem[0]?.id ?? overId;
+          }
+        }
+      }
+      lastOverIdRef.current = overId;
+      return [{ id: overId }];
+    },
+    [activeId, value, getItemValue]
+  );
+  const onDragStart = React.useCallback(
+    (event) => {
+      kanbanProps.onDragStart?.(event);
+      if (isDragPrevented(event)) return;
+      setActiveId(event.active.id);
+      valueAtDragStartRef.current = value;
+    },
+    [value, kanbanProps.onDragStart]
+  );
+  const onDragOver = React.useCallback(
+    (event) => {
+      kanbanProps.onDragOver?.(event);
+      if (isDragPrevented(event)) return;
+      const { active, over } = event;
+      if (!over) return;
+      const activeColumn = getColumn(active.id);
+      const overColumn = getColumn(over.id);
+      if (!activeColumn || !overColumn) return;
+      if (activeColumn === overColumn) {
+        const items = value[activeColumn];
+        if (!items) return;
+        const activeIndex = items.findIndex((item) => getItemValue(item) === active.id);
+        const overIndex = items.findIndex((item) => getItemValue(item) === over.id);
+        if (activeIndex !== overIndex) {
+          const newColumns = { ...value };
+          newColumns[activeColumn] = arrayMove(items, activeIndex, overIndex);
+          onValueChange?.(newColumns);
+        }
+      } else {
+        const activeItems = value[activeColumn];
+        const overItems = value[overColumn];
+        if (!activeItems || !overItems) return;
+        const activeIndex = activeItems.findIndex((item) => getItemValue(item) === active.id);
+        if (activeIndex === -1) return;
+        const activeItem = activeItems[activeIndex];
+        if (!activeItem) return;
+        const updatedItems = {
+          ...value,
+          [activeColumn]: activeItems.filter((item) => getItemValue(item) !== active.id),
+          [overColumn]: [...overItems, activeItem]
+        };
+        onValueChange?.(updatedItems);
+        hasMovedRef.current = true;
+      }
+    },
+    [value, getColumn, getItemValue, onValueChange, kanbanProps.onDragOver]
+  );
+  const onDragEnd = React.useCallback(
+    (event) => {
+      kanbanProps.onDragEnd?.(event);
+      if (isDragPrevented(event)) return;
+      valueAtDragStartRef.current = null;
+      const { active, over } = event;
+      if (!over) {
+        setActiveId(null);
+        return;
+      }
+      if (active.id in value && over.id in value) {
+        const activeIndex = Object.keys(value).indexOf(active.id);
+        const overIndex = Object.keys(value).indexOf(over.id);
+        if (activeIndex !== overIndex) {
+          const orderedColumns = Object.keys(value);
+          const newOrder = arrayMove(orderedColumns, activeIndex, overIndex);
+          const newColumns = {};
+          for (const key of newOrder) {
+            const items = value[key];
+            if (items) {
+              newColumns[key] = items;
+            }
+          }
+          if (onMove) {
+            onMove({ ...event, activeIndex, overIndex });
+          } else {
+            onValueChange?.(newColumns);
+          }
+        }
+      } else {
+        const activeColumn = getColumn(active.id);
+        const overColumn = getColumn(over.id);
+        if (!activeColumn || !overColumn) {
+          setActiveId(null);
+          return;
+        }
+        if (activeColumn === overColumn) {
+          const items = value[activeColumn];
+          if (!items) {
+            setActiveId(null);
+            return;
+          }
+          const activeIndex = items.findIndex((item) => getItemValue(item) === active.id);
+          const overIndex = items.findIndex((item) => getItemValue(item) === over.id);
+          if (activeIndex !== overIndex) {
+            const newColumns = { ...value };
+            newColumns[activeColumn] = arrayMove(items, activeIndex, overIndex);
+            if (onMove) {
+              onMove({
+                ...event,
+                activeIndex,
+                overIndex
+              });
+            } else {
+              onValueChange?.(newColumns);
+            }
+          }
+        }
+      }
+      setActiveId(null);
+      hasMovedRef.current = false;
+    },
+    [value, getColumn, getItemValue, onValueChange, onMove, kanbanProps.onDragEnd]
+  );
+  const onDragCancel = React.useCallback(
+    (event) => {
+      kanbanProps.onDragCancel?.(event);
+      if (isDragPrevented(event)) return;
+      const valueAtDragStart = valueAtDragStartRef.current;
+      valueAtDragStartRef.current = null;
+      if (valueAtDragStart && valueAtDragStart !== value) {
+        onValueChange?.(valueAtDragStart);
+      }
+      setActiveId(null);
+      hasMovedRef.current = false;
+    },
+    [value, onValueChange, kanbanProps.onDragCancel]
+  );
+  const announcements = React.useMemo(
+    () => ({
+      onDragStart({ active }) {
+        const isColumn = active.id in value;
+        const variant = isColumn ? "column" : "item";
+        const position = isColumn ? Object.keys(value).indexOf(active.id) + 1 : (() => {
+          const column = getColumn(active.id);
+          if (!column || !value[column]) return 1;
+          return value[column].findIndex((item) => getItemValue(item) === active.id) + 1;
+        })();
+        const total = isColumn ? Object.keys(value).length : (() => {
+          const column = getColumn(active.id);
+          return column ? value[column]?.length ?? 0 : 0;
+        })();
+        return labels.pickedUp({ variant, value: active.id, position, total });
+      },
+      onDragOver({ active, over }) {
+        if (!over) return;
+        const isColumn = active.id in value;
+        const variant = isColumn ? "column" : "item";
+        const position = isColumn ? Object.keys(value).indexOf(over.id) + 1 : (() => {
+          const column = getColumn(over.id);
+          if (!column || !value[column]) return 1;
+          return value[column].findIndex((item) => getItemValue(item) === over.id) + 1;
+        })();
+        const total = isColumn ? Object.keys(value).length : (() => {
+          const column = getColumn(over.id);
+          return column ? value[column]?.length ?? 0 : 0;
+        })();
+        const overColumn = getColumn(over.id);
+        const activeColumn = getColumn(active.id);
+        if (isColumn) {
+          return labels.moved({ variant, value: active.id, position, total });
+        }
+        if (activeColumn !== overColumn) {
+          return labels.moved({ variant, value: active.id, position, total, column: overColumn ?? void 0 });
+        }
+        return labels.moved({ variant, value: active.id, position, total });
+      },
+      onDragEnd({ active, over }) {
+        if (!over) return;
+        const isColumn = active.id in value;
+        const variant = isColumn ? "column" : "item";
+        const position = isColumn ? Object.keys(value).indexOf(over.id) + 1 : (() => {
+          const column = getColumn(over.id);
+          if (!column || !value[column]) return 1;
+          return value[column].findIndex((item) => getItemValue(item) === over.id) + 1;
+        })();
+        const total = isColumn ? Object.keys(value).length : (() => {
+          const column = getColumn(over.id);
+          return column ? value[column]?.length ?? 0 : 0;
+        })();
+        const overColumn = getColumn(over.id);
+        const activeColumn = getColumn(active.id);
+        if (isColumn) {
+          return labels.dropped({ variant, value: active.id, position, total });
+        }
+        if (activeColumn !== overColumn) {
+          return labels.dropped({ variant, value: active.id, position, total, column: overColumn ?? void 0 });
+        }
+        return labels.dropped({ variant, value: active.id, position, total });
+      },
+      onDragCancel({ active }) {
+        const isColumn = active.id in value;
+        return labels.cancelled({ variant: isColumn ? "column" : "item", value: active.id });
+      }
+    }),
+    [value, getColumn, getItemValue, labels]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      id,
+      items: value,
+      modifiers,
+      strategy,
+      orientation,
+      activeId,
+      setActiveId,
+      getItemValue,
+      flatCursor,
+      labels
+    }),
+    [id, value, activeId, modifiers, strategy, orientation, getItemValue, flatCursor, labels]
+  );
+  return /* @__PURE__ */ jsx(KanbanContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    DndContext,
+    {
+      collisionDetection,
+      modifiers,
+      sensors,
+      ...kanbanProps,
+      id,
+      measuring: {
+        droppable: {
+          strategy: MeasuringStrategy.Always
+        }
+      },
+      onDragStart,
+      onDragOver,
+      onDragEnd,
+      onDragCancel,
+      accessibility: {
+        announcements,
+        screenReaderInstructions: {
+          draggable: labels.instructions
+        },
+        ...accessibility
+      }
+    }
+  ) });
+}
+const KanbanBoardContext = React.createContext(false);
+function KanbanBoard(props) {
+  const { asChild, className, ref, ...boardProps } = props;
+  const context = useKanbanContext(BOARD_NAME);
+  const columns = React.useMemo(() => {
+    return Object.keys(context.items);
+  }, [context.items]);
+  const BoardPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(KanbanBoardContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+    SortableContext,
+    {
+      items: columns,
+      strategy: context.orientation === "horizontal" ? horizontalListSortingStrategy : verticalListSortingStrategy,
+      children: /* @__PURE__ */ jsx(
+        BoardPrimitive,
+        {
+          "aria-orientation": context.orientation,
+          "data-orientation": context.orientation,
+          "data-slot": "kanban-board",
+          ...boardProps,
+          ref,
+          className: cn(
+            "flex size-full gap-4",
+            context.orientation === "horizontal" ? "flex-row" : "flex-col",
+            className
+          )
+        }
+      )
+    }
+  ) });
+}
+const KanbanColumnContext = React.createContext(null);
+function useKanbanColumnContext(consumerName) {
+  const context = React.useContext(KanbanColumnContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${COLUMN_NAME}\``);
+  }
+  return context;
+}
+const animateLayoutChanges = (args) => defaultAnimateLayoutChanges({ ...args, wasDragging: true });
+function KanbanColumn(props) {
+  const { value, asChild, asHandle, disabled, className, style, ref, ...columnProps } = props;
+  const id = React.useId();
+  const context = useKanbanContext(COLUMN_NAME);
+  const inBoard = React.useContext(KanbanBoardContext);
+  const inOverlay = React.useContext(KanbanOverlayContext);
+  if (!inBoard && !inOverlay) {
+    throw new Error(`\`${COLUMN_NAME}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${BOARD_NAME}\` ho\u1EB7c \`${OVERLAY_NAME}\``);
+  }
+  if (value === "") {
+    throw new Error(`\`value\` c\u1EE7a \`${COLUMN_NAME}\` kh\xF4ng \u0111\u01B0\u1EE3c l\xE0 chu\u1ED7i r\u1ED7ng`);
+  }
+  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+    id: value,
+    disabled,
+    animateLayoutChanges,
+    // ⚠ Khác thượng nguồn: dnd-kit mặc định đọc vai trò là "sortable" (tiếng Anh).
+    attributes: { roleDescription: context.labels.columnRoleDescription }
+  });
+  const onNodeRefChange = React.useCallback(
+    (node) => {
+      if (disabled) return;
+      setNodeRef(node);
+    },
+    [disabled, setNodeRef]
+  );
+  const composedRef = useComposedRefs(ref, onNodeRefChange);
+  const composedStyle = React.useMemo(() => {
+    return {
+      transform: CSS.Transform.toString(transform),
+      transition,
+      ...style
+    };
+  }, [transform, transition, style]);
+  const items = React.useMemo(() => {
+    const columnItems = context.items[value] ?? [];
+    return columnItems.map((item) => context.getItemValue(item));
+  }, [context.items, value, context.getItemValue]);
+  const columnContext = React.useMemo(
+    () => ({
+      id,
+      attributes,
+      listeners,
+      setActivatorNodeRef,
+      isDragging,
+      disabled
+    }),
+    [id, attributes, listeners, setActivatorNodeRef, isDragging, disabled]
+  );
+  const ColumnPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(KanbanColumnContext.Provider, { value: columnContext, children: /* @__PURE__ */ jsx(
+    SortableContext,
+    {
+      items,
+      strategy: context.orientation === "horizontal" ? horizontalListSortingStrategy : verticalListSortingStrategy,
+      children: /* @__PURE__ */ jsx(
+        ColumnPrimitive,
+        {
+          id,
+          "data-disabled": disabled ? "" : void 0,
+          "data-dragging": isDragging ? "" : void 0,
+          "data-slot": "kanban-column",
+          ...columnProps,
+          ...asHandle && !disabled ? attributes : {},
+          ...asHandle && !disabled ? listeners : {},
+          ref: composedRef,
+          style: composedStyle,
+          className: cn(
+            /*
+             * ⚠ Khác thượng nguồn: `bg-zinc-100 dark:bg-zinc-900` là thang mặc định của Tailwind
+             * (cổng màu chặn) → `bg-muted`, tự lật theo theme. Khung cột là viền TRANG TRÍ (không
+             * bấm được, không mang trạng thái) nên `border-border` là đúng vai trò.
+             */
+            "flex size-full flex-col gap-2 rounded-lg border border-border bg-muted p-2.5 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+            {
+              "touch-none select-none": asHandle,
+              "cursor-default": context.flatCursor,
+              "data-dragging:cursor-grabbing": !context.flatCursor,
+              "cursor-grab": !isDragging && asHandle && !context.flatCursor,
+              "opacity-50": isDragging,
+              "pointer-events-none opacity-50": disabled,
+              // ⚠ Khác thượng nguồn: bản sao trong `KanbanOverlay` được nâng lên bằng bóng nổi.
+              "shadow-overlay": inOverlay
+            },
+            className
+          )
+        }
+      )
+    }
+  ) });
+}
+function KanbanColumnHandle(props) {
+  const { asChild, disabled, className, ref, ...columnHandleProps } = props;
+  const context = useKanbanContext(COLUMN_HANDLE_NAME);
+  const columnContext = useKanbanColumnContext(COLUMN_HANDLE_NAME);
+  const isDisabled = disabled ?? columnContext.disabled;
+  const { setActivatorNodeRef } = columnContext;
+  const onActivatorNodeRef = React.useCallback(
+    (node) => {
+      if (isDisabled) return;
+      setActivatorNodeRef(node);
+    },
+    [isDisabled, setActivatorNodeRef]
+  );
+  const composedRef = useComposedRefs(ref, onActivatorNodeRef);
+  const HandlePrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    HandlePrimitive,
+    {
+      type: "button",
+      "aria-label": context.labels.columnHandleLabel,
+      "aria-controls": columnContext.id,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-dragging": columnContext.isDragging ? "" : void 0,
+      "data-slot": "kanban-column-handle",
+      ...columnHandleProps,
+      ...isDisabled ? {} : columnContext.attributes,
+      ...isDisabled ? {} : columnContext.listeners,
+      ref: composedRef,
+      className: cn(
+        "select-none disabled:pointer-events-none disabled:opacity-50",
+        context.flatCursor ? "cursor-default" : "cursor-grab data-dragging:cursor-grabbing",
+        className
+      ),
+      disabled: isDisabled
+    }
+  );
+}
+const KanbanItemContext = React.createContext(null);
+function useKanbanItemContext(consumerName) {
+  const context = React.useContext(KanbanItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ITEM_NAME}\``);
+  }
+  return context;
+}
+function KanbanItem(props) {
+  const { value, style, asHandle, asChild, disabled, className, ref, ...itemProps } = props;
+  const id = React.useId();
+  const context = useKanbanContext(ITEM_NAME);
+  const inBoard = React.useContext(KanbanBoardContext);
+  const inOverlay = React.useContext(KanbanOverlayContext);
+  if (!inBoard && !inOverlay) {
+    throw new Error(`\`${ITEM_NAME}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${BOARD_NAME}\``);
+  }
+  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+    id: value,
+    disabled,
+    // ⚠ Khác thượng nguồn: dnd-kit mặc định đọc vai trò là "sortable" (tiếng Anh).
+    attributes: { roleDescription: context.labels.itemRoleDescription }
+  });
+  if (value === "") {
+    throw new Error(`\`value\` c\u1EE7a \`${ITEM_NAME}\` kh\xF4ng \u0111\u01B0\u1EE3c l\xE0 chu\u1ED7i r\u1ED7ng`);
+  }
+  const onNodeRef = React.useCallback(
+    (node) => {
+      if (disabled) return;
+      setNodeRef(node);
+    },
+    [disabled, setNodeRef]
+  );
+  const composedRef = useComposedRefs(ref, onNodeRef);
+  const composedStyle = React.useMemo(() => {
+    return {
+      transform: CSS.Transform.toString(transform),
+      transition,
+      ...style
+    };
+  }, [transform, transition, style]);
+  const itemContext = React.useMemo(
+    () => ({
+      id,
+      attributes,
+      listeners,
+      setActivatorNodeRef,
+      isDragging,
+      disabled
+    }),
+    [id, attributes, listeners, setActivatorNodeRef, isDragging, disabled]
+  );
+  const ItemPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(KanbanItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx(
+    ItemPrimitive,
+    {
+      id,
+      "data-disabled": disabled ? "" : void 0,
+      "data-dragging": isDragging ? "" : void 0,
+      "data-slot": "kanban-item",
+      ...itemProps,
+      ...asHandle && !disabled ? attributes : {},
+      ...asHandle && !disabled ? listeners : {},
+      ref: composedRef,
+      style: composedStyle,
+      className: cn(
+        // Viền focus cùng khuôn với `Checkbox`/`RadioGroup` của gói.
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        {
+          "touch-none select-none": asHandle,
+          "cursor-default": context.flatCursor,
+          "data-dragging:cursor-grabbing": !context.flatCursor,
+          "cursor-grab": !isDragging && asHandle && !context.flatCursor,
+          "opacity-50": isDragging,
+          "pointer-events-none opacity-50": disabled,
+          // ⚠ Khác thượng nguồn: bản sao trong `KanbanOverlay` được nâng lên bằng bóng nổi.
+          // Bóng theo bo góc của CHÍNH phần tử — dùng `asChild` lên thẻ để bóng ôm đúng góc.
+          "shadow-overlay": inOverlay
+        },
+        className
+      )
+    }
+  ) });
+}
+function KanbanItemHandle(props) {
+  const { asChild, disabled, className, ref, ...itemHandleProps } = props;
+  const context = useKanbanContext(ITEM_HANDLE_NAME);
+  const itemContext = useKanbanItemContext(ITEM_HANDLE_NAME);
+  const isDisabled = disabled ?? itemContext.disabled;
+  const { setActivatorNodeRef } = itemContext;
+  const onActivatorNodeRef = React.useCallback(
+    (node) => {
+      if (isDisabled) return;
+      setActivatorNodeRef(node);
+    },
+    [isDisabled, setActivatorNodeRef]
+  );
+  const composedRef = useComposedRefs(ref, onActivatorNodeRef);
+  const HandlePrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    HandlePrimitive,
+    {
+      type: "button",
+      "aria-label": context.labels.itemHandleLabel,
+      "aria-controls": itemContext.id,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-dragging": itemContext.isDragging ? "" : void 0,
+      "data-slot": "kanban-item-handle",
+      ...itemHandleProps,
+      ...isDisabled ? {} : itemContext.attributes,
+      ...isDisabled ? {} : itemContext.listeners,
+      ref: composedRef,
+      className: cn(
+        "select-none disabled:pointer-events-none disabled:opacity-50",
+        context.flatCursor ? "cursor-default" : "cursor-grab data-dragging:cursor-grabbing",
+        className
+      ),
+      disabled: isDisabled
+    }
+  );
+}
+const KanbanOverlayContext = React.createContext(false);
+const dropAnimation = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+function KanbanOverlay(props) {
+  const { container: containerProp, children, ...overlayProps } = props;
+  const context = useKanbanContext(OVERLAY_NAME);
+  const [mounted, setMounted] = React.useState(false);
+  useIsomorphicLayoutEffect(() => setMounted(true), []);
+  const container = containerProp ?? (mounted ? globalThis.document?.body : null);
+  if (!container) return null;
+  const variant = context.activeId && context.activeId in context.items ? "column" : "item";
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      DragOverlay,
+      {
+        dropAnimation,
+        modifiers: context.modifiers,
+        className: cn(!context.flatCursor && "cursor-grabbing"),
+        ...overlayProps,
+        children: /* @__PURE__ */ jsx(KanbanOverlayContext.Provider, { value: true, children: context.activeId && children ? typeof children === "function" ? children({
+          value: context.activeId,
+          variant
+        }) : children : null })
+      }
+    ),
+    container
+  );
+}
+export {
+  Kanban,
+  KanbanBoard,
+  KanbanColumn,
+  KanbanColumnHandle,
+  KanbanItem,
+  KanbanItemHandle,
+  KanbanOverlay
+};
+//# sourceMappingURL=kanban.js.map