@docyrus/shadcn 1.1.0 → 1.2.1

package/dist/radix-vega/kanban.js

@@ -0,0 +1,831 @@
+import { KeyboardCode, defaultDropAnimationSideEffects, useSensors, useSensor, MouseSensor, TouchSensor, KeyboardSensor, closestCenter, pointerWithin, rectIntersection, getFirstCollision, DndContext, MeasuringStrategy, DragOverlay, closestCorners } from '@dnd-kit/core';
+import { verticalListSortingStrategy, arrayMove, SortableContext, horizontalListSortingStrategy, useSortable, defaultAnimateLayoutChanges } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Slot } from '@radix-ui/react-slot';
+import * as React2 from 'react';
+import * as ReactDOM from 'react-dom';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  }
+  if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup === "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup === "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React2.useCallback(composeRefs(...refs), refs);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var directions = [
+  KeyboardCode.Down,
+  KeyboardCode.Right,
+  KeyboardCode.Up,
+  KeyboardCode.Left
+];
+var coordinateGetter = (event, { context }) => {
+  const { active, droppableRects, droppableContainers, collisionRect } = context;
+  if (directions.includes(event.code)) {
+    event.preventDefault();
+    if (!active || !collisionRect) return;
+    const filteredContainers = [];
+    for (const entry of droppableContainers.getEnabled()) {
+      if (!entry || entry?.disabled) return;
+      const rect = droppableRects.get(entry.id);
+      if (!rect) return;
+      const data = entry.data.current;
+      if (data) {
+        const { type, children } = data;
+        if (type === "container" && children?.length > 0) {
+          if (active.data.current?.type !== "container") {
+            return;
+          }
+        }
+      }
+      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;
+};
+var ROOT_NAME = "Kanban";
+var BOARD_NAME = "KanbanBoard";
+var COLUMN_NAME = "KanbanColumn";
+var COLUMN_HANDLE_NAME = "KanbanColumnHandle";
+var ITEM_NAME = "KanbanItem";
+var ITEM_HANDLE_NAME = "KanbanItemHandle";
+var OVERLAY_NAME = "KanbanOverlay";
+var KanbanContext = React2.createContext(
+  null
+);
+function useKanbanContext(consumerName) {
+  const context = React2.useContext(KanbanContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function Kanban(props) {
+  const {
+    value,
+    onValueChange,
+    modifiers,
+    strategy = verticalListSortingStrategy,
+    orientation = "horizontal",
+    onMove,
+    getItemValue: getItemValueProp,
+    accessibility,
+    flatCursor = false,
+    ...kanbanProps
+  } = props;
+  const id = React2.useId();
+  const [activeId, setActiveId] = React2.useState(null);
+  const lastOverIdRef = React2.useRef(null);
+  const hasMovedRef = React2.useRef(false);
+  const sensors = useSensors(
+    useSensor(MouseSensor),
+    useSensor(TouchSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter
+    })
+  );
+  const getItemValue = React2.useCallback(
+    (item) => {
+      if (typeof item === "object" && !getItemValueProp) {
+        throw new Error(
+          "`getItemValue` is required when using array of objects"
+        );
+      }
+      return getItemValueProp ? getItemValueProp(item) : item;
+    },
+    [getItemValueProp]
+  );
+  const getColumn = React2.useCallback(
+    (id2) => {
+      if (id2 in value) return id2;
+      for (const [columnId, items] of Object.entries(value)) {
+        if (items.some((item) => getItemValue(item) === id2)) {
+          return columnId;
+        }
+      }
+      return null;
+    },
+    [value, getItemValue]
+  );
+  const collisionDetection = React2.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 = React2.useCallback(
+    (event) => {
+      kanbanProps.onDragStart?.(event);
+      if (event.activatorEvent.defaultPrevented) return;
+      setActiveId(event.active.id);
+    },
+    [kanbanProps.onDragStart]
+  );
+  const onDragOver = React2.useCallback(
+    (event) => {
+      kanbanProps.onDragOver?.(event);
+      if (event.activatorEvent.defaultPrevented) 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 = React2.useCallback(
+    (event) => {
+      kanbanProps.onDragEnd?.(event);
+      if (event.activatorEvent.defaultPrevented) return;
+      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 = React2.useCallback(
+    (event) => {
+      kanbanProps.onDragCancel?.(event);
+      if (event.activatorEvent.defaultPrevented) return;
+      setActiveId(null);
+      hasMovedRef.current = false;
+    },
+    [kanbanProps.onDragCancel]
+  );
+  const announcements = React2.useMemo(
+    () => ({
+      onDragStart({ active }) {
+        const isColumn = active.id in value;
+        const itemType = 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 `Picked up ${itemType} at position ${position} of ${total}`;
+      },
+      onDragOver({ active, over }) {
+        if (!over) return;
+        const isColumn = active.id in value;
+        const itemType = 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 `${itemType} is now at position ${position} of ${total}`;
+        }
+        if (activeColumn !== overColumn) {
+          return `${itemType} is now at position ${position} of ${total} in ${overColumn}`;
+        }
+        return `${itemType} is now at position ${position} of ${total}`;
+      },
+      onDragEnd({ active, over }) {
+        if (!over) return;
+        const isColumn = active.id in value;
+        const itemType = 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 `${itemType} was dropped at position ${position} of ${total}`;
+        }
+        if (activeColumn !== overColumn) {
+          return `${itemType} was dropped at position ${position} of ${total} in ${overColumn}`;
+        }
+        return `${itemType} was dropped at position ${position} of ${total}`;
+      },
+      onDragCancel({ active }) {
+        const isColumn = active.id in value;
+        const itemType = isColumn ? "column" : "item";
+        return `Dragging was cancelled. ${itemType} was dropped.`;
+      }
+    }),
+    [value, getColumn, getItemValue]
+  );
+  const contextValue = React2.useMemo(
+    () => ({
+      id,
+      items: value,
+      modifiers,
+      strategy,
+      orientation,
+      activeId,
+      setActiveId,
+      getItemValue,
+      flatCursor
+    }),
+    [
+      id,
+      value,
+      activeId,
+      modifiers,
+      strategy,
+      orientation,
+      getItemValue,
+      flatCursor
+    ]
+  );
+  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: `
+            To pick up a kanban item or column, press space or enter.
+            While dragging, use the arrow keys to move the item.
+            Press space or enter again to drop the item in its new position, or press escape to cancel.
+          `
+        },
+        ...accessibility
+      }
+    }
+  ) });
+}
+var KanbanBoardContext = React2.createContext(false);
+function KanbanBoard(props) {
+  const { asChild, className, ref, ...boardProps } = props;
+  const context = useKanbanContext(BOARD_NAME);
+  const columns = React2.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
+          )
+        }
+      )
+    }
+  ) });
+}
+var KanbanColumnContext = React2.createContext(null);
+function useKanbanColumnContext(consumerName) {
+  const context = React2.useContext(KanbanColumnContext);
+  if (!context) {
+    throw new Error(
+      `\`${consumerName}\` must be used within \`${COLUMN_NAME}\``
+    );
+  }
+  return context;
+}
+var animateLayoutChanges = (args) => defaultAnimateLayoutChanges({ ...args, wasDragging: true });
+function KanbanColumn(props) {
+  const {
+    value,
+    asChild,
+    asHandle,
+    disabled,
+    className,
+    style,
+    ref,
+    ...columnProps
+  } = props;
+  const id = React2.useId();
+  const context = useKanbanContext(COLUMN_NAME);
+  const inBoard = React2.useContext(KanbanBoardContext);
+  const inOverlay = React2.useContext(KanbanOverlayContext);
+  if (!inBoard && !inOverlay) {
+    throw new Error(
+      `\`${COLUMN_NAME}\` must be used within \`${BOARD_NAME}\` or \`${OVERLAY_NAME}\``
+    );
+  }
+  if (value === "") {
+    throw new Error(`\`${COLUMN_NAME}\` value cannot be an empty string`);
+  }
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: value,
+    disabled,
+    animateLayoutChanges
+  });
+  const composedRef = useComposedRefs(ref, (node) => {
+    if (disabled) return;
+    setNodeRef(node);
+  });
+  const composedStyle = React2.useMemo(() => {
+    return {
+      transform: CSS.Transform.toString(transform),
+      transition,
+      ...style
+    };
+  }, [transform, transition, style]);
+  const items = React2.useMemo(() => {
+    const items2 = context.items[value] ?? [];
+    return items2.map((item) => context.getItemValue(item));
+  }, [context.items, value, context.getItemValue]);
+  const columnContext = React2.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,
+          "data-dragging": isDragging ? "" : void 0,
+          "data-slot": "kanban-column",
+          ...columnProps,
+          ...asHandle && !disabled ? attributes : {},
+          ...asHandle && !disabled ? listeners : {},
+          ref: composedRef,
+          style: composedStyle,
+          className: cn(
+            "flex size-full flex-col gap-2 rounded-lg border bg-zinc-100 p-2.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:bg-zinc-900",
+            {
+              "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
+            },
+            className
+          )
+        }
+      )
+    }
+  ) });
+}
+function KanbanColumnHandle(props) {
+  const { asChild, disabled, className, ref, ...columnHandleProps } = props;
+  const context = useKanbanContext(COLUMN_NAME);
+  const columnContext = useKanbanColumnContext(COLUMN_HANDLE_NAME);
+  const isDisabled = disabled ?? columnContext.disabled;
+  const composedRef = useComposedRefs(ref, (node) => {
+    if (isDisabled) return;
+    columnContext.setActivatorNodeRef(node);
+  });
+  const HandlePrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    HandlePrimitive,
+    {
+      type: "button",
+      "aria-controls": columnContext.id,
+      "data-disabled": isDisabled,
+      "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
+    }
+  );
+}
+var KanbanItemContext = React2.createContext(
+  null
+);
+function useKanbanItemContext(consumerName) {
+  const context = React2.useContext(KanbanItemContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
+  }
+  return context;
+}
+function KanbanItem(props) {
+  const {
+    value,
+    style,
+    asHandle,
+    asChild,
+    disabled,
+    className,
+    ref,
+    ...itemProps
+  } = props;
+  const id = React2.useId();
+  const context = useKanbanContext(ITEM_NAME);
+  const inBoard = React2.useContext(KanbanBoardContext);
+  const inOverlay = React2.useContext(KanbanOverlayContext);
+  if (!inBoard && !inOverlay) {
+    throw new Error(`\`${ITEM_NAME}\` must be used within \`${BOARD_NAME}\``);
+  }
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: value, disabled });
+  if (value === "") {
+    throw new Error(`\`${ITEM_NAME}\` value cannot be an empty string`);
+  }
+  const composedRef = useComposedRefs(ref, (node) => {
+    if (disabled) return;
+    setNodeRef(node);
+  });
+  const composedStyle = React2.useMemo(() => {
+    return {
+      transform: CSS.Transform.toString(transform),
+      transition,
+      ...style
+    };
+  }, [transform, transition, style]);
+  const itemContext = React2.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,
+      "data-dragging": isDragging ? "" : void 0,
+      "data-slot": "kanban-item",
+      ...itemProps,
+      ...asHandle && !disabled ? attributes : {},
+      ...asHandle && !disabled ? listeners : {},
+      ref: composedRef,
+      style: composedStyle,
+      className: cn(
+        "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+        {
+          "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
+        },
+        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 composedRef = useComposedRefs(ref, (node) => {
+    if (isDisabled) return;
+    itemContext.setActivatorNodeRef(node);
+  });
+  const HandlePrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    HandlePrimitive,
+    {
+      type: "button",
+      "aria-controls": itemContext.id,
+      "data-disabled": isDisabled,
+      "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
+    }
+  );
+}
+var KanbanOverlayContext = React2.createContext(false);
+var 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] = React2.useState(false);
+  React2.useLayoutEffect(() => 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
+//# sourceMappingURL=kanban.js.map