react-dragdrop-kit 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Souvik Sen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,196 @@
+# react-dragdrop-kit
+
+A flexible and lightweight **drag-and-drop toolkit for React**. Build **sortable lists, grids, and boards** with a simple, fully-controlled API and customizable previews. Powered by Atlassian’s pragmatic drag-and-drop under the hood.
+
+<p>
+  <a href="https://www.npmjs.com/package/react-dragdrop-kit"><img alt="npm" src="https://img.shields.io/npm/v/react-dragdrop-kit.svg?label=react-dragdrop-kit"></a>
+  <a href="https://www.npmjs.com/package/react-dragdrop-kit"><img alt="downloads" src="https://img.shields.io/npm/dm/react-dragdrop-kit.svg"></a>
+  <a href="https://github.com/Yourstruggle11/react-dragdrop-kit"><img alt="license" src="https://img.shields.io/badge/license-MIT-blue.svg"></a>
+</p>
+
+---
+
+## ✨ Features
+
+- 🔁 **Sortable** (vertical / horizontal)
+- 🎯 **Controlled**: you own the array, update on `onReorder`
+- 🧩 **Custom render** per item (cards, compact, detailed… anything)
+- 🧲 **Drop indicator** + optional **custom drag preview**
+- 🧪 **TypeScript** types included
+- ⚡ Ships tiny bundles (only `dist/` published)
+
+---
+
+## 📦 Install
+
+```bash
+npm i react-dragdrop-kit
+# or
+yarn add react-dragdrop-kit
+# or
+pnpm add react-dragdrop-kit
+````
+
+
+## 🚀 Quick Start (Basic Example)
+
+```tsx
+// examples/basic-example.tsx
+
+import * as React from "react";
+import { DragDropList, type DraggableItem, type OrderUpdate } from "react-dragdrop-kit";
+
+interface TodoItem extends DraggableItem {
+  title: string;
+  completed: boolean;
+}
+
+const initial: TodoItem[] = [
+  { id: "1", position: 0, title: "Learn React", completed: false },
+  { id: "2", position: 1, title: "Build awesome app", completed: false },
+  { id: "3", position: 2, title: "Deploy to production", completed: false },
+];
+
+export default function BasicExample() {
+  const [todos, setTodos] = React.useState(initial);
+
+  const handleReorder = (next: TodoItem[], updates: OrderUpdate[]) => {
+    // keep positions normalized
+    setTodos(next.map((it, i) => ({ ...it, position: i })));
+    // optionally send `updates` to your API
+    // console.log("order updates", updates);
+  };
+
+  return (
+    <DragDropList
+      items={todos}
+      onReorder={handleReorder}
+      renderItem={(item) => (
+        <div style={{ padding: 12, border: "1px solid #e5e7eb", borderRadius: 8 }}>
+          <input
+            type="checkbox"
+            checked={item.completed}
+            onChange={() =>
+              setTodos((prev) =>
+                prev.map((t) => (t.id === item.id ? { ...t, completed: !t.completed } : t))
+              )
+            }
+          />
+          <span style={{ marginLeft: 8 }}>{item.title}</span>
+        </div>
+      )}
+      showDropIndicator
+      gap={8}
+    />
+  );
+}
+```
+
+---
+
+## 🎨 Styled Example (Tailwind)
+
+```tsx
+// examples/tailwind-example.tsx
+
+import * as React from "react";
+import { DragDropList } from "react-dragdrop-kit";
+
+export default function TailwindExample() {
+  const [items, setItems] = React.useState([
+    { id: "1", position: 0, name: "Dashboard", icon: "📊" },
+    { id: "2", position: 1, name: "Projects",  icon: "📁" },
+    { id: "3", position: 2, name: "Team",      icon: "👥" },
+    { id: "4", position: 3, name: "Calendar",  icon: "📅" },
+  ]);
+
+  return (
+    <DragDropList
+      items={items}
+      onReorder={(next) => setItems(next.map((it, i) => ({ ...it, position: i })))}
+      containerClassName="bg-gray-50 rounded-xl p-6 space-y-2"
+      itemClassName="bg-white rounded-lg shadow-sm hover:shadow-lg transition-all duration-200 cursor-move"
+      dragPreviewClassName="bg-blue-100 rounded-lg shadow-2xl"
+      showDropIndicator
+      dropIndicatorClassName="bg-blue-500"
+      renderItem={(item) => (
+        <div className="flex items-center p-4 space-x-3">
+          <span className="text-2xl">{item.icon}</span>
+          <span className="font-medium text-gray-700">{item.name}</span>
+          <div className="ml-auto">
+            <svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+            </svg>
+          </div>
+        </div>
+      )}
+    />
+  );
+}
+```
+
+---
+
+## 🧩 API
+
+### `<DragDropList />`
+
+| Prop                     | Type                                          | Default      | Description                                                                                            |
+| ------------------------ | --------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------ |
+| `items`                  | `Array<DraggableItem & T>`                    | —            | Items to render. Must include `{ id: string; position: number }`. You can extend with your own fields. |
+| `onReorder`              | `(next: T[], updates: OrderUpdate[]) => void` | —            | Called after drop. `next` is the new array; `updates` has id + newPosition.                            |
+| `renderItem`             | `(item: T) => React.ReactNode`                | —            | Custom renderer for each item.                                                                         |
+| `direction`              | `"vertical" \| "horizontal"`                  | `"vertical"` | Drag axis + layout.                                                                                    |
+| `gap`                    | `number`                                      | `0`          | Gap (px) between items.                                                                                |
+| `disabled`               | `boolean`                                     | `false`      | Disable dragging.                                                                                      |
+| `showDropIndicator`      | `boolean`                                     | `false`      | Show a drop indicator while dragging.                                                                  |
+| `dropIndicatorClassName` | `string`                                      | —            | CSS class applied to the drop indicator element.                                                       |
+| `dragPreviewStyle`       | `React.CSSProperties`                         | —            | Inline styles for custom drag preview.                                                                 |
+| `containerClassName`     | `string`                                      | —            | Class applied to the container.                                                                        |
+| `itemClassName`          | `string`                                      | —            | Class applied to each item wrapper.                                                                    |
+| `containerStyle`         | `React.CSSProperties`                         | —            | Inline styles for the container.                                                                       |
+| `itemStyle`              | `React.CSSProperties`                         | —            | Inline styles for each item wrapper.                                                                   |
+| `onDragStart`            | `(item: T, index: number) => void`            | —            | Optional callback when drag starts.                                                                    |
+| `onDragEnd`              | `(item: T, index: number) => void`            | —            | Optional callback when drag ends.                                                                      |
+
+#### Types
+
+```ts
+export type DraggableItem = {
+  id: string;
+  position: number; // 0-based
+};
+
+export type OrderUpdate = {
+  id: string;
+  newPosition: number;
+  // Extend in your app if you need: { oldPosition, moved }
+};
+```
+
+---
+
+## 🧠 Strict Mode (React 19)
+
+In dev, React Strict Mode **double-mounts** to surface side effects. If you see duplicate `onReorder` calls in development, ensure your event listeners clean up correctly and keep callback identities stable with `useCallback`. Production builds call once.
+
+---
+
+## 📚 More Examples
+
+This repo includes full examples:
+
+* [Basic Example](./examples/basic-example.tsx)
+* [Tailwind Example](./examples/tailwind-example.tsx)
+* [Material UI Example](./examples/material-ui-example.tsx)
+* [Horizontal Kanban](./examples/horizontal-kanban.tsx)
+* [Advanced Features](./examples/advanced-features.tsx)
+* [Styled Components Example](./examples/styled-components-example.tsx)
+
+👉 Explore the [`examples/`](./examples) folder for the complete code.
+
+---
+
+## 📝 License
+
+MIT © [Yourstruggle11](https://github.com/Yourstruggle11)

package/dist/components/DragDropList.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { DragDropListProps, DraggableItem } from "../types";
+export declare function DragDropList<T extends DraggableItem>({ items, onReorder, renderItem, containerClassName, containerStyle, itemClassName, itemStyle, dragPreviewClassName, dragPreviewStyle, onDragStart, onDragEnd, disabled, gap, direction, showDropIndicator, dropIndicatorClassName, dropIndicatorStyle, }: DragDropListProps<T>): React.JSX.Element;
+//# sourceMappingURL=DragDropList.d.ts.map

package/dist/components/DragDropList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropList.d.ts","sourceRoot":"","sources":["../../src/components/DragDropList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAIjE,wBAAgB,YAAY,CAAC,CAAC,SAAS,aAAa,EAAE,EACpD,KAAK,EACL,SAAS,EACT,UAAU,EACV,kBAAuB,EACvB,cAAmB,EACnB,aAAkB,EAClB,SAAc,EACd,oBAAyB,EACzB,gBAAqB,EACrB,WAAW,EACX,SAAS,EACT,QAAgB,EAChB,GAAG,EACH,SAAsB,EACtB,iBAAyB,EACzB,sBAA2B,EAC3B,kBAAuB,GACxB,EAAE,iBAAiB,CAAC,CAAC,CAAC,qBAwEtB"}

package/dist/components/DraggableItemWrapper.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { DraggableItemWrapperProps, DraggableItem } from "../types";
+export declare function DraggableItemWrapper<T extends DraggableItem>({ item, index, children, className, style, dragPreviewClassName, dragPreviewStyle, onDragStart, onDragEnd, disabled, showDropIndicator, dropIndicatorClassName, dropIndicatorStyle, }: DraggableItemWrapperProps<T>): React.JSX.Element;
+//# sourceMappingURL=DraggableItemWrapper.d.ts.map

package/dist/components/DraggableItemWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableItemWrapper.d.ts","sourceRoot":"","sources":["../../src/components/DraggableItemWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,OAAO,KAAK,EAAE,yBAAyB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAKzE,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,aAAa,EAAE,EAC5D,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAc,EACd,KAAU,EACV,oBAAyB,EACzB,gBAAqB,EACrB,WAAW,EACX,SAAS,EACT,QAAgB,EAChB,iBAAyB,EACzB,sBAA2B,EAC3B,kBAAuB,GACxB,EAAE,yBAAyB,CAAC,CAAC,CAAC,qBAoK9B"}

package/dist/hooks/useDragDropMonitor.d.ts

@@ -0,0 +1,7 @@
+import type { DraggableItem, OrderUpdate } from "../types";
+export declare function useDragDropMonitor<T extends DraggableItem>({ items, onReorder, disabled, }: {
+    items: T[];
+    onReorder: (newItems: T[], orderUpdates: OrderUpdate[]) => void;
+    disabled?: boolean;
+}): import("@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types").CleanupFn;
+//# sourceMappingURL=useDragDropMonitor.d.ts.map

package/dist/hooks/useDragDropMonitor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragDropMonitor.d.ts","sourceRoot":"","sources":["../../src/hooks/useDragDropMonitor.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE3D,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,aAAa,EAAE,EAC1D,KAAK,EACL,SAAS,EACT,QAAgB,GACjB,EAAE;IACD,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,mFA4DA"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { DragDropList } from './components/DragDropList';
+export { DraggableItemWrapper } from './components/DraggableItemWrapper';
+export { useDragDropMonitor } from './hooks/useDragDropMonitor';
+export * from './types';
+export { defaultStyles } from './styles/defaultStyles';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.esm.js

@@ -0,0 +1,2 @@
+import e,{useRef as t,useState as a,useCallback as r,useEffect as o}from"react";import{combine as i}from"@atlaskit/pragmatic-drag-and-drop/combine";import{draggable as n,dropTargetForElements as d,monitorForElements as s}from"@atlaskit/pragmatic-drag-and-drop/element/adapter";import{extractClosestEdge as l}from"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";const c={container:{default:{minHeight:"200px",transition:"all 0.2s ease",borderRadius:"8px",border:"1px solid #e2e8f0",backgroundColor:"#ffffff",display:"flex",flexDirection:"column",gap:"16px",padding:"16px"},dragging:{backgroundColor:"rgba(66, 153, 225, 0.05)",borderColor:"#3182ce"},horizontal:{flexDirection:"row",flexWrap:"wrap"}},item:{default:{transition:"all 0.2s ease",cursor:"grab",userSelect:"none",position:"relative"},dragging:{opacity:.5,cursor:"grabbing"},hover:{transform:"scale(1.02)",boxShadow:"0 4px 6px rgba(0, 0, 0, 0.1)"},disabled:{cursor:"not-allowed",opacity:.6}},preview:{position:"fixed",pointerEvents:"none",zIndex:9999,opacity:.8,transform:"rotate(2deg)",boxShadow:"0 10px 20px rgba(0, 0, 0, 0.15)"},dropIndicator:{position:"absolute",height:"2px",backgroundColor:"#3182ce",left:0,right:0,zIndex:10,transition:"all 0.2s ease"}},g="draggable-item";function p({item:s,index:l,children:p,className:m="",style:u={},dragPreviewClassName:b="",dragPreviewStyle:v={},onDragStart:f,onDragEnd:x,disabled:y=!1,showDropIndicator:D=!1,dropIndicatorClassName:h="",dropIndicatorStyle:j={}}){const O=t(null),[w,I]=a(!1),[S,N]=a(!1),[C,E]=a(null),k=r(e=>y?()=>{}:n({element:e,getInitialData:()=>({type:g,id:s.id,index:l}),onGenerateDragPreview:({nativeSetDragImage:t})=>{const a=e.cloneNode(!0),r=Object.assign(Object.assign({},c.preview),v);b&&(a.className=b),Object.assign(a.style,r,{width:`${(null==e?void 0:e.offsetWidth)||100}px`,height:`${(null==e?void 0:e.offsetHeight)||50}px`}),document.body.appendChild(a),t&&t(a,20,20),requestAnimationFrame(()=>a.remove())},onDragStart:()=>{I(!0),null==f||f(s,l)},onDrop:()=>{I(!1),null==x||x(s,l)}}),[s,l,b,v,f,x,y]),P=r(e=>y?()=>{}:d({element:e,getData:()=>({type:g,id:s.id,index:l}),canDrop:e=>{var t;return(null===(t=e.source.data)||void 0===t?void 0:t.type)===g},getIsSticky:()=>!0,onDragEnter:({source:e,self:t,location:a})=>{var r,o,i;if((null===(r=e.data)||void 0===r?void 0:r.id)!==(null===(o=t.data)||void 0===o?void 0:o.id)&&(N(!0),D)){const e=null===(i=a.current.dropTargets[0])||void 0===i?void 0:i.edge;E("top"===e?"top":"bottom")}},onDragLeave:()=>{N(!1),E(null)},onDrop:()=>{N(!1),E(null)}}),[s.id,l,y,D]);return o(()=>{const e=O.current;if(e)return e.setAttribute("data-index",l.toString()),y?()=>{}:i(k(e),P(e))},[l,k,P,y]),e.createElement("div",{ref:O,className:m,style:(()=>{const e=Object.assign({},c.item.default);return y?Object.assign(e,c.item.disabled):w?Object.assign(e,c.item.dragging):S&&Object.assign(e,c.item.hover),Object.assign(Object.assign({},e),u)})()},D&&"top"===C&&e.createElement("div",{className:h,style:Object.assign(Object.assign(Object.assign({},c.dropIndicator),j),{top:-1})}),p,D&&"bottom"===C&&e.createElement("div",{className:h,style:Object.assign(Object.assign(Object.assign({},c.dropIndicator),j),{bottom:-1})}))}function m({items:e,onReorder:t,disabled:a=!1}){if(a)return()=>{};return s({onDrop:({location:a,source:r})=>{var o;const i=null===(o=r.data)||void 0===o?void 0:o.index;if(void 0===i)return;const{dropTargets:n}=a.current,d=n.find(e=>{var t,a,o;return"draggable-item"===(null===(t=e.data)||void 0===t?void 0:t.type)&&(null===(a=e.data)||void 0===a?void 0:a.id)!==(null===(o=r.data)||void 0===o?void 0:o.id)});if(!d)return;const s=l(d),c=Number(d.element.getAttribute("data-index")),g="bottom"===s?c+1:c;if(i!==g){const a=[...e],r=((e,t,a)=>{const r=Array.from(e),[o]=r.splice(t,1);return r.splice(a,0,o),r})(e,i,g),o=((e,t)=>{const a=t.filter((t,a)=>{var r;return t.id!==(null===(r=e[a])||void 0===r?void 0:r.id)}),r=a.slice().sort((e,t)=>e.position-t.position).map(e=>e.position);return a.map((e,t)=>({id:e.id,newPosition:r[t]}))})(a,r);t(r,o)}}})}function u({items:n,onReorder:s,renderItem:l,containerClassName:g="",containerStyle:u={},itemClassName:b="",itemStyle:v={},dragPreviewClassName:f="",dragPreviewStyle:x={},onDragStart:y,onDragEnd:D,disabled:h=!1,gap:j,direction:O="vertical",showDropIndicator:w=!1,dropIndicatorClassName:I="",dropIndicatorStyle:S={}}){const N=t(null),C=m({items:n,onReorder:s,disabled:h}),[E,k]=a(!1),P=r(e=>h?()=>{}:d({element:e,getData:()=>({type:"container"}),onDragEnter:()=>k(!0),onDragLeave:()=>k(!1),onDrop:()=>k(!1)}),[h]);return o(()=>{const e=N.current;if(e&&!h)return i(P(e),C)},[P,C,h]),e.createElement("div",{ref:N,className:g,style:(()=>{const e=Object.assign({},c.container.default);return"horizontal"===O&&Object.assign(e,c.container.horizontal),E&&Object.assign(e,c.container.dragging),void 0!==j&&(e.gap="number"==typeof j?`${j}px`:j),Object.assign(Object.assign({},e),u)})()},n.map((t,a)=>e.createElement(p,{key:t.id,item:t,index:a,className:b,style:v,dragPreviewClassName:f,dragPreviewStyle:x,onDragStart:y,onDragEnd:D,disabled:h,showDropIndicator:w,dropIndicatorClassName:I,dropIndicatorStyle:S},l(t,a))))}export{u as DragDropList,p as DraggableItemWrapper,c as defaultStyles,m as useDragDropMonitor};
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/styles/defaultStyles.ts","../src/components/DraggableItemWrapper.tsx","../src/hooks/useDragDropMonitor.ts","../src/components/DragDropList.tsx"],"sourcesContent":["export const defaultStyles = {\r\n  container: {\r\n    default: {\r\n      minHeight: \"200px\",\r\n      transition: \"all 0.2s ease\",\r\n      borderRadius: \"8px\",\r\n      border: \"1px solid #e2e8f0\",\r\n      backgroundColor: \"#ffffff\",\r\n      display: \"flex\",\r\n      flexDirection: \"column\" as const,\r\n      gap: \"16px\",\r\n      padding: \"16px\",\r\n    },\r\n    dragging: {\r\n      backgroundColor: \"rgba(66, 153, 225, 0.05)\",\r\n      borderColor: \"#3182ce\",\r\n    },\r\n    horizontal: {\r\n      flexDirection: \"row\" as const,\r\n      flexWrap: \"wrap\" as const,\r\n    },\r\n  },\r\n  item: {\r\n    default: {\r\n      transition: \"all 0.2s ease\",\r\n      cursor: \"grab\",\r\n      userSelect: \"none\" as const,\r\n      position: \"relative\" as const,\r\n    },\r\n    dragging: {\r\n      opacity: 0.5,\r\n      cursor: \"grabbing\",\r\n    },\r\n    hover: {\r\n      transform: \"scale(1.02)\",\r\n      boxShadow: \"0 4px 6px rgba(0, 0, 0, 0.1)\",\r\n    },\r\n    disabled: {\r\n      cursor: \"not-allowed\",\r\n      opacity: 0.6,\r\n    },\r\n  },\r\n  preview: {\r\n    position: \"fixed\" as const,\r\n    pointerEvents: \"none\" as const,\r\n    zIndex: 9999,\r\n    opacity: 0.8,\r\n    transform: \"rotate(2deg)\",\r\n    boxShadow: \"0 10px 20px rgba(0, 0, 0, 0.15)\",\r\n  },\r\n  dropIndicator: {\r\n    position: \"absolute\" as const,\r\n    height: \"2px\",\r\n    backgroundColor: \"#3182ce\",\r\n    left: 0,\r\n    right: 0,\r\n    zIndex: 10,\r\n    transition: \"all 0.2s ease\",\r\n  },\r\n};\r\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\r\nimport { combine } from \"@atlaskit/pragmatic-drag-and-drop/combine\";\r\nimport {\r\n  draggable,\r\n  dropTargetForElements,\r\n} from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\r\nimport type { DraggableItemWrapperProps, DraggableItem } from \"../types\";\r\nimport { defaultStyles } from \"../styles/defaultStyles\";\r\n\r\nconst DRAGGABLE_ITEM = \"draggable-item\";\r\n\r\nexport function DraggableItemWrapper<T extends DraggableItem>({\r\n  item,\r\n  index,\r\n  children,\r\n  className = \"\",\r\n  style = {},\r\n  dragPreviewClassName = \"\",\r\n  dragPreviewStyle = {},\r\n  onDragStart,\r\n  onDragEnd,\r\n  disabled = false,\r\n  showDropIndicator = false,\r\n  dropIndicatorClassName = \"\",\r\n  dropIndicatorStyle = {},\r\n}: DraggableItemWrapperProps<T>) {\r\n  const elementRef = useRef<HTMLDivElement>(null);\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  const [dropPosition, setDropPosition] = useState<\"top\" | \"bottom\" | null>(\r\n    null\r\n  );\r\n\r\n  const getItemStyles = (): React.CSSProperties => {\r\n    const baseStyle = { ...defaultStyles.item.default };\r\n\r\n    if (disabled) {\r\n      Object.assign(baseStyle, defaultStyles.item.disabled);\r\n    } else if (isDragging) {\r\n      Object.assign(baseStyle, defaultStyles.item.dragging);\r\n    } else if (isHovered) {\r\n      Object.assign(baseStyle, defaultStyles.item.hover);\r\n    }\r\n\r\n    return { ...baseStyle, ...style };\r\n  };\r\n\r\n  const getPreviewStyles = (): React.CSSProperties => {\r\n    return { ...defaultStyles.preview, ...dragPreviewStyle };\r\n  };\r\n\r\n  const createDraggable = useCallback(\r\n    (element: HTMLElement) => {\r\n      if (disabled) return () => {};\r\n\r\n      return draggable({\r\n        element,\r\n        getInitialData: () => ({\r\n          type: DRAGGABLE_ITEM,\r\n          id: item.id,\r\n          index,\r\n        }),\r\n        onGenerateDragPreview: ({ nativeSetDragImage }) => {\r\n          const previewElement = element.cloneNode(true) as HTMLElement;\r\n          const previewStyles = getPreviewStyles();\r\n\r\n          // Apply custom preview class if provided\r\n          if (dragPreviewClassName) {\r\n            previewElement.className = dragPreviewClassName;\r\n          }\r\n\r\n          Object.assign(previewElement.style, previewStyles, {\r\n            width: `${element?.offsetWidth || 100}px`,\r\n            height: `${element?.offsetHeight || 50}px`,\r\n          });\r\n\r\n          document.body.appendChild(previewElement);\r\n          if (nativeSetDragImage) {\r\n            nativeSetDragImage(previewElement, 20, 20);\r\n          }\r\n          requestAnimationFrame(() => previewElement.remove());\r\n        },\r\n        onDragStart: () => {\r\n          setIsDragging(true);\r\n          onDragStart?.(item, index);\r\n        },\r\n        onDrop: () => {\r\n          setIsDragging(false);\r\n          onDragEnd?.(item, index);\r\n        },\r\n      });\r\n    },\r\n    [\r\n      item,\r\n      index,\r\n      dragPreviewClassName,\r\n      dragPreviewStyle,\r\n      onDragStart,\r\n      onDragEnd,\r\n      disabled,\r\n    ]\r\n  );\r\n\r\n  const createDropTarget = useCallback(\r\n    (element: HTMLElement) => {\r\n      if (disabled) return () => {};\r\n\r\n      return dropTargetForElements({\r\n        element,\r\n        getData: () => ({\r\n          type: DRAGGABLE_ITEM,\r\n          id: item.id,\r\n          index,\r\n        }),\r\n        canDrop: (args: any) => args.source.data?.type === DRAGGABLE_ITEM,\r\n        getIsSticky: () => true,\r\n        onDragEnter: ({ source, self, location }: any) => {\r\n          if (source.data?.id !== self.data?.id) {\r\n            setIsHovered(true);\r\n            if (showDropIndicator) {\r\n              const edge = location.current.dropTargets[0]?.edge;\r\n              setDropPosition(edge === \"top\" ? \"top\" : \"bottom\");\r\n            }\r\n          }\r\n        },\r\n        onDragLeave: () => {\r\n          setIsHovered(false);\r\n          setDropPosition(null);\r\n        },\r\n        onDrop: () => {\r\n          setIsHovered(false);\r\n          setDropPosition(null);\r\n        },\r\n      });\r\n    },\r\n    [item.id, index, disabled, showDropIndicator]\r\n  );\r\n\r\n//   useEffect(() => {\r\n//     const element = elementRef.current;\r\n//     if (!element) return;\r\n\r\n//     element.setAttribute(\"data-index\", index.toString());\r\n\r\n//     if (!disabled) {\r\n//       return combine(createDraggable(element), createDropTarget(element));\r\n//     }\r\n//   }, [index, createDraggable, createDropTarget, disabled]);\r\n\r\n  useEffect(() => {\r\n    const element = elementRef.current;\r\n    if (!element) return;\r\n\r\n    element.setAttribute(\"data-index\", index.toString());\r\n\r\n    if (disabled) {\r\n      // provide a no-op cleanup to satisfy all code paths\r\n      return () => {};\r\n    }\r\n\r\n    // normal draggable + droptarget setup\r\n    return combine(createDraggable(element), createDropTarget(element));\r\n  }, [index, createDraggable, createDropTarget, disabled]);\r\n\r\n  return (\r\n    <div ref={elementRef} className={className} style={getItemStyles()}>\r\n      {showDropIndicator && dropPosition === \"top\" && (\r\n        <div\r\n          className={dropIndicatorClassName}\r\n          style={{\r\n            ...defaultStyles.dropIndicator,\r\n            ...dropIndicatorStyle,\r\n            top: -1,\r\n          }}\r\n        />\r\n      )}\r\n      {children}\r\n      {showDropIndicator && dropPosition === \"bottom\" && (\r\n        <div\r\n          className={dropIndicatorClassName}\r\n          style={{\r\n            ...defaultStyles.dropIndicator,\r\n            ...dropIndicatorStyle,\r\n            bottom: -1,\r\n          }}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n","import { monitorForElements } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\r\nimport { extractClosestEdge } from \"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge\";\r\nimport type { DraggableItem, OrderUpdate } from \"../types\";\r\n\r\nexport function useDragDropMonitor<T extends DraggableItem>({\r\n  items,\r\n  onReorder,\r\n  disabled = false,\r\n}: {\r\n  items: T[];\r\n  onReorder: (newItems: T[], orderUpdates: OrderUpdate[]) => void;\r\n  disabled?: boolean;\r\n}) {\r\n  if (disabled) {\r\n    return () => {};\r\n  }\r\n\r\n  const reorder = (list: T[], startIndex: number, endIndex: number) => {\r\n    const result = Array.from(list);\r\n    const [removed] = result.splice(startIndex, 1);\r\n    result.splice(endIndex, 0, removed);\r\n    return result;\r\n  };\r\n\r\n  const calculateOrderUpdates = (\r\n    oldItems: T[],\r\n    newItems: T[]\r\n  ): OrderUpdate[] => {\r\n    const affectedItems = newItems.filter(\r\n      (item, index) => item.id !== oldItems[index]?.id\r\n    );\r\n    const orderList = affectedItems\r\n      .slice()\r\n      .sort((a, b) => a.position - b.position)\r\n      .map((item) => item.position);\r\n\r\n    return affectedItems.map((item, index) => ({\r\n      id: item.id,\r\n      newPosition: orderList[index],\r\n    }));\r\n  };\r\n\r\n  const handleDrop = ({ location, source }: any) => {\r\n    const sourceIndex = source.data?.index as number;\r\n    if (sourceIndex === undefined) return;\r\n\r\n    const { dropTargets } = location.current;\r\n    const destinationTarget = dropTargets.find(\r\n      (target: any) =>\r\n        target.data?.type === \"draggable-item\" &&\r\n        target.data?.id !== source.data?.id\r\n    );\r\n\r\n    if (!destinationTarget) return;\r\n\r\n    const edge = extractClosestEdge(destinationTarget);\r\n    const targetIndex = Number(\r\n      destinationTarget.element.getAttribute(\"data-index\")\r\n    );\r\n    const destinationIndex = edge === \"bottom\" ? targetIndex + 1 : targetIndex;\r\n\r\n    if (sourceIndex !== destinationIndex) {\r\n      const oldItems = [...items];\r\n      const newItems = reorder(items, sourceIndex, destinationIndex);\r\n      const orderUpdates = calculateOrderUpdates(oldItems, newItems);\r\n      onReorder(newItems, orderUpdates);\r\n    }\r\n  };\r\n\r\n  return monitorForElements({\r\n    onDrop: handleDrop,\r\n  });\r\n}\r\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\r\nimport { combine } from \"@atlaskit/pragmatic-drag-and-drop/combine\";\r\nimport { dropTargetForElements } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\r\nimport { DraggableItemWrapper } from \"./DraggableItemWrapper\";\r\nimport type { DragDropListProps, DraggableItem } from \"../types\";\r\nimport { useDragDropMonitor } from \"../hooks/useDragDropMonitor\";\r\nimport { defaultStyles } from \"../styles/defaultStyles\";\r\n\r\nexport function DragDropList<T extends DraggableItem>({\r\n  items,\r\n  onReorder,\r\n  renderItem,\r\n  containerClassName = \"\",\r\n  containerStyle = {},\r\n  itemClassName = \"\",\r\n  itemStyle = {},\r\n  dragPreviewClassName = \"\",\r\n  dragPreviewStyle = {},\r\n  onDragStart,\r\n  onDragEnd,\r\n  disabled = false,\r\n  gap,\r\n  direction = \"vertical\",\r\n  showDropIndicator = false,\r\n  dropIndicatorClassName = \"\",\r\n  dropIndicatorStyle = {},\r\n}: DragDropListProps<T>) {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const monitor = useDragDropMonitor({ items, onReorder, disabled });\r\n  const [isDraggingOver, setIsDraggingOver] = useState(false);\r\n\r\n  const getContainerStyles = (): React.CSSProperties => {\r\n    const baseStyle = { ...defaultStyles.container.default };\r\n\r\n    if (direction === \"horizontal\") {\r\n      Object.assign(baseStyle, defaultStyles.container.horizontal);\r\n    }\r\n\r\n    if (isDraggingOver) {\r\n      Object.assign(baseStyle, defaultStyles.container.dragging);\r\n    }\r\n\r\n    if (gap !== undefined) {\r\n      baseStyle.gap = typeof gap === \"number\" ? `${gap}px` : gap;\r\n    }\r\n\r\n    return { ...baseStyle, ...containerStyle };\r\n  };\r\n\r\n  const createDropTarget = useCallback(\r\n    (element: HTMLElement) => {\r\n      if (disabled) return () => {};\r\n\r\n      return dropTargetForElements({\r\n        element,\r\n        getData: () => ({ type: \"container\" }),\r\n        onDragEnter: () => setIsDraggingOver(true),\r\n        onDragLeave: () => setIsDraggingOver(false),\r\n        onDrop: () => setIsDraggingOver(false),\r\n      });\r\n    },\r\n    [disabled]\r\n  );\r\n\r\n  useEffect(() => {\r\n    const element = containerRef.current;\r\n    if (!element || disabled) return;\r\n\r\n    return combine(createDropTarget(element), monitor);\r\n  }, [createDropTarget, monitor, disabled]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={containerClassName}\r\n      style={getContainerStyles()}\r\n    >\r\n      {items.map((item, index) => (\r\n        <DraggableItemWrapper\r\n          key={item.id}\r\n          item={item}\r\n          index={index}\r\n          className={itemClassName}\r\n          style={itemStyle}\r\n          dragPreviewClassName={dragPreviewClassName}\r\n          dragPreviewStyle={dragPreviewStyle}\r\n          onDragStart={onDragStart}\r\n          onDragEnd={onDragEnd}\r\n          disabled={disabled}\r\n          showDropIndicator={showDropIndicator}\r\n          dropIndicatorClassName={dropIndicatorClassName}\r\n          dropIndicatorStyle={dropIndicatorStyle}\r\n        >\r\n          {renderItem(item, index)}\r\n        </DraggableItemWrapper>\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["defaultStyles","container","default","minHeight","transition","borderRadius","border","backgroundColor","display","flexDirection","gap","padding","dragging","borderColor","horizontal","flexWrap","item","cursor","userSelect","position","opacity","hover","transform","boxShadow","disabled","preview","pointerEvents","zIndex","dropIndicator","height","left","right","DRAGGABLE_ITEM","DraggableItemWrapper","index","children","className","style","dragPreviewClassName","dragPreviewStyle","onDragStart","onDragEnd","showDropIndicator","dropIndicatorClassName","dropIndicatorStyle","elementRef","useRef","isDragging","setIsDragging","useState","isHovered","setIsHovered","dropPosition","setDropPosition","createDraggable","useCallback","element","draggable","getInitialData","type","id","onGenerateDragPreview","nativeSetDragImage","previewElement","cloneNode","previewStyles","Object","assign","width","offsetWidth","offsetHeight","document","body","appendChild","requestAnimationFrame","remove","onDrop","createDropTarget","dropTargetForElements","getData","canDrop","args","_a","source","data","getIsSticky","onDragEnter","self","location","_b","edge","_c","current","dropTargets","onDragLeave","useEffect","setAttribute","toString","combine","React","createElement","ref","baseStyle","getItemStyles","top","bottom","useDragDropMonitor","items","onReorder","monitorForElements","sourceIndex","undefined","destinationTarget","find","target","extractClosestEdge","targetIndex","Number","getAttribute","destinationIndex","oldItems","newItems","list","startIndex","endIndex","result","Array","from","removed","splice","reorder","orderUpdates","affectedItems","filter","orderList","slice","sort","a","b","map","newPosition","calculateOrderUpdates","DragDropList","renderItem","containerClassName","containerStyle","itemClassName","itemStyle","direction","containerRef","monitor","isDraggingOver","setIsDraggingOver","getContainerStyles","key"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),t=require("@atlaskit/pragmatic-drag-and-drop/combine"),a=require("@atlaskit/pragmatic-drag-and-drop/element/adapter"),r=require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");const o={container:{default:{minHeight:"200px",transition:"all 0.2s ease",borderRadius:"8px",border:"1px solid #e2e8f0",backgroundColor:"#ffffff",display:"flex",flexDirection:"column",gap:"16px",padding:"16px"},dragging:{backgroundColor:"rgba(66, 153, 225, 0.05)",borderColor:"#3182ce"},horizontal:{flexDirection:"row",flexWrap:"wrap"}},item:{default:{transition:"all 0.2s ease",cursor:"grab",userSelect:"none",position:"relative"},dragging:{opacity:.5,cursor:"grabbing"},hover:{transform:"scale(1.02)",boxShadow:"0 4px 6px rgba(0, 0, 0, 0.1)"},disabled:{cursor:"not-allowed",opacity:.6}},preview:{position:"fixed",pointerEvents:"none",zIndex:9999,opacity:.8,transform:"rotate(2deg)",boxShadow:"0 10px 20px rgba(0, 0, 0, 0.15)"},dropIndicator:{position:"absolute",height:"2px",backgroundColor:"#3182ce",left:0,right:0,zIndex:10,transition:"all 0.2s ease"}},i="draggable-item";function n({item:r,index:n,children:s,className:d="",style:l={},dragPreviewClassName:c="",dragPreviewStyle:g={},onDragStart:p,onDragEnd:u,disabled:m=!1,showDropIndicator:b=!1,dropIndicatorClassName:v="",dropIndicatorStyle:f={}}){const x=e.useRef(null),[D,y]=e.useState(!1),[S,h]=e.useState(!1),[j,O]=e.useState(null),w=e.useCallback(e=>m?()=>{}:a.draggable({element:e,getInitialData:()=>({type:i,id:r.id,index:n}),onGenerateDragPreview:({nativeSetDragImage:t})=>{const a=e.cloneNode(!0),r=Object.assign(Object.assign({},o.preview),g);c&&(a.className=c),Object.assign(a.style,r,{width:`${(null==e?void 0:e.offsetWidth)||100}px`,height:`${(null==e?void 0:e.offsetHeight)||50}px`}),document.body.appendChild(a),t&&t(a,20,20),requestAnimationFrame(()=>a.remove())},onDragStart:()=>{y(!0),null==p||p(r,n)},onDrop:()=>{y(!1),null==u||u(r,n)}}),[r,n,c,g,p,u,m]),I=e.useCallback(e=>m?()=>{}:a.dropTargetForElements({element:e,getData:()=>({type:i,id:r.id,index:n}),canDrop:e=>{var t;return(null===(t=e.source.data)||void 0===t?void 0:t.type)===i},getIsSticky:()=>!0,onDragEnter:({source:e,self:t,location:a})=>{var r,o,i;if((null===(r=e.data)||void 0===r?void 0:r.id)!==(null===(o=t.data)||void 0===o?void 0:o.id)&&(h(!0),b)){const e=null===(i=a.current.dropTargets[0])||void 0===i?void 0:i.edge;O("top"===e?"top":"bottom")}},onDragLeave:()=>{h(!1),O(null)},onDrop:()=>{h(!1),O(null)}}),[r.id,n,m,b]);return e.useEffect(()=>{const e=x.current;if(e)return e.setAttribute("data-index",n.toString()),m?()=>{}:t.combine(w(e),I(e))},[n,w,I,m]),e.createElement("div",{ref:x,className:d,style:(()=>{const e=Object.assign({},o.item.default);return m?Object.assign(e,o.item.disabled):D?Object.assign(e,o.item.dragging):S&&Object.assign(e,o.item.hover),Object.assign(Object.assign({},e),l)})()},b&&"top"===j&&e.createElement("div",{className:v,style:Object.assign(Object.assign(Object.assign({},o.dropIndicator),f),{top:-1})}),s,b&&"bottom"===j&&e.createElement("div",{className:v,style:Object.assign(Object.assign(Object.assign({},o.dropIndicator),f),{bottom:-1})}))}function s({items:e,onReorder:t,disabled:o=!1}){if(o)return()=>{};return a.monitorForElements({onDrop:({location:a,source:o})=>{var i;const n=null===(i=o.data)||void 0===i?void 0:i.index;if(void 0===n)return;const{dropTargets:s}=a.current,d=s.find(e=>{var t,a,r;return"draggable-item"===(null===(t=e.data)||void 0===t?void 0:t.type)&&(null===(a=e.data)||void 0===a?void 0:a.id)!==(null===(r=o.data)||void 0===r?void 0:r.id)});if(!d)return;const l=r.extractClosestEdge(d),c=Number(d.element.getAttribute("data-index")),g="bottom"===l?c+1:c;if(n!==g){const a=[...e],r=((e,t,a)=>{const r=Array.from(e),[o]=r.splice(t,1);return r.splice(a,0,o),r})(e,n,g),o=((e,t)=>{const a=t.filter((t,a)=>{var r;return t.id!==(null===(r=e[a])||void 0===r?void 0:r.id)}),r=a.slice().sort((e,t)=>e.position-t.position).map(e=>e.position);return a.map((e,t)=>({id:e.id,newPosition:r[t]}))})(a,r);t(r,o)}}})}exports.DragDropList=function({items:r,onReorder:i,renderItem:d,containerClassName:l="",containerStyle:c={},itemClassName:g="",itemStyle:p={},dragPreviewClassName:u="",dragPreviewStyle:m={},onDragStart:b,onDragEnd:v,disabled:f=!1,gap:x,direction:D="vertical",showDropIndicator:y=!1,dropIndicatorClassName:S="",dropIndicatorStyle:h={}}){const j=e.useRef(null),O=s({items:r,onReorder:i,disabled:f}),[w,I]=e.useState(!1),C=e.useCallback(e=>f?()=>{}:a.dropTargetForElements({element:e,getData:()=>({type:"container"}),onDragEnter:()=>I(!0),onDragLeave:()=>I(!1),onDrop:()=>I(!1)}),[f]);return e.useEffect(()=>{const e=j.current;if(e&&!f)return t.combine(C(e),O)},[C,O,f]),e.createElement("div",{ref:j,className:l,style:(()=>{const e=Object.assign({},o.container.default);return"horizontal"===D&&Object.assign(e,o.container.horizontal),w&&Object.assign(e,o.container.dragging),void 0!==x&&(e.gap="number"==typeof x?`${x}px`:x),Object.assign(Object.assign({},e),c)})()},r.map((t,a)=>e.createElement(n,{key:t.id,item:t,index:a,className:g,style:p,dragPreviewClassName:u,dragPreviewStyle:m,onDragStart:b,onDragEnd:v,disabled:f,showDropIndicator:y,dropIndicatorClassName:S,dropIndicatorStyle:h},d(t,a))))},exports.DraggableItemWrapper=n,exports.defaultStyles=o,exports.useDragDropMonitor=s;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/styles/defaultStyles.ts","../src/components/DraggableItemWrapper.tsx","../src/hooks/useDragDropMonitor.ts","../src/components/DragDropList.tsx"],"sourcesContent":["export const defaultStyles = {\r\n  container: {\r\n    default: {\r\n      minHeight: \"200px\",\r\n      transition: \"all 0.2s ease\",\r\n      borderRadius: \"8px\",\r\n      border: \"1px solid #e2e8f0\",\r\n      backgroundColor: \"#ffffff\",\r\n      display: \"flex\",\r\n      flexDirection: \"column\" as const,\r\n      gap: \"16px\",\r\n      padding: \"16px\",\r\n    },\r\n    dragging: {\r\n      backgroundColor: \"rgba(66, 153, 225, 0.05)\",\r\n      borderColor: \"#3182ce\",\r\n    },\r\n    horizontal: {\r\n      flexDirection: \"row\" as const,\r\n      flexWrap: \"wrap\" as const,\r\n    },\r\n  },\r\n  item: {\r\n    default: {\r\n      transition: \"all 0.2s ease\",\r\n      cursor: \"grab\",\r\n      userSelect: \"none\" as const,\r\n      position: \"relative\" as const,\r\n    },\r\n    dragging: {\r\n      opacity: 0.5,\r\n      cursor: \"grabbing\",\r\n    },\r\n    hover: {\r\n      transform: \"scale(1.02)\",\r\n      boxShadow: \"0 4px 6px rgba(0, 0, 0, 0.1)\",\r\n    },\r\n    disabled: {\r\n      cursor: \"not-allowed\",\r\n      opacity: 0.6,\r\n    },\r\n  },\r\n  preview: {\r\n    position: \"fixed\" as const,\r\n    pointerEvents: \"none\" as const,\r\n    zIndex: 9999,\r\n    opacity: 0.8,\r\n    transform: \"rotate(2deg)\",\r\n    boxShadow: \"0 10px 20px rgba(0, 0, 0, 0.15)\",\r\n  },\r\n  dropIndicator: {\r\n    position: \"absolute\" as const,\r\n    height: \"2px\",\r\n    backgroundColor: \"#3182ce\",\r\n    left: 0,\r\n    right: 0,\r\n    zIndex: 10,\r\n    transition: \"all 0.2s ease\",\r\n  },\r\n};\r\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\r\nimport { combine } from \"@atlaskit/pragmatic-drag-and-drop/combine\";\r\nimport {\r\n  draggable,\r\n  dropTargetForElements,\r\n} from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\r\nimport type { DraggableItemWrapperProps, DraggableItem } from \"../types\";\r\nimport { defaultStyles } from \"../styles/defaultStyles\";\r\n\r\nconst DRAGGABLE_ITEM = \"draggable-item\";\r\n\r\nexport function DraggableItemWrapper<T extends DraggableItem>({\r\n  item,\r\n  index,\r\n  children,\r\n  className = \"\",\r\n  style = {},\r\n  dragPreviewClassName = \"\",\r\n  dragPreviewStyle = {},\r\n  onDragStart,\r\n  onDragEnd,\r\n  disabled = false,\r\n  showDropIndicator = false,\r\n  dropIndicatorClassName = \"\",\r\n  dropIndicatorStyle = {},\r\n}: DraggableItemWrapperProps<T>) {\r\n  const elementRef = useRef<HTMLDivElement>(null);\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  const [dropPosition, setDropPosition] = useState<\"top\" | \"bottom\" | null>(\r\n    null\r\n  );\r\n\r\n  const getItemStyles = (): React.CSSProperties => {\r\n    const baseStyle = { ...defaultStyles.item.default };\r\n\r\n    if (disabled) {\r\n      Object.assign(baseStyle, defaultStyles.item.disabled);\r\n    } else if (isDragging) {\r\n      Object.assign(baseStyle, defaultStyles.item.dragging);\r\n    } else if (isHovered) {\r\n      Object.assign(baseStyle, defaultStyles.item.hover);\r\n    }\r\n\r\n    return { ...baseStyle, ...style };\r\n  };\r\n\r\n  const getPreviewStyles = (): React.CSSProperties => {\r\n    return { ...defaultStyles.preview, ...dragPreviewStyle };\r\n  };\r\n\r\n  const createDraggable = useCallback(\r\n    (element: HTMLElement) => {\r\n      if (disabled) return () => {};\r\n\r\n      return draggable({\r\n        element,\r\n        getInitialData: () => ({\r\n          type: DRAGGABLE_ITEM,\r\n          id: item.id,\r\n          index,\r\n        }),\r\n        onGenerateDragPreview: ({ nativeSetDragImage }) => {\r\n          const previewElement = element.cloneNode(true) as HTMLElement;\r\n          const previewStyles = getPreviewStyles();\r\n\r\n          // Apply custom preview class if provided\r\n          if (dragPreviewClassName) {\r\n            previewElement.className = dragPreviewClassName;\r\n          }\r\n\r\n          Object.assign(previewElement.style, previewStyles, {\r\n            width: `${element?.offsetWidth || 100}px`,\r\n            height: `${element?.offsetHeight || 50}px`,\r\n          });\r\n\r\n          document.body.appendChild(previewElement);\r\n          if (nativeSetDragImage) {\r\n            nativeSetDragImage(previewElement, 20, 20);\r\n          }\r\n          requestAnimationFrame(() => previewElement.remove());\r\n        },\r\n        onDragStart: () => {\r\n          setIsDragging(true);\r\n          onDragStart?.(item, index);\r\n        },\r\n        onDrop: () => {\r\n          setIsDragging(false);\r\n          onDragEnd?.(item, index);\r\n        },\r\n      });\r\n    },\r\n    [\r\n      item,\r\n      index,\r\n      dragPreviewClassName,\r\n      dragPreviewStyle,\r\n      onDragStart,\r\n      onDragEnd,\r\n      disabled,\r\n    ]\r\n  );\r\n\r\n  const createDropTarget = useCallback(\r\n    (element: HTMLElement) => {\r\n      if (disabled) return () => {};\r\n\r\n      return dropTargetForElements({\r\n        element,\r\n        getData: () => ({\r\n          type: DRAGGABLE_ITEM,\r\n          id: item.id,\r\n          index,\r\n        }),\r\n        canDrop: (args: any) => args.source.data?.type === DRAGGABLE_ITEM,\r\n        getIsSticky: () => true,\r\n        onDragEnter: ({ source, self, location }: any) => {\r\n          if (source.data?.id !== self.data?.id) {\r\n            setIsHovered(true);\r\n            if (showDropIndicator) {\r\n              const edge = location.current.dropTargets[0]?.edge;\r\n              setDropPosition(edge === \"top\" ? \"top\" : \"bottom\");\r\n            }\r\n          }\r\n        },\r\n        onDragLeave: () => {\r\n          setIsHovered(false);\r\n          setDropPosition(null);\r\n        },\r\n        onDrop: () => {\r\n          setIsHovered(false);\r\n          setDropPosition(null);\r\n        },\r\n      });\r\n    },\r\n    [item.id, index, disabled, showDropIndicator]\r\n  );\r\n\r\n//   useEffect(() => {\r\n//     const element = elementRef.current;\r\n//     if (!element) return;\r\n\r\n//     element.setAttribute(\"data-index\", index.toString());\r\n\r\n//     if (!disabled) {\r\n//       return combine(createDraggable(element), createDropTarget(element));\r\n//     }\r\n//   }, [index, createDraggable, createDropTarget, disabled]);\r\n\r\n  useEffect(() => {\r\n    const element = elementRef.current;\r\n    if (!element) return;\r\n\r\n    element.setAttribute(\"data-index\", index.toString());\r\n\r\n    if (disabled) {\r\n      // provide a no-op cleanup to satisfy all code paths\r\n      return () => {};\r\n    }\r\n\r\n    // normal draggable + droptarget setup\r\n    return combine(createDraggable(element), createDropTarget(element));\r\n  }, [index, createDraggable, createDropTarget, disabled]);\r\n\r\n  return (\r\n    <div ref={elementRef} className={className} style={getItemStyles()}>\r\n      {showDropIndicator && dropPosition === \"top\" && (\r\n        <div\r\n          className={dropIndicatorClassName}\r\n          style={{\r\n            ...defaultStyles.dropIndicator,\r\n            ...dropIndicatorStyle,\r\n            top: -1,\r\n          }}\r\n        />\r\n      )}\r\n      {children}\r\n      {showDropIndicator && dropPosition === \"bottom\" && (\r\n        <div\r\n          className={dropIndicatorClassName}\r\n          style={{\r\n            ...defaultStyles.dropIndicator,\r\n            ...dropIndicatorStyle,\r\n            bottom: -1,\r\n          }}\r\n        />\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n","import { monitorForElements } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\r\nimport { extractClosestEdge } from \"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge\";\r\nimport type { DraggableItem, OrderUpdate } from \"../types\";\r\n\r\nexport function useDragDropMonitor<T extends DraggableItem>({\r\n  items,\r\n  onReorder,\r\n  disabled = false,\r\n}: {\r\n  items: T[];\r\n  onReorder: (newItems: T[], orderUpdates: OrderUpdate[]) => void;\r\n  disabled?: boolean;\r\n}) {\r\n  if (disabled) {\r\n    return () => {};\r\n  }\r\n\r\n  const reorder = (list: T[], startIndex: number, endIndex: number) => {\r\n    const result = Array.from(list);\r\n    const [removed] = result.splice(startIndex, 1);\r\n    result.splice(endIndex, 0, removed);\r\n    return result;\r\n  };\r\n\r\n  const calculateOrderUpdates = (\r\n    oldItems: T[],\r\n    newItems: T[]\r\n  ): OrderUpdate[] => {\r\n    const affectedItems = newItems.filter(\r\n      (item, index) => item.id !== oldItems[index]?.id\r\n    );\r\n    const orderList = affectedItems\r\n      .slice()\r\n      .sort((a, b) => a.position - b.position)\r\n      .map((item) => item.position);\r\n\r\n    return affectedItems.map((item, index) => ({\r\n      id: item.id,\r\n      newPosition: orderList[index],\r\n    }));\r\n  };\r\n\r\n  const handleDrop = ({ location, source }: any) => {\r\n    const sourceIndex = source.data?.index as number;\r\n    if (sourceIndex === undefined) return;\r\n\r\n    const { dropTargets } = location.current;\r\n    const destinationTarget = dropTargets.find(\r\n      (target: any) =>\r\n        target.data?.type === \"draggable-item\" &&\r\n        target.data?.id !== source.data?.id\r\n    );\r\n\r\n    if (!destinationTarget) return;\r\n\r\n    const edge = extractClosestEdge(destinationTarget);\r\n    const targetIndex = Number(\r\n      destinationTarget.element.getAttribute(\"data-index\")\r\n    );\r\n    const destinationIndex = edge === \"bottom\" ? targetIndex + 1 : targetIndex;\r\n\r\n    if (sourceIndex !== destinationIndex) {\r\n      const oldItems = [...items];\r\n      const newItems = reorder(items, sourceIndex, destinationIndex);\r\n      const orderUpdates = calculateOrderUpdates(oldItems, newItems);\r\n      onReorder(newItems, orderUpdates);\r\n    }\r\n  };\r\n\r\n  return monitorForElements({\r\n    onDrop: handleDrop,\r\n  });\r\n}\r\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\r\nimport { combine } from \"@atlaskit/pragmatic-drag-and-drop/combine\";\r\nimport { dropTargetForElements } from \"@atlaskit/pragmatic-drag-and-drop/element/adapter\";\r\nimport { DraggableItemWrapper } from \"./DraggableItemWrapper\";\r\nimport type { DragDropListProps, DraggableItem } from \"../types\";\r\nimport { useDragDropMonitor } from \"../hooks/useDragDropMonitor\";\r\nimport { defaultStyles } from \"../styles/defaultStyles\";\r\n\r\nexport function DragDropList<T extends DraggableItem>({\r\n  items,\r\n  onReorder,\r\n  renderItem,\r\n  containerClassName = \"\",\r\n  containerStyle = {},\r\n  itemClassName = \"\",\r\n  itemStyle = {},\r\n  dragPreviewClassName = \"\",\r\n  dragPreviewStyle = {},\r\n  onDragStart,\r\n  onDragEnd,\r\n  disabled = false,\r\n  gap,\r\n  direction = \"vertical\",\r\n  showDropIndicator = false,\r\n  dropIndicatorClassName = \"\",\r\n  dropIndicatorStyle = {},\r\n}: DragDropListProps<T>) {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const monitor = useDragDropMonitor({ items, onReorder, disabled });\r\n  const [isDraggingOver, setIsDraggingOver] = useState(false);\r\n\r\n  const getContainerStyles = (): React.CSSProperties => {\r\n    const baseStyle = { ...defaultStyles.container.default };\r\n\r\n    if (direction === \"horizontal\") {\r\n      Object.assign(baseStyle, defaultStyles.container.horizontal);\r\n    }\r\n\r\n    if (isDraggingOver) {\r\n      Object.assign(baseStyle, defaultStyles.container.dragging);\r\n    }\r\n\r\n    if (gap !== undefined) {\r\n      baseStyle.gap = typeof gap === \"number\" ? `${gap}px` : gap;\r\n    }\r\n\r\n    return { ...baseStyle, ...containerStyle };\r\n  };\r\n\r\n  const createDropTarget = useCallback(\r\n    (element: HTMLElement) => {\r\n      if (disabled) return () => {};\r\n\r\n      return dropTargetForElements({\r\n        element,\r\n        getData: () => ({ type: \"container\" }),\r\n        onDragEnter: () => setIsDraggingOver(true),\r\n        onDragLeave: () => setIsDraggingOver(false),\r\n        onDrop: () => setIsDraggingOver(false),\r\n      });\r\n    },\r\n    [disabled]\r\n  );\r\n\r\n  useEffect(() => {\r\n    const element = containerRef.current;\r\n    if (!element || disabled) return;\r\n\r\n    return combine(createDropTarget(element), monitor);\r\n  }, [createDropTarget, monitor, disabled]);\r\n\r\n  return (\r\n    <div\r\n      ref={containerRef}\r\n      className={containerClassName}\r\n      style={getContainerStyles()}\r\n    >\r\n      {items.map((item, index) => (\r\n        <DraggableItemWrapper\r\n          key={item.id}\r\n          item={item}\r\n          index={index}\r\n          className={itemClassName}\r\n          style={itemStyle}\r\n          dragPreviewClassName={dragPreviewClassName}\r\n          dragPreviewStyle={dragPreviewStyle}\r\n          onDragStart={onDragStart}\r\n          onDragEnd={onDragEnd}\r\n          disabled={disabled}\r\n          showDropIndicator={showDropIndicator}\r\n          dropIndicatorClassName={dropIndicatorClassName}\r\n          dropIndicatorStyle={dropIndicatorStyle}\r\n        >\r\n          {renderItem(item, index)}\r\n        </DraggableItemWrapper>\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["defaultStyles","container","default","minHeight","transition","borderRadius","border","backgroundColor","display","flexDirection","gap","padding","dragging","borderColor","horizontal","flexWrap","item","cursor","userSelect","position","opacity","hover","transform","boxShadow","disabled","preview","pointerEvents","zIndex","dropIndicator","height","left","right","DRAGGABLE_ITEM","DraggableItemWrapper","index","children","className","style","dragPreviewClassName","dragPreviewStyle","onDragStart","onDragEnd","showDropIndicator","dropIndicatorClassName","dropIndicatorStyle","elementRef","useRef","isDragging","setIsDragging","useState","isHovered","setIsHovered","dropPosition","setDropPosition","createDraggable","useCallback","element","draggable","getInitialData","type","id","onGenerateDragPreview","nativeSetDragImage","previewElement","cloneNode","previewStyles","Object","assign","width","offsetWidth","offsetHeight","document","body","appendChild","requestAnimationFrame","remove","onDrop","createDropTarget","dropTargetForElements","getData","canDrop","args","_a","source","data","getIsSticky","onDragEnter","self","location","_b","edge","_c","current","dropTargets","onDragLeave","useEffect","setAttribute","toString","combine","React","createElement","ref","baseStyle","getItemStyles","top","bottom","useDragDropMonitor","items","onReorder","monitorForElements","sourceIndex","undefined","destinationTarget","find","target","extractClosestEdge","targetIndex","Number","getAttribute","destinationIndex","oldItems","newItems","list","startIndex","endIndex","result","Array","from","removed","splice","reorder","orderUpdates","affectedItems","filter","orderList","slice","sort","a","b","map","newPosition","calculateOrderUpdates","renderItem","containerClassName","containerStyle","itemClassName","itemStyle","direction","containerRef","monitor","isDraggingOver","setIsDraggingOver","getContainerStyles","key"],"mappings":"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"}

package/dist/styles/defaultStyles.d.ts

@@ -0,0 +1,61 @@
+export declare const defaultStyles: {
+    container: {
+        default: {
+            minHeight: string;
+            transition: string;
+            borderRadius: string;
+            border: string;
+            backgroundColor: string;
+            display: string;
+            flexDirection: "column";
+            gap: string;
+            padding: string;
+        };
+        dragging: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        horizontal: {
+            flexDirection: "row";
+            flexWrap: "wrap";
+        };
+    };
+    item: {
+        default: {
+            transition: string;
+            cursor: string;
+            userSelect: "none";
+            position: "relative";
+        };
+        dragging: {
+            opacity: number;
+            cursor: string;
+        };
+        hover: {
+            transform: string;
+            boxShadow: string;
+        };
+        disabled: {
+            cursor: string;
+            opacity: number;
+        };
+    };
+    preview: {
+        position: "fixed";
+        pointerEvents: "none";
+        zIndex: number;
+        opacity: number;
+        transform: string;
+        boxShadow: string;
+    };
+    dropIndicator: {
+        position: "absolute";
+        height: string;
+        backgroundColor: string;
+        left: number;
+        right: number;
+        zIndex: number;
+        transition: string;
+    };
+};
+//# sourceMappingURL=defaultStyles.d.ts.map

package/dist/styles/defaultStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultStyles.d.ts","sourceRoot":"","sources":["../../src/styles/defaultStyles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DzB,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,45 @@
+export type DraggableItem = {
+    id: string;
+    position: number;
+    [key: string]: any;
+};
+export type OrderUpdate = {
+    id: string;
+    newPosition: number;
+    moved?: boolean;
+};
+export type DragDropListProps<T extends DraggableItem> = {
+    items: T[];
+    onReorder: (newItems: T[], orderUpdates: OrderUpdate[]) => void;
+    renderItem: (item: T, index: number) => React.ReactNode;
+    containerClassName?: string;
+    containerStyle?: React.CSSProperties;
+    itemClassName?: string;
+    itemStyle?: React.CSSProperties;
+    dragPreviewClassName?: string;
+    dragPreviewStyle?: React.CSSProperties;
+    onDragStart?: (item: T, index: number) => void;
+    onDragEnd?: (item: T, index: number) => void;
+    disabled?: boolean;
+    gap?: number | string;
+    direction?: "vertical" | "horizontal";
+    showDropIndicator?: boolean;
+    dropIndicatorClassName?: string;
+    dropIndicatorStyle?: React.CSSProperties;
+};
+export type DraggableItemWrapperProps<T extends DraggableItem> = {
+    item: T;
+    index: number;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    dragPreviewClassName?: string;
+    dragPreviewStyle?: React.CSSProperties;
+    onDragStart?: (item: T, index: number) => void;
+    onDragEnd?: (item: T, index: number) => void;
+    disabled?: boolean;
+    showDropIndicator?: boolean;
+    dropIndicatorClassName?: string;
+    dropIndicatorStyle?: React.CSSProperties;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,aAAa,IAAI;IACvD,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,SAAS,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IAChE,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,yBAAyB,CAAC,CAAC,SAAS,aAAa,IAAI;IAC/D,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC1C,CAAC"}

package/dist/utils/order.d.ts

@@ -0,0 +1,4 @@
+import type { DraggableItem, OrderUpdate } from '../types';
+export declare function reorder<T>(list: T[], startIndex: number, endIndex: number): T[];
+export declare function calculateOrderUpdates<T extends DraggableItem>(oldItems: T[], newItems: T[]): OrderUpdate[];
+//# sourceMappingURL=order.d.ts.map

package/dist/utils/order.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"order.d.ts","sourceRoot":"","sources":["../../src/utils/order.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE3D,wBAAgB,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,CAK/E;AAED,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,aAAa,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,WAAW,EAAE,CAI1G"}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "react-dragdrop-kit",
+  "author": "Souvik Sen <https://github.com/Yourstruggle11>",
+  "version": "1.0.0",
+  "description": "A flexible, lightweight React drag-and-drop kit for building sortable lists, grids, and boards with ease.",
+  "license": "MIT",
+
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": ["dist", "README.md", "LICENSE"],
+
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "test": "jest",
+    "lint": "eslint src/**/*.{ts,tsx}",
+
+    "sync-docs": "shx cp -f ../../README.md ./README.md && shx cp -f ../../LICENSE ./LICENSE",
+    "prepack": "npm run build && npm run sync-docs",
+    "postpack": "shx rm -f ./README.md ./LICENSE",
+    "prepublishOnly": "npm run build && npm run sync-docs"
+  },
+
+  "keywords": [
+    "react",
+    "drag-drop",
+    "drag-and-drop",
+    "reorder",
+    "list",
+    "sortable",
+    "draggable",
+    "drag",
+    "drop",
+    "dragdrop",
+    "grid",
+    "kanban",
+    "dnd"
+  ],
+
+  "peerDependencies": {
+    "react": "^16.8 || ^17 || ^18 || ^19",
+    "react-dom": "^16.8 || ^17 || ^18 || ^19"
+  },
+
+  "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0"
+  },
+
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.0.0",
+    "jest": "^30.1.1",
+    "jest-environment-jsdom": "^30.1.1",
+    "rollup": "^3.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "shx": "^0.4.0",
+    "tslib": "^2.0.0",
+    "typescript": "^5.0.0"
+  },
+
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Yourstruggle11/react-dragdrop-kit.git"
+  },
+  "bugs": { "url": "https://github.com/Yourstruggle11/react-dragdrop-kit/issues" },
+  "homepage": "https://github.com/Yourstruggle11/react-dragdrop-kit#readme",
+  "sideEffects": false
+}