@opencosmos/ui 1.3.1

package/dist/dnd.d.ts

@@ -0,0 +1,126 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+import { SortingStrategy } from '@dnd-kit/sortable';
+
+/**
+ * Item interface for drag and drop lists
+ */
+interface DragDropItem {
+    id: string;
+    [key: string]: any;
+}
+/**
+ * Props for DragDropList component
+ */
+interface DragDropListProps<T extends DragDropItem> {
+    /**
+     * Array of items to display
+     */
+    items: T[];
+    /**
+     * Callback fired when items are reordered
+     */
+    onReorder: (items: T[]) => void;
+    /**
+     * Render function for each item
+     */
+    renderItem: (item: T, isDragging: boolean) => React__default.ReactNode;
+    /**
+     * Enable drag handle mode (only drag from handle)
+     * @default false
+     */
+    withHandle?: boolean;
+    /**
+     * Custom class name for the list container
+     */
+    className?: string;
+    /**
+     * Custom class name for list items
+     */
+    itemClassName?: string;
+    /**
+     * Sorting strategy for the drag & drop behavior
+     * - verticalListSortingStrategy: For vertical lists (default)
+     * - rectSortingStrategy: For grid layouts
+     * @default verticalListSortingStrategy
+     */
+    strategy?: SortingStrategy;
+}
+/**
+ * Drag handle component for manual drag control
+ * Must be used within a DragDropList with withHandle={true}
+ */
+interface DragDropHandleProps {
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Handle icon
+     */
+    icon?: React__default.ReactNode;
+}
+declare function DragDropHandle({ className, icon }: DragDropHandleProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * DragDropList - Sortable list component with drag and drop functionality
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState([
+ *   { id: '1', name: 'Item 1' },
+ *   { id: '2', name: 'Item 2' },
+ * ]);
+ *
+ * <DragDropList
+ *   items={items}
+ *   onReorder={setItems}
+ *   renderItem={(item) => (
+ *     <div className="p-4 bg-surface rounded">{item.name}</div>
+ *   )}
+ * />
+ * ```
+ */
+declare function DragDropList<T extends DragDropItem>({ items, onReorder, renderItem, withHandle, className, itemClassName, strategy, }: DragDropListProps<T>): react_jsx_runtime.JSX.Element;
+/**
+ * Props for DragDropTable component
+ */
+interface DragDropTableProps<T extends DragDropItem> {
+    /**
+     * Array of items to display
+     */
+    items: T[];
+    /**
+     * Callback fired when items are reordered
+     */
+    onReorder: (items: T[]) => void;
+    /**
+     * Table columns configuration
+     */
+    columns: {
+        key: string;
+        header: string;
+        render?: (item: T) => React__default.ReactNode;
+    }[];
+    /**
+     * Custom class name for the table
+     */
+    className?: string;
+}
+/**
+ * DragDropTable - Sortable table with draggable rows
+ *
+ * @example
+ * ```tsx
+ * <DragDropTable
+ *   items={data}
+ *   onReorder={setData}
+ *   columns={[
+ *     { key: 'name', header: 'Name' },
+ *     { key: 'email', header: 'Email' },
+ *   ]}
+ * />
+ * ```
+ */
+declare function DragDropTable<T extends DragDropItem>({ items, onReorder, columns, className, }: DragDropTableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { DragDropHandle, type DragDropHandleProps, type DragDropItem, DragDropList, type DragDropListProps, DragDropTable, type DragDropTableProps };

package/dist/dnd.js

@@ -0,0 +1,274 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/dnd.ts
+var dnd_exports = {};
+__export(dnd_exports, {
+  DragDropHandle: () => DragDropHandle,
+  DragDropList: () => DragDropList,
+  DragDropTable: () => DragDropTable
+});
+module.exports = __toCommonJS(dnd_exports);
+
+// src/components/forms/DragDrop.tsx
+var import_react = __toESM(require("react"));
+var import_core = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_utilities = require("@dnd-kit/utilities");
+var import_lucide_react = require("lucide-react");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/forms/DragDrop.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DragHandleContext = (0, import_react.createContext)(null);
+function SortableItem({ id, children, withHandle, className }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = (0, import_sortable.useSortable)({ id });
+  const style = {
+    transform: import_utilities.CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  const itemProps = withHandle ? {} : { ...listeners, ...attributes };
+  const content = withHandle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DragHandleContext.Provider, { value: { attributes, listeners, setActivatorNodeRef }, children }) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: cn(
+        "relative transition-opacity",
+        isDragging && "z-50",
+        className
+      ),
+      ...itemProps,
+      children: content
+    }
+  );
+}
+function DragDropHandle({ className, icon }) {
+  const context = (0, import_react.useContext)(DragHandleContext);
+  if (!context) {
+    console.warn("DragDropHandle must be used within a DragDropList with withHandle={true}");
+    return null;
+  }
+  const { attributes, listeners, setActivatorNodeRef } = context;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: setActivatorNodeRef,
+      ...attributes,
+      ...listeners,
+      className: cn(
+        "flex items-center justify-center cursor-grab active:cursor-grabbing",
+        "text-[var(--color-text-secondary)] hover:text-[var(--color-foreground)]",
+        "transition-colors",
+        className
+      ),
+      children: icon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.GripVertical, { className: "w-4 h-4" })
+    }
+  );
+}
+function DragDropList({
+  items,
+  onReorder,
+  renderItem,
+  withHandle = false,
+  className,
+  itemClassName,
+  strategy = import_sortable.verticalListSortingStrategy
+}) {
+  const [activeId, setActiveId] = import_react.default.useState(null);
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.PointerSensor, {
+      activationConstraint: {
+        distance: 5
+        // Prevents accidental drags on mobile
+      }
+    }),
+    (0, import_core.useSensor)(import_core.KeyboardSensor, {
+      coordinateGetter: import_sortable.sortableKeyboardCoordinates
+    })
+  );
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex((item) => item.id === active.id);
+      const newIndex = items.findIndex((item) => item.id === over.id);
+      onReorder((0, import_sortable.arrayMove)(items, oldIndex, newIndex));
+    }
+    setActiveId(null);
+  };
+  const activeItem = items.find((item) => item.id === activeId);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_core.DndContext,
+    {
+      sensors,
+      collisionDetection: import_core.closestCenter,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sortable.SortableContext, { items, strategy, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn(strategy === import_sortable.verticalListSortingStrategy && "space-y-2", className), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          SortableItem,
+          {
+            id: item.id,
+            withHandle,
+            className: itemClassName,
+            children: renderItem(item, item.id === activeId)
+          },
+          item.id
+        )) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.DragOverlay, { children: activeId && activeItem ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "opacity-80 shadow-lg", children: renderItem(activeItem, true) }) : null })
+      ]
+    }
+  );
+}
+function DragDropTable({
+  items,
+  onReorder,
+  columns,
+  className
+}) {
+  const [activeId, setActiveId] = import_react.default.useState(null);
+  const sensors = (0, import_core.useSensors)(
+    (0, import_core.useSensor)(import_core.PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    }),
+    (0, import_core.useSensor)(import_core.KeyboardSensor, {
+      coordinateGetter: import_sortable.sortableKeyboardCoordinates
+    })
+  );
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex((item) => item.id === active.id);
+      const newIndex = items.findIndex((item) => item.id === over.id);
+      onReorder((0, import_sortable.arrayMove)(items, oldIndex, newIndex));
+    }
+    setActiveId(null);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_core.DndContext,
+    {
+      sensors,
+      collisionDetection: import_core.closestCenter,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: "w-full border-collapse", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { className: "border-b border-[var(--color-border)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "w-12" }),
+          columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "th",
+            {
+              className: "text-left p-3 text-sm font-medium text-[var(--color-text-secondary)]",
+              children: column.header
+            },
+            column.key
+          ))
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sortable.SortableContext, { items, strategy: import_sortable.verticalListSortingStrategy, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          TableRow,
+          {
+            item,
+            columns,
+            isDragging: item.id === activeId
+          },
+          item.id
+        )) }) })
+      ] }) })
+    }
+  );
+}
+function TableRow({ item, columns, isDragging }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = (0, import_sortable.useSortable)({ id: item.id });
+  const style = {
+    transform: import_utilities.CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "tr",
+    {
+      ref: setNodeRef,
+      style,
+      className: cn(
+        "border-b border-[var(--color-border)] hover:bg-[var(--color-hover)]",
+        "transition-colors",
+        isDragging && "bg-[var(--color-active)]"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "p-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            ...attributes,
+            ...listeners,
+            className: "cursor-grab active:cursor-grabbing text-[var(--color-text-secondary)] hover:text-[var(--color-foreground)] transition-colors",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.GripVertical, { className: "w-4 h-4" })
+          }
+        ) }),
+        columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "p-3 text-sm", children: column.render ? column.render(item) : item[column.key] }, column.key))
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DragDropHandle,
+  DragDropList,
+  DragDropTable
+});
+//# sourceMappingURL=dnd.js.map

package/dist/dnd.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dnd.ts","../src/components/forms/DragDrop.tsx","../src/lib/utils.ts"],"sourcesContent":["export * from './components/forms/DragDrop';\n","'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":["React"]}

package/dist/dnd.mjs

@@ -0,0 +1,250 @@
+"use client";
+
+// src/components/forms/DragDrop.tsx
+import React, { createContext, useContext } from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragOverlay
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical } from "lucide-react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/forms/DragDrop.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var DragHandleContext = createContext(null);
+function SortableItem({ id, children, withHandle, className }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  const itemProps = withHandle ? {} : { ...listeners, ...attributes };
+  const content = withHandle ? /* @__PURE__ */ jsx(DragHandleContext.Provider, { value: { attributes, listeners, setActivatorNodeRef }, children }) : children;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: cn(
+        "relative transition-opacity",
+        isDragging && "z-50",
+        className
+      ),
+      ...itemProps,
+      children: content
+    }
+  );
+}
+function DragDropHandle({ className, icon }) {
+  const context = useContext(DragHandleContext);
+  if (!context) {
+    console.warn("DragDropHandle must be used within a DragDropList with withHandle={true}");
+    return null;
+  }
+  const { attributes, listeners, setActivatorNodeRef } = context;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setActivatorNodeRef,
+      ...attributes,
+      ...listeners,
+      className: cn(
+        "flex items-center justify-center cursor-grab active:cursor-grabbing",
+        "text-[var(--color-text-secondary)] hover:text-[var(--color-foreground)]",
+        "transition-colors",
+        className
+      ),
+      children: icon || /* @__PURE__ */ jsx(GripVertical, { className: "w-4 h-4" })
+    }
+  );
+}
+function DragDropList({
+  items,
+  onReorder,
+  renderItem,
+  withHandle = false,
+  className,
+  itemClassName,
+  strategy = verticalListSortingStrategy
+}) {
+  const [activeId, setActiveId] = React.useState(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5
+        // Prevents accidental drags on mobile
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex((item) => item.id === active.id);
+      const newIndex = items.findIndex((item) => item.id === over.id);
+      onReorder(arrayMove(items, oldIndex, newIndex));
+    }
+    setActiveId(null);
+  };
+  const activeItem = items.find((item) => item.id === activeId);
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      children: [
+        /* @__PURE__ */ jsx(SortableContext, { items, strategy, children: /* @__PURE__ */ jsx("div", { className: cn(strategy === verticalListSortingStrategy && "space-y-2", className), children: items.map((item) => /* @__PURE__ */ jsx(
+          SortableItem,
+          {
+            id: item.id,
+            withHandle,
+            className: itemClassName,
+            children: renderItem(item, item.id === activeId)
+          },
+          item.id
+        )) }) }),
+        /* @__PURE__ */ jsx(DragOverlay, { children: activeId && activeItem ? /* @__PURE__ */ jsx("div", { className: "opacity-80 shadow-lg", children: renderItem(activeItem, true) }) : null })
+      ]
+    }
+  );
+}
+function DragDropTable({
+  items,
+  onReorder,
+  columns,
+  className
+}) {
+  const [activeId, setActiveId] = React.useState(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = items.findIndex((item) => item.id === active.id);
+      const newIndex = items.findIndex((item) => item.id === over.id);
+      onReorder(arrayMove(items, oldIndex, newIndex));
+    }
+    setActiveId(null);
+  };
+  return /* @__PURE__ */ jsx(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      children: /* @__PURE__ */ jsx("div", { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-[var(--color-border)]", children: [
+          /* @__PURE__ */ jsx("th", { className: "w-12" }),
+          columns.map((column) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              className: "text-left p-3 text-sm font-medium text-[var(--color-text-secondary)]",
+              children: column.header
+            },
+            column.key
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(SortableContext, { items, strategy: verticalListSortingStrategy, children: items.map((item) => /* @__PURE__ */ jsx(
+          TableRow,
+          {
+            item,
+            columns,
+            isDragging: item.id === activeId
+          },
+          item.id
+        )) }) })
+      ] }) })
+    }
+  );
+}
+function TableRow({ item, columns, isDragging }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable({ id: item.id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      ref: setNodeRef,
+      style,
+      className: cn(
+        "border-b border-[var(--color-border)] hover:bg-[var(--color-hover)]",
+        "transition-colors",
+        isDragging && "bg-[var(--color-active)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("td", { className: "p-3", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...attributes,
+            ...listeners,
+            className: "cursor-grab active:cursor-grabbing text-[var(--color-text-secondary)] hover:text-[var(--color-foreground)] transition-colors",
+            children: /* @__PURE__ */ jsx(GripVertical, { className: "w-4 h-4" })
+          }
+        ) }),
+        columns.map((column) => /* @__PURE__ */ jsx("td", { className: "p-3 text-sm", children: column.render ? column.render(item) : item[column.key] }, column.key))
+      ]
+    }
+  );
+}
+export {
+  DragDropHandle,
+  DragDropList,
+  DragDropTable
+};
+//# sourceMappingURL=dnd.mjs.map