react-drag-and-drop-kit 0.0.0 → 1.0.0

package/README.md

@@ -1,6 +1,6 @@
-# Drag and Drop
+# React Drag and Drop Kit
 
-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.
+A lightweight, easy-to-use React.js library for implementing drag-and-drop functionality. This library provides simple components that wrap the native HTML5 Drag and Drop API, making it straightforward to add drag-and-drop 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)
@@ -9,9 +9,10 @@ A lightweight, easy to use React.js library for implementing react-drag-and-drop
 ## Features
 
 ✨ **Simple and Lightweight** - Minimal API with zero dependencies (besides React)  
-🎯 **Type-Safe** - Full TypeScript support  
+🎯 **Type-Safe** - Full TypeScript support with exported types  
 🎨 **Flexible** - Use with any React component  
-📦 **Reusable** - Export your own custom data during drag operations  
+📦 **Reusable** - Pass custom data during drag operations  
+🎨 **Styleable** - Built-in support for custom styling via `style` props  
 ⚡ **Performance** - Efficient implementation using native browser APIs
 
 ## Installation
@@ -58,15 +59,26 @@ function App() {
         <Draggable
           handleDragStart={handleDragStart}
           dataTransfer={{ id: "item-1", name: "My Item" }}
+          style={{
+            padding: "20px",
+            backgroundColor: "#3498db",
+            color: "#fff",
+            cursor: "grab",
+          }}
         >
-          <div style={{ padding: "20px", backgroundColor: "#3498db", color: "#fff" }}>Drag me!</div>
+          Drag me!
         </Draggable>
       </div>
 
-      <DropZone handleDropItem={handleDropItem}>
-        <div style={{ padding: "20px", backgroundColor: "#2ecc71", minHeight: "100%" }}>
-          {droppedData ? `Dropped: ${JSON.stringify(droppedData)}` : "Drop here!"}
-        </div>
+      <DropZone
+        handleDropItem={handleDropItem}
+        style={{
+          padding: "20px",
+          backgroundColor: "#2ecc71",
+          minHeight: "100%",
+        }}
+      >
+        {droppedData ? `Dropped: ${JSON.stringify(droppedData)}` : "Drop here!"}
       </DropZone>
     </div>
   );
@@ -83,18 +95,25 @@ 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 |
+| Prop              | Type                                               | Required | Description                                      |
+| ----------------- | -------------------------------------------------- | -------- | ------------------------------------------------ |
+| `children`        | `ReactNode`                                        | No       | The content to be dragged                        |
+| `handleDragStart` | `(event: React.DragEvent<HTMLDivElement>) => void` | Yes      | Callback fired when drag starts                  |
+| `dataTransfer`    | `DataTransferInterface`                            | No       | Custom data object to be transferred during drag |
+| `style`           | `React.CSSProperties`                              | No       | Inline CSS styles for the draggable element      |
 
 #### Example
 
 ```tsx
 <Draggable
   handleDragStart={(event) => console.log("Dragging...")}
-  dataTransfer={{ itemId: 123, type: "product" }}
+  dataTransfer={{ itemId: "123", type: "product" }}
+  style={{
+    padding: "10px",
+    backgroundColor: "#3498db",
+    cursor: "grab",
+    borderRadius: "4px",
+  }}
 >
   <div>Draggable Item</div>
 </Draggable>
@@ -106,10 +125,11 @@ 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 |
+| Prop             | Type                                                                                | Required | Description                                 |
+| ---------------- | ----------------------------------------------------------------------------------- | -------- | ------------------------------------------- |
+| `children`       | `ReactNode`                                                                         | No       | The content of the drop zone                |
+| `handleDropItem` | `(e: React.DragEvent<HTMLDivElement>, dataTransfer: DataTransferInterface) => void` | Yes      | Callback fired when an item is dropped      |
+| `style`          | `React.CSSProperties`                                                               | No       | Inline CSS styles for the drop zone element |
 
 #### Example
 
@@ -118,6 +138,12 @@ Creates a drop target that accepts dragged items.
   handleDropItem={(event, dataTransfer) => {
     console.log("Dropped data:", dataTransfer);
   }}
+  style={{
+    border: "2px dashed #667eea",
+    padding: "20px",
+    minHeight: "300px",
+    backgroundColor: "#f0f4ff",
+  }}
 >
   <div>Drop Target</div>
 </DropZone>
@@ -135,6 +161,27 @@ interface DataTransferInterface {
 }
 ```
 
