4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T21ca,"use client"; import type { Announcements, DndContextProps, DragEndEvent, DragOverEvent, DragStartEvent, } from "@dnd-kit/core"; import { closestCenter, DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useDroppable, useSensor, useSensors, } from "@dnd-kit/core"; import { arrayMove, SortableContext, useSortable } from "@dnd-kit/sortable"; import { CSS } from "@dnd-kit/utilities"; import { createContext, type HTMLAttributes, type ReactNode, useContext, useState, } from "react"; import { createPortal } from "react-dom"; import tunnel from "tunnel-rat"; import { Card } from "@/components/ui/card"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { cn } from "@/lib/utils"; const t = tunnel(); export type { DragEndEvent } from "@dnd-kit/core"; type KanbanItemProps = { id: string; name: string; column: string; } & Record; type KanbanColumnProps = { id: string; name: string; } & Record; type KanbanContextProps< T extends KanbanItemProps = KanbanItemProps, C extends KanbanColumnProps = KanbanColumnProps, > = { columns: C[]; data: T[]; activeCardId: string | null; }; const KanbanContext = createContext({ columns: [], data: [], activeCardId: null, }); export type KanbanBoardProps = { id: string; children: ReactNode; className?: string; }; export const KanbanBoard = ({ id, children, className }: KanbanBoardProps) => { const { isOver, setNodeRef } = useDroppable({ id, }); return (

{children}

); }; export type KanbanCardProps = T & { children?: ReactNode; className?: string; }; export const KanbanCard = ({ id, name, children, className, }: KanbanCardProps) => { const { attributes, listeners, setNodeRef, transition, transform, isDragging, } = useSortable({ id, }); const { activeCardId } = useContext(KanbanContext) as KanbanContextProps; const style = { transition, transform: CSS.Transform.toString(transform), }; return ( <>

{children ??

{name}

}

{activeCardId === id && ( {children ??

{name}

} )} ); }; export type KanbanCardsProps = Omit, "children" | "id"> & { children: (item: T) => ReactNode; id: string; }; export const KanbanCards = ({ children, className, ...props }: KanbanCardsProps) => { const { data } = useContext(KanbanContext) as KanbanContextProps; const filteredData = data.filter((item) => item.column === props.id); const items = filteredData.map((item) => item.id); return (

{filteredData.map(children)}

); }; export type KanbanHeaderProps = HTMLAttributes; export const KanbanHeader = ({ className, ...props }: KanbanHeaderProps) => (

); export type KanbanProviderProps< T extends KanbanItemProps = KanbanItemProps, C extends KanbanColumnProps = KanbanColumnProps, > = Omit & { children: (column: C) => ReactNode; className?: string; columns: C[]; data: T[]; onDataChange?: (data: T[]) => void; onDragStart?: (event: DragStartEvent) => void; onDragEnd?: (event: DragEndEvent) => void; onDragOver?: (event: DragOverEvent) => void; }; export const KanbanProvider = < T extends KanbanItemProps = KanbanItemProps, C extends KanbanColumnProps = KanbanColumnProps, >({ children, onDragStart, onDragEnd, onDragOver, className, columns, data, onDataChange, ...props }: KanbanProviderProps) => { const [activeCardId, setActiveCardId] = useState(null); const sensors = useSensors( useSensor(MouseSensor), useSensor(TouchSensor), useSensor(KeyboardSensor) ); const handleDragStart = (event: DragStartEvent) => { const card = data.find((item) => item.id === event.active.id); if (card) { setActiveCardId(event.active.id as string); } onDragStart?.(event); }; const handleDragOver = (event: DragOverEvent) => { const { active, over } = event; if (!over) { return; } const activeItem = data.find((item) => item.id === active.id); const overItem = data.find((item) => item.id === over.id); if (!activeItem) { return; } const activeColumn = activeItem.column; const overColumn = overItem?.column || columns.find((col) => col.id === over.id)?.id || columns[0]?.id; if (activeColumn !== overColumn) { let newData = [...data]; const activeIndex = newData.findIndex((item) => item.id === active.id); const overIndex = newData.findIndex((item) => item.id === over.id); newData[activeIndex].column = overColumn; newData = arrayMove(newData, activeIndex, overIndex); onDataChange?.(newData); } onDragOver?.(event); }; const handleDragEnd = (event: DragEndEvent) => { setActiveCardId(null); onDragEnd?.(event); const { active, over } = event; if (!over || active.id === over.id) { return; } let newData = [...data]; const oldIndex = newData.findIndex((item) => item.id === active.id); const newIndex = newData.findIndex((item) => item.id === over.id); newData = arrayMove(newData, oldIndex, newIndex); onDataChange?.(newData); }; const announcements: Announcements = { onDragStart({ active }) { const { name, column } = data.find((item) => item.id === active.id) ?? {}; return `Picked up the card "${name}" from the "${column}" column`; }, onDragOver({ active, over }) { const { name } = data.find((item) => item.id === active.id) ?? {}; const newColumn = columns.find((column) => column.id === over?.id)?.name; return `Dragged the card "${name}" over the "${newColumn}" column`; }, onDragEnd({ active, over }) { const { name } = data.find((item) => item.id === active.id) ?? {}; const newColumn = columns.find((column) => column.id === over?.id)?.name; return `Dropped the card "${name}" into the "${newColumn}" column`; }, onDragCancel({ active }) { const { name } = data.find((item) => item.id === active.id) ?? {}; return `Cancelled dragging the card "${name}"`; }, }; return (

{columns.map((column) => children(column))}

{typeof window !== "undefined" && createPortal( , document.body )} ); }; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@dnd-kit/core",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fcore","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/core"}]]}]}],["$","li","@dnd-kit/sortable",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Fsortable","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/sortable"}]]}]}],["$","li","@dnd-kit/utilities",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40dnd-kit%2Futilities","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@dnd-kit/utilities"}]]}]}],["$","li","tunnel-rat",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tunnel-rat","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tunnel-rat"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["card","scroll-area"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"index.tsx","content":"$51","type":"registry:ui","target":"components/kibo-ui/kanban/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]