@bbki.ng/components 2.1.43 → 2.2.1

package/dist/index.cjs

@@ -33,6 +33,7 @@ __export(lib_exports, {
   Button: () => Button,
   ButtonType: () => ButtonType,
   DropImage: () => DropImage,
+  DropZone: () => DropZone,
   Error: () => Error2,
   ErrorBoundary: () => ErrorBoundary,
   Gallery: () => Gallery,
@@ -1094,13 +1095,13 @@ var RandomRowsLayout = import_react20.default.memo(
           colNum,
           generateRandomBoolean()
         );
-        const cls4 = (0, import_classnames11.default)(
+        const cls5 = (0, import_classnames11.default)(
           "flex items-center justify-center flex-shrink-0 flex-grow-0",
           "basis-full",
           generatedCls
         );
         return /* @__PURE__ */ import_react20.default.createElement("div", {
-          className: cls4,
+          className: cls5,
           key: col
         }, cellRenderer(indexRef.current - 1, randBoolArr[col], col));
       }));
@@ -1299,6 +1300,51 @@ var LoadingSpiral = (props) => {
     )
   });
 };
+
+// lib/drop-zone/DropZone.tsx
+var import_react23 = __toESM(require("react"), 1);
+var import_classnames14 = __toESM(require("classnames"), 1);
+var DropZone = (props) => {
+  const { onDrop, children, className, style } = props;
+  const [coverVisible, setCoverVisible] = (0, import_react23.useState)(false);
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setCoverVisible(false);
+    const file = e.dataTransfer.files[0];
+    onDrop(file);
+  };
+  const handleDocDragEnter = (0, import_react23.useCallback)((e) => {
+    e.preventDefault();
+    setCoverVisible(true);
+  }, []);
+  (0, import_react23.useEffect)(() => {
+    document.addEventListener("dragenter", handleDocDragEnter);
+    return () => {
+      document.removeEventListener("dragenter", handleDocDragEnter);
+    };
+  }, []);
+  if (props.disabled) {
+    return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, children);
+  }
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setCoverVisible(true);
+  };
+  const coverCls = (0, import_classnames14.default)("fixed", "top-0", "left-0", "h-full", "w-full", {
+    "text-blur": coverVisible,
+    "z-[999]": coverVisible,
+    block: coverVisible,
+    hidden: !coverVisible
+  });
+  return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement("div", {
+    className: coverCls,
+    onDragLeave: () => {
+      setCoverVisible(false);
+    },
+    onDragOver: handleDragOver,
+    onDrop: handleDrop
+  }), children);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Article,
@@ -1308,6 +1354,7 @@ var LoadingSpiral = (props) => {
   Button,
   ButtonType,
   DropImage,
+  DropZone,
   Error,
   ErrorBoundary,
   Gallery,