+#### `DraggableProps`
+
+```typescript
+type DraggableProps = {
+  children?: ReactNode;
+  style?: React.CSSProperties;
+  handleDragStart: (event: React.DragEvent<HTMLDivElement>) => void;
+  dataTransfer?: DataTransferInterface;
+};
+```
+
+#### `DropZoneProps`
+
+```typescript
+type DropZoneProps = {
+  children?: ReactNode;
+  style?: React.CSSProperties;
+  handleDropItem: (e: React.DragEvent<HTMLDivElement>, dataTransfer: DataTransferInterface) => void;
+};
+```
+
 ## Real-World Example
 
 ### Shopping Cart Demo
@@ -142,7 +189,6 @@ interface DataTransferInterface {
 ```tsx
 import { useState } from "react";
 import { Draggable, DropZone, type DataTransferInterface } from "react-drag-and-drop-kit";
-import "./App.css";
 
 function App() {
   const products = [
@@ -166,42 +212,42 @@ function App() {
             key={product.id}
             dataTransfer={{ id: String(product.id), name: product.name }}
             handleDragStart={() => console.log(`Dragging ${product.name}`)}
+            style={{
+              padding: "10px",
+              margin: "10px 0",
+              backgroundColor: "#3498db",
+              color: "#fff",
+              cursor: "grab",
+              borderRadius: "4px",
+              userSelect: "none",
+            }}
           >
-            <div
-              style={{
-                padding: "10px",
-                margin: "10px 0",
-                backgroundColor: "#3498db",
-                color: "#fff",
-                cursor: "grab",
-              }}
-            >
-              {product.name} - {product.price}
-            </div>
+            {product.name} - {product.price}
           </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
+        handleDropItem={handleAddToCart}
+        style={{
+          flex: 1,
+          backgroundColor: "#ecf0f1",
+          padding: "20px",
+          minHeight: "500px",
+          borderRadius: "4px",
+          border: "2px dashed #bdc3c7",
+        }}
+      >
+        <h2>Shopping Cart</h2>
+        {cart.length === 0 ? (
+          <p style={{ color: "#7f8c8d" }}>Drag items here to add to cart</p>
+        ) : (
+          <ul>
+            {cart.map((item, idx) => (
+              <li key={idx}>{item.name}</li>
+            ))}
+          </ul>
+        )}
       </DropZone>
     </div>
   );
@@ -218,59 +264,82 @@ 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
+    dataTransfer={{ id: "1", label: "Item 1" }}
+    handleDragStart={() => {}}
+    style={{
+      padding: "10px",
+      backgroundColor: "#3498db",
+      color: "white",
+      cursor: "grab",
+      marginBottom: "10px",
+    }}
+  >
+    Item 1
   </Draggable>
 
-  <DropZone handleDropItem={(e, data) => console.log("Zone 1:", data)}>
-    <div>Drop Zone 1</div>
+  <DropZone
+    handleDropItem={(e, data) => console.log("Zone 1:", data)}
+    style={{
+      padding: "20px",
+      backgroundColor: "#ecf0f1",
+      minHeight: "200px",
+      marginBottom: "10px",
+      borderRadius: "4px",
+    }}
+  >
+    Drop Zone 1
   </DropZone>
 
-  <DropZone handleDropItem={(e, data) => console.log("Zone 2:", data)}>
-    <div>Drop Zone 2</div>
+  <DropZone
+    handleDropItem={(e, data) => console.log("Zone 2:", data)}
+    style={{
+      padding: "20px",
+      backgroundColor: "#e8f8f5",
+      minHeight: "200px",
+      borderRadius: "4px",
+    }}
+  >
+    Drop Zone 2
   </DropZone>
 </div>
 ```
 
-### Styled Drag and Drop
+### Drag with Custom Styling
 
-Enhance your react-drag-and-drop-kit with custom CSS:
+Use the `style` prop to create visually appealing drag-and-drop experiences:
 
 ```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>
+const draggableStyle: React.CSSProperties = {
+  padding: '15px',
+  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+  color: 'white',
+  cursor: 'grab',
+  borderRadius: '8px',
+  boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+  transition: 'transform 0.2s, boxShadow 0.2s',
+  userSelect: 'none'
+};
+
+const dropZoneStyle: React.CSSProperties = {
+  padding: '20px',
+  border: '2px dashed #667eea',
+  borderRadius: '8px',
+  minHeight: '300px',
+  backgroundColor: 'rgba(102, 126, 234, 0.1)',
+  transition: 'backgroundColor 0.3s'
+};
 
 <Draggable
   dataTransfer={{ id: '1' }}
   handleDragStart={() => {}}
-  className="draggable"
+  style={draggableStyle}
 >
-  <div>Drag me with style!</div>
+  Drag me with style!
 </Draggable>
 
-<DropZone handleDropItem={() => {}} className="drop-zone">
-  <div>Styled Drop Zone</div>
+<DropZone handleDropItem={() => {}} style={dropZoneStyle}>
+  Styled Drop Zone
 </DropZone>
 ```
 
@@ -290,6 +359,12 @@ import {
 const handleDrop: DropZoneProps["handleDropItem"] = (event, dataTransfer) => {
   console.log("Dropped:", dataTransfer);
 };
+
+const draggableConfig: DraggableProps = {
+  handleDragStart: (e) => console.log("Start"),
+  dataTransfer: { id: "1" },
+  style: { cursor: "grab" },
+};
 ```
 
 ## Browser Support
@@ -307,6 +382,7 @@ This library uses the HTML5 Drag and Drop API, which is supported in all modern
 - 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
+- Inline `style` props are recommended for better performance with frequent updates
 
 ## Contributing
 
@@ -327,10 +403,19 @@ This project is licensed under the MIT License - see the LICENSE file for detail
 **Sanket Kakad**
 
 - GitHub: [@sanketskakad](https://github.com/sanketskakad)
-- Repository: [react-drag-and-drop-kit](https://github.com/sanketskakad/react-drag-and-drop-kit)
+- Repository: [react-drag-and-drop-kit](https://github.com/sanketskakad/react-drag-and-drop)
 
 ## Changelog
 
+### Version 1.0.0
+
+- ✨ Added `style` prop to both `Draggable` and `DropZone` components
+- ✨ Made `children` and `dataTransfer` optional in component props
+- 🎨 Improved styling flexibility with built-in React CSS properties support
+- 📦 Package renamed to `react-drag-and-drop-kit` for clarity
+- 📝 Enhanced documentation with type definitions
+- 🚀 First major stable release
+
 ### Version 0.0.0
 
 Initial release with:
@@ -343,17 +428,23 @@ Initial release with:
 ## 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.
+A: The current version handles single-element dragging. However, you can transfer multiple item references through the `dataTransfer` object by encoding them as comma-separated strings or JSON.
 
 **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: How do I apply custom styles to draggable and drop zone elements?**  
+A: Use the `style` prop on both `Draggable` and `DropZone` components. It accepts standard React CSS properties (`React.CSSProperties`).
+
 **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.
+A: No, the library requires no CSS. The `style` prop allows you to add all necessary 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.
 
+**Q: Can I use the style prop with CSS-in-JS libraries?**  
+A: Yes, the `style` prop accepts any valid `React.CSSProperties` object, making it compatible with styled-components, emotion, and other CSS-in-JS solutions.
+
 ## 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).
+If you have any questions or issues, please open an issue on the [GitHub repository](https://github.com/sanketskakad/react-drag-and-drop/issues).

package/dist/index.d.ts

@@ -5,18 +5,20 @@ export declare interface DataTransferInterface {
     [key: string]: string;
 }
 
-export declare function Draggable({ children, handleDragStart, dataTransfer }: DraggableProps): JSX.Element;
+export declare function Draggable({ children, handleDragStart, dataTransfer, style }: DraggableProps): JSX.Element;
 
 export declare type DraggableProps = {
-    children: ReactNode;
+    children?: ReactNode;
+    style?: React.CSSProperties;
     handleDragStart: (event: React.DragEvent<HTMLDivElement>) => void;
-    dataTransfer: DataTransferInterface;
+    dataTransfer?: DataTransferInterface;
 };
 
-export declare function DropZone({ children, handleDropItem }: DropZoneProps): JSX.Element;
+export declare function DropZone({ children, handleDropItem, style }: DropZoneProps): JSX.Element;
 
 export declare type DropZoneProps = {
-    children: ReactNode;
+    children?: ReactNode;
+    style?: React.CSSProperties;
     handleDropItem: (e: React.DragEvent<HTMLDivElement>, dataTransfer: DataTransferInterface) => void;
 };
 

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

@@ -4,29 +4,29 @@ 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
+  var u = /* @__PURE__ */ Symbol.for("react.transitional.element"), i = /* @__PURE__ */ Symbol.for("react.fragment");
+  function l(c, a, s) {
+    var f = null;
+    if (s !== void 0 && (f = "" + s), a.key !== void 0 && (f = "" + a.key), "key" in a) {
+      s = {};
+      for (var m in a)
+        m !== "key" && (s[m] = a[m]);
+    } else s = a;
+    return a = s.ref, {
+      $$typeof: u,
+      type: c,
+      key: f,
+      ref: a !== void 0 ? a : null,
+      props: s
     };
   }
-  return E.Fragment = i, E.jsx = c, E.jsxs = c, E;
+  return E.Fragment = i, E.jsx = l, E.jsxs = l, E;
 }
 var _ = {};
 var $;
 function te() {
   return $ || ($ = 1, process.env.NODE_ENV !== "production" && (function() {
-    function l(e) {
+    function u(e) {
       if (e == null) return null;
       if (typeof e == "function")
         return e.$$typeof === H ? null : e.displayName || e.name || null;
@@ -59,11 +59,11 @@ function te() {
             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";
+            return r = e.displayName || null, r !== null ? r : u(e.type) || "Memo";
           case T:
             r = e._payload, e = e._init;
             try {
-              return l(e(r));
+              return u(e(r));
             } catch {
             }
         }
@@ -72,7 +72,7 @@ function te() {
     function i(e) {
       return "" + e;
     }
-    function c(e) {
+    function l(e) {
       try {
         i(e);
         var r = !1;
@@ -81,33 +81,33 @@ function te() {
       }
       if (r) {
         r = console;
-        var t = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        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.",
-          a
+          n
         ), i(e);
       }
     }
-    function s(e) {
+    function c(e) {
       if (e === b) return "<>";
       if (typeof e == "object" && e !== null && e.$$typeof === T)
         return "<...>";
       try {
-        var r = l(e);
+        var r = u(e);
         return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function o() {
+    function a() {
       var e = k.A;
       return e === null ? null : e.getOwner();
     }
-    function u() {
+    function s() {
       return Error("react-stack-top-frame");
     }
-    function d(e) {
+    function f(e) {
       if (j.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
@@ -127,20 +127,20 @@ function te() {
       });
     }
     function L() {
-      var e = l(this.type);
+      var e = u(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;
+    function M(e, r, t, n, R, S) {
+      var o = t.ref;
       return e = {
         $$typeof: y,
         type: e,
         key: r,
         props: t,
-        _owner: a
-      }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
+        _owner: n
+      }, (o !== void 0 ? o : 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", {
@@ -165,50 +165,50 @@ function te() {
         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);
+    function A(e, r, t, n, R, S) {
+      var o = r.children;
+      if (o !== void 0)
+        if (n)
+          if (Q(o)) {
+            for (n = 0; n < o.length; n++)
+              P(o[n]);
+            Object.freeze && Object.freeze(o);
           } 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);
+        else P(o);
       if (j.call(r, "key")) {
-        n = l(e);
-        var f = Object.keys(r).filter(function(K) {
+        o = u(e);
+        var d = 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(
+        n = 0 < d.length ? "{key: someKey, " + d.join(": ..., ") + ": ...}" : "{key: someKey}", C[o + 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} />`,
-          a,
           n,
-          f,
-          n
-        ), C[n + a] = !0);
+          o,
+          d,
+          o
+        ), C[o + n] = !0);
       }
