react-drag-and-drop-kit 0.0.0

package/README.md

@@ -0,0 +1,359 @@
+# Drag and Drop
+
+A lightweight, easy to use React.js library for implementing react-drag-and-drop-kit functionality. This library provides simple components that wrap the native HTML5 Drag and Drop API, making it straightforward to add react-drag-and-drop-kit features to your React applications.
+
+[![npm version](https://img.shields.io/npm/v/react-drag-and-drop-kit)](https://www.npmjs.com/package/react-drag-and-drop-kit)
+[![npm downloads](https://img.shields.io/npm/dm/react-drag-and-drop-kit)](https://www.npmjs.com/package/react-drag-and-drop-kit)
+[![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE)
+
+## Features
+
+✨ **Simple and Lightweight** - Minimal API with zero dependencies (besides React)  
+🎯 **Type-Safe** - Full TypeScript support  
+🎨 **Flexible** - Use with any React component  
+📦 **Reusable** - Export your own custom data during drag operations  
+⚡ **Performance** - Efficient implementation using native browser APIs
+
+## Installation
+
+```bash
+npm install react-drag-and-drop-kit
+```
+
+Or using yarn:
+
+```bash
+yarn add react-drag-and-drop-kit
+```
+
+Or using pnpm:
+
+```bash
+pnpm add react-drag-and-drop-kit
+```
+
+## Quick Start
+
+Import the `Draggable` and `DropZone` components from the library:
+
+```tsx
+import { Draggable, DropZone } from "react-drag-and-drop-kit";
+import { useState } from "react";
+
+function App() {
+  const [droppedData, setDroppedData] = useState(null);
+
+  const handleDragStart = (event) => {
+    console.log("Drag started");
+  };
+
+  const handleDropItem = (event, dataTransfer) => {
+    console.log("Item dropped:", dataTransfer);
+    setDroppedData(dataTransfer);
+  };
+
+  return (
+    <div style={{ display: "flex", height: "100vh" }}>
+      <div style={{ width: "50%" }}>
+        <Draggable
+          handleDragStart={handleDragStart}
+          dataTransfer={{ id: "item-1", name: "My Item" }}
+        >
+          <div style={{ padding: "20px", backgroundColor: "#3498db", color: "#fff" }}>Drag me!</div>
+        </Draggable>
+      </div>
+
+      <DropZone handleDropItem={handleDropItem}>
+        <div style={{ padding: "20px", backgroundColor: "#2ecc71", minHeight: "100%" }}>
+          {droppedData ? `Dropped: ${JSON.stringify(droppedData)}` : "Drop here!"}
+        </div>
+      </DropZone>
+    </div>
+  );
+}
+
+export default App;
+```
+
+## API Reference
+
+### `Draggable` Component
+
+Wraps any React component to make it draggable.
+
+#### Props
+
+| Prop              | Type                                               | Description                                                    |
+| ----------------- | -------------------------------------------------- | -------------------------------------------------------------- |
+| `children`        | `ReactNode`                                        | The content to be dragged                                      |
+| `handleDragStart` | `(event: React.DragEvent<HTMLDivElement>) => void` | Callback fired when drag starts                                |
+| `dataTransfer`    | `DataTransferInterface`                            | Custom data object to be transferred during the drag operation |
+
+#### Example
+
+```tsx
+<Draggable
+  handleDragStart={(event) => console.log("Dragging...")}
+  dataTransfer={{ itemId: 123, type: "product" }}
+>
+  <div>Draggable Item</div>
+</Draggable>
+```
+
+### `DropZone` Component
+
+Creates a drop target that accepts dragged items.
+
+#### Props
+
+| Prop             | Type                                                                                | Description                            |
+| ---------------- | ----------------------------------------------------------------------------------- | -------------------------------------- |
+| `children`       | `ReactNode`                                                                         | The content of the drop zone           |
+| `handleDropItem` | `(e: React.DragEvent<HTMLDivElement>, dataTransfer: DataTransferInterface) => void` | Callback fired when an item is dropped |
+
+#### Example
+
+```tsx
+<DropZone
+  handleDropItem={(event, dataTransfer) => {
+    console.log("Dropped data:", dataTransfer);
+  }}
+>
+  <div>Drop Target</div>
+</DropZone>
+```
+
+### Types
+
+#### `DataTransferInterface`
+
+A simple object interface for passing custom data during drag operations:
+
+```typescript
+interface DataTransferInterface {
+  [key: string]: string;
+}
+```
+
+## Real-World Example
+
+### Shopping Cart Demo
+
+```tsx
+import { useState } from "react";
+import { Draggable, DropZone, type DataTransferInterface } from "react-drag-and-drop-kit";
+import "./App.css";
+
+function App() {
+  const products = [
+    { id: 1, name: "Product A", price: "$10" },
+    { id: 2, name: "Product B", price: "$20" },
+    { id: 3, name: "Product C", price: "$30" },
+  ];
+
+  const [cart, setCart] = useState<DataTransferInterface[]>([]);
+
+  const handleAddToCart = (event, dataTransfer) => {
+    setCart([...cart, dataTransfer]);
+  };
+
+  return (
+    <div style={{ display: "flex", gap: "20px", padding: "20px" }}>
+      <div style={{ flex: 1 }}>
+        <h2>Products</h2>
+        {products.map((product) => (
+          <Draggable
+            key={product.id}
+            dataTransfer={{ id: String(product.id), name: product.name }}
+            handleDragStart={() => console.log(`Dragging ${product.name}`)}
+          >
+            <div
+              style={{
+                padding: "10px",
+                margin: "10px 0",
+                backgroundColor: "#3498db",
+                color: "#fff",
+                cursor: "grab",
+              }}
+            >
+              {product.name} - {product.price}
+            </div>
+          </Draggable>
+        ))}
+      </div>
+
+      <DropZone handleDropItem={handleAddToCart}>
+        <div
+          style={{
+            flex: 1,
+            backgroundColor: "#ecf0f1",
+            padding: "20px",
+            minHeight: "500px",
+          }}
+        >
+          <h2>Shopping Cart</h2>
+          {cart.length === 0 ? (
+            <p>Drag items here to add to cart</p>
+          ) : (
+            <ul>
+              {cart.map((item, idx) => (
+                <li key={idx}>{item.name}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </DropZone>
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Advanced Usage
+
+### Multiple Drop Zones
+
+You can have multiple drop zones and draggable items on the same page:
+
+```tsx
+<div>
+  <Draggable dataTransfer={{ id: "1" }} handleDragStart={() => {}}>
+    <div>Item 1</div>
+  </Draggable>
+
+  <DropZone handleDropItem={(e, data) => console.log("Zone 1:", data)}>
+    <div>Drop Zone 1</div>
+  </DropZone>
+
+  <DropZone handleDropItem={(e, data) => console.log("Zone 2:", data)}>
+    <div>Drop Zone 2</div>
+  </DropZone>
+</div>
+```
+
+### Styled Drag and Drop
+
+Enhance your react-drag-and-drop-kit with custom CSS:
+
+```tsx
+<style>{`
+  .draggable {
+    padding: 15px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    cursor: grab;
+    border-radius: 8px;
+    transition: transform 0.2s;
+  }
+
+  .draggable:active {
+    cursor: grabbing;
+    transform: scale(1.05);
+  }
+
+  .drop-zone {
+    border: 2px dashed #667eea;
+    border-radius: 8px;
+    padding: 20px;
+    min-height: 300px;
+    background: rgba(102, 126, 234, 0.1);
+  }
+`}</style>
+
+<Draggable
+  dataTransfer={{ id: '1' }}
+  handleDragStart={() => {}}
+  className="draggable"
+>
+  <div>Drag me with style!</div>
+</Draggable>
+
+<DropZone handleDropItem={() => {}} className="drop-zone">
+  <div>Styled Drop Zone</div>
+</DropZone>
+```
+
+## TypeScript Support
+
+The library is built with TypeScript and exports all necessary types:
+
+```tsx
+import {
+  Draggable,
+  DropZone,
+  type DraggableProps,
+  type DropZoneProps,
+  type DataTransferInterface,
+} from "react-drag-and-drop-kit";
+
+const handleDrop: DropZoneProps["handleDropItem"] = (event, dataTransfer) => {
+  console.log("Dropped:", dataTransfer);
+};
+```
+
+## Browser Support
+
+This library uses the HTML5 Drag and Drop API, which is supported in all modern browsers:
+
+- Chrome/Edge 4+
+- Firefox 3.6+
+- Safari 3.1+
+- Opera 12+
+- IE 10+
+
+## Performance Considerations
+
+- The library uses React's native event system for optimal performance
+- Drag operations are handled efficiently with minimal re-renders
+- Data transfer is serialized to JSON, so ensure your data is serializable
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
+
+## Author
+
+**Sanket Kakad**
+
+- GitHub: [@sanketskakad](https://github.com/sanketskakad)
+- Repository: [react-drag-and-drop-kit](https://github.com/sanketskakad/react-drag-and-drop-kit)
+
+## Changelog
+
+### Version 0.0.0
+
+Initial release with:
+
+- `Draggable` component
+- `DropZone` component
+- Full TypeScript support
+- React 18+ compatibility
+
+## FAQ
+
+**Q: Can I drag multiple items at once?**  
+A: The current version handles single-item dragging. For multi-item selection, you can manage state in your parent component and transfer a reference to multiple items in the `dataTransfer` object.
+
+**Q: Can I customize the drag ghost image?**  
+A: Yes, you can use the `setDragImage` method in the `handleDragStart` callback on the drag event.
+
+**Q: Is there any CSS required?**  
+A: No, the library requires no CSS. However, you may want to add cursor styles and visual feedback for better UX.
+
+**Q: What data types can I transfer?**  
+A: The `dataTransfer` object should contain string values. Convert complex types to JSON strings if needed.
+
+## Support
+
+If you have any questions or issues, please open an issue on the [GitHub repository](https://github.com/sanketskakad/react-drag-and-drop-kit/issues).

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+export declare interface DataTransferInterface {
+    [key: string]: string;
+}
+
+export declare function Draggable({ children, handleDragStart, dataTransfer }: DraggableProps): JSX.Element;
+
+export declare type DraggableProps = {
+    children: ReactNode;
+    handleDragStart: (event: React.DragEvent<HTMLDivElement>) => void;
+    dataTransfer: DataTransferInterface;
+};
+
+export declare function DropZone({ children, handleDropItem }: DropZoneProps): JSX.Element;
+
+export declare type DropZoneProps = {
+    children: ReactNode;
+    handleDropItem: (e: React.DragEvent<HTMLDivElement>, dataTransfer: DataTransferInterface) => void;
+};
+
+export { }

package/dist/react-drag-and-drop-kit.es.js

@@ -0,0 +1,279 @@
+import ee from "react";
+var p = { exports: {} }, E = {};
+var Y;
+function re() {
+  if (Y) return E;
+  Y = 1;
+  var l = /* @__PURE__ */ Symbol.for("react.transitional.element"), i = /* @__PURE__ */ Symbol.for("react.fragment");
+  function c(s, o, u) {
+    var d = null;
+    if (u !== void 0 && (d = "" + u), o.key !== void 0 && (d = "" + o.key), "key" in o) {
+      u = {};
+      for (var m in o)
+        m !== "key" && (u[m] = o[m]);
+    } else u = o;
+    return o = u.ref, {
+      $$typeof: l,
+      type: s,
+      key: d,
+      ref: o !== void 0 ? o : null,
+      props: u
+    };
+  }
+  return E.Fragment = i, E.jsx = c, E.jsxs = c, E;
+}
+var _ = {};
+var $;
+function te() {
+  return $ || ($ = 1, process.env.NODE_ENV !== "production" && (function() {
+    function l(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === H ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case b:
+          return "Fragment";
+        case U:
+          return "Profiler";
+        case J:
+          return "StrictMode";
+        case G:
+          return "Suspense";
+        case X:
+          return "SuspenseList";
+        case B:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case W:
+            return "Portal";
+          case V:
+            return e.displayName || "Context";
+          case q:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case z:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
+          case T:
+            r = e._payload, e = e._init;
+            try {
+              return l(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function i(e) {
+      return "" + e;
+    }
+    function c(e) {
+      try {
+        i(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          a
+        ), i(e);
+      }
+    }
+    function s(e) {
+      if (e === b) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === T)
+        return "<...>";
+      try {
+        var r = l(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function o() {
+      var e = k.A;
+      return e === null ? null : e.getOwner();
+    }
+    function u() {
+      return Error("react-stack-top-frame");
+    }
+    function d(e) {
+      if (j.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function m(e, r) {
+      function t() {
+        w || (w = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function L() {
+      var e = l(this.type);
+      return h[e] || (h[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function M(e, r, t, a, R, S) {
+      var n = t.ref;
+      return e = {
+        $$typeof: y,
+        type: e,
+        key: r,
+        props: t,
+        _owner: a
+      }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: L
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: R
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: S
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function A(e, r, t, a, R, S) {
+      var n = r.children;
+      if (n !== void 0)
+        if (a)
+          if (Q(n)) {
+            for (a = 0; a < n.length; a++)
+              P(n[a]);
+            Object.freeze && Object.freeze(n);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else P(n);
+      if (j.call(r, "key")) {
+        n = l(e);
+        var f = Object.keys(r).filter(function(K) {
+          return K !== "key";
+        });
+        a = 0 < f.length ? "{key: someKey, " + f.join(": ..., ") + ": ...}" : "{key: someKey}", C[n + a] || (f = 0 < f.length ? "{" + f.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          a,
+          n,
+          f,
+          n
+        ), C[n + a] = !0);
+      }
+      if (n = null, t !== void 0 && (c(t), n = "" + t), d(r) && (c(r.key), n = "" + r.key), "key" in r) {
+        t = {};
+        for (var g in r)
+          g !== "key" && (t[g] = r[g]);
+      } else t = r;
+      return n && m(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), M(
+        e,
+        n,
+        t,
+        o(),
+        R,
+        S
+      );
+    }
+    function P(e) {
+      x(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === T && (e._payload.status === "fulfilled" ? x(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function x(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === y;
+    }
+    var v = ee, y = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), b = /* @__PURE__ */ Symbol.for("react.fragment"), J = /* @__PURE__ */ Symbol.for("react.strict_mode"), U = /* @__PURE__ */ Symbol.for("react.profiler"), q = /* @__PURE__ */ Symbol.for("react.consumer"), V = /* @__PURE__ */ Symbol.for("react.context"), z = /* @__PURE__ */ Symbol.for("react.forward_ref"), G = /* @__PURE__ */ Symbol.for("react.suspense"), X = /* @__PURE__ */ Symbol.for("react.suspense_list"), Z = /* @__PURE__ */ Symbol.for("react.memo"), T = /* @__PURE__ */ Symbol.for("react.lazy"), B = /* @__PURE__ */ Symbol.for("react.activity"), H = /* @__PURE__ */ Symbol.for("react.client.reference"), k = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, Q = Array.isArray, O = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    v = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var w, h = {}, N = v.react_stack_bottom_frame.bind(
+      v,
+      u
+    )(), D = O(s(u)), C = {};
+    _.Fragment = b, _.jsx = function(e, r, t) {
+      var a = 1e4 > k.recentlyCreatedOwnerStacks++;
+      return A(
+        e,
+        r,
+        t,
+        !1,
+        a ? Error("react-stack-top-frame") : N,
+        a ? O(s(e)) : D
+      );
+    }, _.jsxs = function(e, r, t) {
+      var a = 1e4 > k.recentlyCreatedOwnerStacks++;
+      return A(
+        e,
+        r,
+        t,
+        !0,
+        a ? Error("react-stack-top-frame") : N,
+        a ? O(s(e)) : D
+      );
+    };
+  })()), _;
+}
+var I;
+function ae() {
+  return I || (I = 1, process.env.NODE_ENV === "production" ? p.exports = re() : p.exports = te()), p.exports;
+}
+var F = ae();
+function oe({ children: l, handleDragStart: i, dataTransfer: c }) {
+  const s = (o) => {
+    o.dataTransfer.setData("dataTransfer", JSON.stringify(c)), i(o);
+  };
+  return /* @__PURE__ */ F.jsx("div", { draggable: "true", onDragStart: s, children: l });
+}
+function se({ children: l, handleDropItem: i }) {
+  const c = (s) => {
+    s.preventDefault();
+    const o = s.dataTransfer.getData("dataTransfer"), u = JSON.parse(o);
+    i(s, u);
+  };
+  return /* @__PURE__ */ F.jsx("div", { onDragOver: (s) => s.preventDefault(), onDrop: c, children: l });
+}
+export {
+  oe as Draggable,
+  se as DropZone
+};

package/dist/react-drag-and-drop-kit.umd.js

@@ -0,0 +1,6 @@
+(function(i,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],m):(i=typeof globalThis<"u"?globalThis:i||self,m(i.DragAndDropKit={},i.React))})(this,(function(i,m){"use strict";var v={exports:{}},E={};var P;function W(){if(P)return E;P=1;var l=Symbol.for("react.transitional.element"),f=Symbol.for("react.fragment");function c(s,o,u){var p=null;if(u!==void 0&&(p=""+u),o.key!==void 0&&(p=""+o.key),"key"in o){u={};for(var b in o)b!=="key"&&(u[b]=o[b])}else u=o;return o=u.ref,{$$typeof:l,type:s,key:p,ref:o!==void 0?o:null,props:u}}return E.Fragment=f,E.jsx=c,E.jsxs=c,E}var _={};var j;function J(){return j||(j=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ae?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case g:return"Fragment";case B:return"Profiler";case Z:return"StrictMode";case ee:return"Suspense";case re:return"SuspenseList";case ne:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case X:return"Portal";case Q:return e.displayName||"Context";case H:return(e._context.displayName||"Context")+".Consumer";case K:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case te:return r=e.displayName||null,r!==null?r:l(e.type)||"Memo";case k:r=e._payload,e=e._init;try{return l(e(r))}catch{}}return null}function f(e){return""+e}function c(e){try{f(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),f(e)}}function s(e){if(e===g)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===k)return"<...>";try{var r=l(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=O.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function p(e){if(Y.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function b(e,r){function t(){I||(I=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function z(){var e=l(this.type);return $[e]||($[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function G(e,r,t,n,T,y){var a=t.ref;return e={$$typeof:C,type:e,key:r,props:t,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:z}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:T}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:y}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function w(e,r,t,n,T,y){var a=r.children;if(a!==void 0)if(n)if(oe(a)){for(n=0;n<a.length;n++)N(a[n]);Object.freeze&&Object.freeze(a)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else N(a);if(Y.call(r,"key")){a=l(e);var d=Object.keys(r).filter(function(se){return se!=="key"});n=0<d.length?"{key: someKey, "+d.join(": ..., ")+": ...}":"{key: someKey}",L[a+n]||(d=0<d.length?"{"+d.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,n,a,d,a),L[a+n]=!0)}if(a=null,t!==void 0&&(c(t),a=""+t),p(r)&&(c(r.key),a=""+r.key),"key"in r){t={};for(var A in r)A!=="key"&&(t[A]=r[A])}else t=r;return a&&b(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),G(e,a,t,o(),T,y)}function N(e){D(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===k&&(e._payload.status==="fulfilled"?D(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function D(e){return typeof e=="object"&&e!==null&&e.$$typeof===C}var R=m,C=Symbol.for("react.transitional.element"),X=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),Z=Symbol.for("react.strict_mode"),B=Symbol.for("react.profiler"),H=Symbol.for("react.consumer"),Q=Symbol.for("react.context"),K=Symbol.for("react.forward_ref"),ee=Symbol.for("react.suspense"),re=Symbol.for("react.suspense_list"),te=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),ne=Symbol.for("react.activity"),ae=Symbol.for("react.client.reference"),O=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,oe=Array.isArray,S=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(e){return e()}};var I,$={},F=R.react_stack_bottom_frame.bind(R,u)(),M=S(s(u)),L={};_.Fragment=g,_.jsx=function(e,r,t){var n=1e4>O.recentlyCreatedOwnerStacks++;return w(e,r,t,!1,n?Error("react-stack-top-frame"):F,n?S(s(e)):M)},_.jsxs=function(e,r,t){var n=1e4>O.recentlyCreatedOwnerStacks++;return w(e,r,t,!0,n?Error("react-stack-top-frame"):F,n?S(s(e)):M)}})()),_}var h;function U(){return h||(h=1,process.env.NODE_ENV==="production"?v.exports=W():v.exports=J()),v.exports}var x=U();function q({children:l,handleDragStart:f,dataTransfer:c}){const s=o=>{o.dataTransfer.setData("dataTransfer",JSON.stringify(c)),f(o)};return x.jsx("div",{draggable:"true",onDragStart:s,children:l})}function V({children:l,handleDropItem:f}){const c=s=>{s.preventDefault();const o=s.dataTransfer.getData("dataTransfer"),u=JSON.parse(o);f(s,u)};return x.jsx("div",{onDragOver:s=>s.preventDefault(),onDrop:c,children:l})}i.Draggable=q,i.DropZone=V,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "react-drag-and-drop-kit",
+  "author": {
+    "name": "Sanket Kakad"
+  },
+  "repository": {
+    "url": "https://github.com/sanketskakad/react-drag-and-drop"
+  },
+  "private": false,
+  "version": "0.0.0",
+  "description": "An open source, lightweight React.js library for implementing simple and flexible react-drag-and-drop functionality.",
+  "keywords": [
+    "react",
+    "react-drag-and-drop-kit",
+    "drag-and-drop",
+    "dnd",
+    "draggable",
+    "sortable",
+    "ui-components",
+    "drag",
+    "drop",
+    "javascript",
+    "typescript"
+  ],
+  "type": "module",
+  "main": "./dist/react-drag-and-drop-kit.umd.js",
+  "module": "./dist/react-drag-and-drop-kit.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/react-drag-and-drop-kit.es.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/react-drag-and-drop-kit.umd.js"
+      }
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "lint": "eslint ."
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}