@opencosmos/ui 1.3.1

package/dist/dnd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/DragDrop.tsx","../src/lib/utils.ts"],"sourcesContent":["'use client';\n\nimport React, { createContext, useContext } from 'react';\nimport {\n  DndContext,\n  closestCenter,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  DragEndEvent,\n  DragOverlay,\n  DragStartEvent,\n} from '@dnd-kit/core';\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n  rectSortingStrategy,\n  SortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { GripVertical } from 'lucide-react';\nimport { cn } from '../../lib/utils';\n\n/**\n * Item interface for drag and drop lists\n */\nexport interface DragDropItem {\n  id: string;\n  [key: string]: any;\n}\n\n/**\n * Context for sharing drag handle listeners\n */\ninterface DragHandleContextValue {\n  attributes: any;\n  listeners: any;\n  setActivatorNodeRef?: (element: HTMLElement | null) => void;\n}\n\nconst DragHandleContext = createContext<DragHandleContextValue | null>(null);\n\n/**\n * Props for DragDropList component\n */\nexport interface DragDropListProps<T extends DragDropItem> {\n  /**\n   * Array of items to display\n   */\n  items: T[];\n  /**\n   * Callback fired when items are reordered\n   */\n  onReorder: (items: T[]) => void;\n  /**\n   * Render function for each item\n   */\n  renderItem: (item: T, isDragging: boolean) => React.ReactNode;\n  /**\n   * Enable drag handle mode (only drag from handle)\n   * @default false\n   */\n  withHandle?: boolean;\n  /**\n   * Custom class name for the list container\n   */\n  className?: string;\n  /**\n   * Custom class name for list items\n   */\n  itemClassName?: string;\n  /**\n   * Sorting strategy for the drag & drop behavior\n   * - verticalListSortingStrategy: For vertical lists (default)\n   * - rectSortingStrategy: For grid layouts\n   * @default verticalListSortingStrategy\n   */\n  strategy?: SortingStrategy;\n}\n\n/**\n * Props for sortable item\n */\ninterface SortableItemProps {\n  id: string;\n  children: React.ReactNode;\n  withHandle?: boolean;\n  className?: string;\n}\n\n/**\n * Internal sortable item component\n */\nfunction SortableItem({ id, children, withHandle, className }: SortableItemProps) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    setActivatorNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id });\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n    opacity: isDragging ? 0.5 : 1,\n  };\n\n  // If using handle, don't attach listeners to the item\n  const itemProps = withHandle ? {} : { ...listeners, ...attributes };\n\n  const content = withHandle ? (\n    <DragHandleContext.Provider value={{ attributes, listeners, setActivatorNodeRef }}>\n      {children}\n    </DragHandleContext.Provider>\n  ) : (\n    children\n  );\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className={cn(\n        'relative transition-opacity',\n        isDragging && 'z-50',\n        className\n      )}\n      {...itemProps}\n    >\n      {content}\n    </div>\n  );\n}\n\n/**\n * Drag handle component for manual drag control\n * Must be used within a DragDropList with withHandle={true}\n */\nexport interface DragDropHandleProps {\n  /**\n   * Custom class name\n   */\n  className?: string;\n  /**\n   * Handle icon\n   */\n  icon?: React.ReactNode;\n}\n\nexport function DragDropHandle({ className, icon }: DragDropHandleProps) {\n  const context = useContext(DragHandleContext);\n\n  if (!context) {\n    console.warn('DragDropHandle must be used within a DragDropList with withHandle={true}');\n    return null;\n  }\n\n  const { attributes, listeners, setActivatorNodeRef } = context;\n\n  return (\n    <div\n      ref={setActivatorNodeRef}\n      {...attributes}\n      {...listeners}\n      className={cn(\n        'flex items-center justify-center cursor-grab active:cursor-grabbing',\n        'text-[var(--color-text-secondary)] hover:text-[var(--color-foreground)]',\n        'transition-colors',\n        className\n      )}\n    >\n      {icon || <GripVertical className=\"w-4 h-4\" />}\n    </div>\n  );\n}\n\n/**\n * DragDropList - Sortable list component with drag and drop functionality\n *\n * @example\n * ```tsx\n * const [items, setItems] = useState([\n *   { id: '1', name: 'Item 1' },\n *   { id: '2', name: 'Item 2' },\n * ]);\n *\n * <DragDropList\n *   items={items}\n *   onReorder={setItems}\n *   renderItem={(item) => (\n *     <div className=\"p-4 bg-surface rounded\">{item.name}</div>\n *   )}\n * />\n * ```\n */\nexport function DragDropList<T extends DragDropItem>({\n  items,\n  onReorder,\n  renderItem,\n  withHandle = false,\n  className,\n  itemClassName,\n  strategy = verticalListSortingStrategy,\n}: DragDropListProps<T>) {\n  const [activeId, setActiveId] = React.useState<string | null>(null);\n\n  // Configure sensors for touch/mouse/keyboard support\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5, // Prevents accidental drags on mobile\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  );\n\n  const handleDragStart = (event: DragStartEvent) => {\n    setActiveId(event.active.id as string);\n  };\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    if (over && active.id !== over.id) {\n      const oldIndex = items.findIndex((item) => item.id === active.id);\n      const newIndex = items.findIndex((item) => item.id === over.id);\n      onReorder(arrayMove(items, oldIndex, newIndex));\n    }\n\n    setActiveId(null);\n  };\n\n  const activeItem = items.find((item) => item.id === activeId);\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={items} strategy={strategy}>\n        <div className={cn(strategy === verticalListSortingStrategy && 'space-y-2', className)}>\n          {items.map((item) => (\n            <SortableItem\n              key={item.id}\n              id={item.id}\n              withHandle={withHandle}\n              className={itemClassName}\n            >\n              {renderItem(item, item.id === activeId)}\n            </SortableItem>\n          ))}\n        </div>\n      </SortableContext>\n\n      <DragOverlay>\n        {activeId && activeItem ? (\n          <div className=\"opacity-80 shadow-lg\">\n            {renderItem(activeItem, true)}\n          </div>\n        ) : null}\n      </DragOverlay>\n    </DndContext>\n  );\n}\n\n/**\n * Props for DragDropTable component\n */\nexport interface DragDropTableProps<T extends DragDropItem> {\n  /**\n   * Array of items to display\n   */\n  items: T[];\n  /**\n   * Callback fired when items are reordered\n   */\n  onReorder: (items: T[]) => void;\n  /**\n   * Table columns configuration\n   */\n  columns: {\n    key: string;\n    header: string;\n    render?: (item: T) => React.ReactNode;\n  }[];\n  /**\n   * Custom class name for the table\n   */\n  className?: string;\n}\n\n/**\n * DragDropTable - Sortable table with draggable rows\n *\n * @example\n * ```tsx\n * <DragDropTable\n *   items={data}\n *   onReorder={setData}\n *   columns={[\n *     { key: 'name', header: 'Name' },\n *     { key: 'email', header: 'Email' },\n *   ]}\n * />\n * ```\n */\nexport function DragDropTable<T extends DragDropItem>({\n  items,\n  onReorder,\n  columns,\n  className,\n}: DragDropTableProps<T>) {\n  const [activeId, setActiveId] = React.useState<string | null>(null);\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, {\n      activationConstraint: {\n        distance: 5,\n      },\n    }),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  );\n\n  const handleDragStart = (event: DragStartEvent) => {\n    setActiveId(event.active.id as string);\n  };\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n\n    if (over && active.id !== over.id) {\n      const oldIndex = items.findIndex((item) => item.id === active.id);\n      const newIndex = items.findIndex((item) => item.id === over.id);\n      onReorder(arrayMove(items, oldIndex, newIndex));\n    }\n\n    setActiveId(null);\n  };\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n    >\n      <div className={cn('overflow-x-auto', className)}>\n        <table className=\"w-full border-collapse\">\n          <thead>\n            <tr className=\"border-b border-[var(--color-border)]\">\n              <th className=\"w-12\"></th>\n              {columns.map((column) => (\n                <th\n                  key={column.key}\n                  className=\"text-left p-3 text-sm font-medium text-[var(--color-text-secondary)]\"\n                >\n                  {column.header}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            <SortableContext items={items} strategy={verticalListSortingStrategy}>\n              {items.map((item) => (\n                <TableRow\n                  key={item.id}\n                  item={item}\n                  columns={columns}\n                  isDragging={item.id === activeId}\n                />\n              ))}\n            </SortableContext>\n          </tbody>\n        </table>\n      </div>\n    </DndContext>\n  );\n}\n\ninterface TableRowProps<T extends DragDropItem> {\n  item: T;\n  columns: { key: string; header: string; render?: (item: T) => React.ReactNode }[];\n  isDragging: boolean;\n}\n\nfunction TableRow<T extends DragDropItem>({ item, columns, isDragging }: TableRowProps<T>) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({ id: item.id });\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n    opacity: isDragging ? 0.5 : 1,\n  };\n\n  return (\n    <tr\n      ref={setNodeRef}\n      style={style}\n      className={cn(\n        'border-b border-[var(--color-border)] hover:bg-[var(--color-hover)]',\n        'transition-colors',\n        isDragging && 'bg-[var(--color-active)]'\n      )}\n    >\n      <td className=\"p-3\">\n        <div\n          {...attributes}\n          {...listeners}\n          className=\"cursor-grab active:cursor-grabbing text-[var(--color-text-secondary)] hover:text-[var(--color-foreground)] transition-colors\"\n        >\n          <GripVertical className=\"w-4 h-4\" />\n        </div>\n      </td>\n      {columns.map((column) => (\n        <td key={column.key} className=\"p-3 text-sm\">\n          {column.render ? column.render(item) : (item as any)[column.key]}\n        </td>\n      ))}\n    </tr>\n  );\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n    return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":[]}