-      if (n = null, t !== void 0 && (c(t), n = "" + t), d(r) && (c(r.key), n = "" + r.key), "key" in r) {
+      if (o = null, t !== void 0 && (l(t), o = "" + t), f(r) && (l(r.key), o = "" + r.key), "key" in r) {
         t = {};
         for (var g in r)
           g !== "key" && (t[g] = r[g]);
       } else t = r;
-      return n && m(
+      return o && m(
         t,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
       ), M(
         e,
-        n,
+        o,
         t,
-        o(),
+        a(),
         R,
         S
       );
@@ -229,27 +229,27 @@ React keys must be passed directly to JSX without using spread:
     };
     var w, h = {}, N = v.react_stack_bottom_frame.bind(
       v,
-      u
-    )(), D = O(s(u)), C = {};
+      s
+    )(), D = O(c(s)), C = {};
     _.Fragment = b, _.jsx = function(e, r, t) {
-      var a = 1e4 > k.recentlyCreatedOwnerStacks++;
+      var n = 1e4 > k.recentlyCreatedOwnerStacks++;
       return A(
         e,
         r,
         t,
         !1,
-        a ? Error("react-stack-top-frame") : N,
-        a ? O(s(e)) : D
+        n ? Error("react-stack-top-frame") : N,
+        n ? O(c(e)) : D
       );
     }, _.jsxs = function(e, r, t) {
-      var a = 1e4 > k.recentlyCreatedOwnerStacks++;
+      var n = 1e4 > k.recentlyCreatedOwnerStacks++;
       return A(
         e,
         r,
         t,
         !0,
-        a ? Error("react-stack-top-frame") : N,
-        a ? O(s(e)) : D
+        n ? Error("react-stack-top-frame") : N,
+        n ? O(c(e)) : D
       );
     };
   })()), _;
@@ -259,19 +259,19 @@ 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);
+function oe({ children: u, handleDragStart: i, dataTransfer: l, style: c }) {
+  const a = (s) => {
+    s.dataTransfer.setData("dataTransfer", JSON.stringify(l)), i(s);
   };
-  return /* @__PURE__ */ F.jsx("div", { draggable: "true", onDragStart: s, children: l });
+  return /* @__PURE__ */ F.jsx("div", { style: c, draggable: "true", onDragStart: a, children: u });
 }
-function se({ children: l, handleDropItem: i }) {
-  const c = (s) => {
-    s.preventDefault();
-    const o = s.dataTransfer.getData("dataTransfer"), u = JSON.parse(o);
-    i(s, u);
+function se({ children: u, handleDropItem: i, style: l }) {
+  const c = (a) => {
+    a.preventDefault();
+    const s = a.dataTransfer.getData("dataTransfer"), f = JSON.parse(s);
+    i(a, f);
   };
-  return /* @__PURE__ */ F.jsx("div", { onDragOver: (s) => s.preventDefault(), onDrop: c, children: l });
+  return /* @__PURE__ */ F.jsx("div", { style: l, onDragOver: (a) => a.preventDefault(), onDrop: c, children: u });
 }
 export {
   oe as Draggable,

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

@@ -1,6 +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:
+(function(i,E){typeof exports=="object"&&typeof module<"u"?E(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],E):(i=typeof globalThis<"u"?globalThis:i||self,E(i.DragAndDropKit={},i.React))})(this,(function(i,E){"use strict";var v={exports:{}},_={};var P;function W(){if(P)return _;P=1;var u=Symbol.for("react.transitional.element"),f=Symbol.for("react.fragment");function l(c,n,s){var d=null;if(s!==void 0&&(d=""+s),n.key!==void 0&&(d=""+n.key),"key"in n){s={};for(var b in n)b!=="key"&&(s[b]=n[b])}else s=n;return n=s.ref,{$$typeof:u,type:c,key:d,ref:n!==void 0?n:null,props:s}}return _.Fragment=f,_.jsx=l,_.jsxs=l,_}var p={};var j;function J(){return j||(j=1,process.env.NODE_ENV!=="production"&&(function(){function u(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:u(e.type)||"Memo";case k:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function f(e){return""+e}function l(e){try{f(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),f(e)}}function c(e){if(e===g)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===k)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function n(){var e=O.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function d(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=u(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,a,T,y){var o=t.ref;return e={$$typeof:C,type:e,key:r,props:t,_owner:a},(o!==void 0?o: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,a,T,y){var o=r.children;if(o!==void 0)if(a)if(oe(o)){for(a=0;a<o.length;a++)N(o[a]);Object.freeze&&Object.freeze(o)}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(o);if(Y.call(r,"key")){o=u(e);var m=Object.keys(r).filter(function(se){return se!=="key"});a=0<m.length?"{key: someKey, "+m.join(": ..., ")+": ...}":"{key: someKey}",L[o+a]||(m=0<m.length?"{"+m.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"})}));
+  <%s key={someKey} {...props} />`,a,o,m,o),L[o+a]=!0)}if(o=null,t!==void 0&&(l(t),o=""+t),d(r)&&(l(r.key),o=""+r.key),"key"in r){t={};for(var A in r)A!=="key"&&(t[A]=r[A])}else t=r;return o&&b(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),G(e,o,t,n(),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=E,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,s)(),M=S(c(s)),L={};p.Fragment=g,p.jsx=function(e,r,t){var a=1e4>O.recentlyCreatedOwnerStacks++;return w(e,r,t,!1,a?Error("react-stack-top-frame"):F,a?S(c(e)):M)},p.jsxs=function(e,r,t){var a=1e4>O.recentlyCreatedOwnerStacks++;return w(e,r,t,!0,a?Error("react-stack-top-frame"):F,a?S(c(e)):M)}})()),p}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:u,handleDragStart:f,dataTransfer:l,style:c}){const n=s=>{s.dataTransfer.setData("dataTransfer",JSON.stringify(l)),f(s)};return x.jsx("div",{style:c,draggable:"true",onDragStart:n,children:u})}function V({children:u,handleDropItem:f,style:l}){const c=n=>{n.preventDefault();const s=n.dataTransfer.getData("dataTransfer"),d=JSON.parse(s);f(n,d)};return x.jsx("div",{style:l,onDragOver:n=>n.preventDefault(),onDrop:c,children:u})}i.Draggable=q,i.DropZone=V,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/sanketskakad/react-drag-and-drop"
   },
   "private": false,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "description": "An open source, lightweight React.js library for implementing simple and flexible react-drag-and-drop functionality.",
   "keywords": [
     "react",