@bbki.ng/components 1.5.11 → 1.5.12

package/dist/index.d.ts

@@ -86,7 +86,7 @@ declare type PageProps = {
 declare const Page: (props: PageProps) => JSX.Element;
 
 declare type PopConfirmProps = {
-    onOk?: EventHandler<React.MouseEvent<HTMLButtonElement>>;
+    onOk?: EventHandler<React.MouseEvent<HTMLButtonElement>> | (() => Promise<void>);
     onCancel?: EventHandler<React.MouseEvent<HTMLButtonElement>>;
     className?: string;
     content?: any;

package/dist/index.js

@@ -301,83 +301,104 @@ var Page = (props) => {
 };
 
 // src/pop-confirm/PopConfirm.tsx
+var import_react10 = __toESM(require("react"));
+
+// src/blink-dot/BlinkDot.tsx
+var import_classnames5 = __toESM(require("classnames"));
 var import_react9 = __toESM(require("react"));
+var BlinkDot = (props) => {
+  const { className } = props;
+  return /* @__PURE__ */ import_react9.default.createElement("span", {
+    className: (0, import_classnames5.default)("inline-flex h-1 w-1 justify-center items-center relative", className)
+  }, /* @__PURE__ */ import_react9.default.createElement("span", {
+    className: "animate-ping-fast absolute inline-flex h-full w-full rounded-full bg-red-600"
+  }));
+};
+
+// src/pop-confirm/PopConfirm.tsx
 var PopConfirm = (props) => {
+  const [loading, setLoading] = (0, import_react10.useState)(false);
   const { onOk, onCancel, children, content, className } = props;
-  return /* @__PURE__ */ import_react9.default.createElement(Panel, {
+  return /* @__PURE__ */ import_react10.default.createElement(Panel, {
     className
-  }, /* @__PURE__ */ import_react9.default.createElement("div", {
+  }, /* @__PURE__ */ import_react10.default.createElement("div", {
     className: "mb-32"
-  }, children || content), /* @__PURE__ */ import_react9.default.createElement("div", {
+  }, children || content), /* @__PURE__ */ import_react10.default.createElement("div", {
     className: "flex justify-end"
-  }, onCancel && /* @__PURE__ */ import_react9.default.createElement(Button, {
+  }, onCancel && /* @__PURE__ */ import_react10.default.createElement(Button, {
     onClick: onCancel,
     type: "normal" /* NORMAL */
-  }, "Cancel"), onOk && /* @__PURE__ */ import_react9.default.createElement(Button, {
-    onClick: onOk,
-    className: "ml-16",
-    type: "primary" /* PRIMARY */
-  }, "OK")));
+  }, "Cancel"), onOk && /* @__PURE__ */ import_react10.default.createElement(Button, {
+    onClick: async (e) => {
+      setLoading(true);
+      await onOk(e);
+      setLoading(false);
+    },
+    className: "ml-16 relative",
+    type: loading ? "disabled" /* DISABLED */ : "primary" /* PRIMARY */
+  }, "OK", loading && /* @__PURE__ */ import_react10.default.createElement(BlinkDot, {
+    className: "!absolute top-2 right-2"
+  }))));
 };
 
 // src/table/Table.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var Table = (props) => {
   const { rowCount, rowRenderer, headerRenderer, className } = props;
   const rows = [];
   for (let i = 0; i < rowCount; i++) {
-    rows.push(/* @__PURE__ */ import_react10.default.createElement("tr", {
+    rows.push(/* @__PURE__ */ import_react11.default.createElement("tr", {
       key: i
     }, rowRenderer(i)));
   }
-  return /* @__PURE__ */ import_react10.default.createElement("table", {
+  return /* @__PURE__ */ import_react11.default.createElement("table", {
     className
-  }, headerRenderer && /* @__PURE__ */ import_react10.default.createElement("thead", null, /* @__PURE__ */ import_react10.default.createElement("tr", null, headerRenderer())), /* @__PURE__ */ import_react10.default.createElement("tbody", null, rows));
+  }, headerRenderer && /* @__PURE__ */ import_react11.default.createElement("thead", null, /* @__PURE__ */ import_react11.default.createElement("tr", null, headerRenderer())), /* @__PURE__ */ import_react11.default.createElement("tbody", null, rows));
 };
-Table.HCell = (props) => /* @__PURE__ */ import_react10.default.createElement("th", __spreadValues({}, props), props.children);
-Table.Cell = (props) => /* @__PURE__ */ import_react10.default.createElement("td", __spreadValues({}, props), props.children);
+Table.HCell = (props) => /* @__PURE__ */ import_react11.default.createElement("th", __spreadValues({}, props), props.children);
+Table.Cell = (props) => /* @__PURE__ */ import_react11.default.createElement("td", __spreadValues({}, props), props.children);
 
 // src/skeleton/Seleton.tsx
-var import_classnames6 = __toESM(require("classnames"));
-var import_react12 = __toESM(require("react"));
+var import_classnames7 = __toESM(require("classnames"));
+var import_react13 = __toESM(require("react"));
 
 // src/list/list.tsx
-var import_classnames5 = __toESM(require("classnames"));
-var import_react11 = __toESM(require("react"));
+var import_classnames6 = __toESM(require("classnames"));
+var import_react12 = __toESM(require("react"));
 var List = (props) => {
   const { items, itemRenderer, className, horizontal, compact } = props;
   const spaceCls = compact ? "" : horizontal ? "mr-3" : "mb-4";
-  return /* @__PURE__ */ import_react11.default.createElement("ul", {
-    className: (0, import_classnames5.default)(className, "list-style-none", {
+  return /* @__PURE__ */ import_react12.default.createElement("ul", {
+    className: (0, import_classnames6.default)(className, "list-style-none", {
       flex: horizontal,
       "align-center": horizontal
     })
   }, items.map((item, index) => {
-    return /* @__PURE__ */ import_react11.default.createElement("li", {
+    return /* @__PURE__ */ import_react12.default.createElement("li", {
       key: item.id || index,
-      className: (0, import_classnames5.default)(spaceCls, "flex-shrink-0")
+      className: (0, import_classnames6.default)(spaceCls, "flex-shrink-0")
     }, itemRenderer(item, index));
   }));
 };
 var TitledList = (props) => {
   const _a = props, { title, description } = _a, rest = __objRest(_a, ["title", "description"]);
   if (!title) {
-    return /* @__PURE__ */ import_react11.default.createElement(List, __spreadValues({}, rest));
+    return /* @__PURE__ */ import_react12.default.createElement(List, __spreadValues({}, rest));
   }
-  return /* @__PURE__ */ import_react11.default.createElement(Article, {
+  return /* @__PURE__ */ import_react12.default.createElement(Article, {
     title,
     description
-  }, /* @__PURE__ */ import_react11.default.createElement(List, __spreadValues({}, rest)));
+  }, /* @__PURE__ */ import_react12.default.createElement(List, __spreadValues({}, rest)));
 };
 var LinkList = (props) => {
   const _a = props, { title, description, links } = _a, rest = __objRest(_a, ["title", "description", "links"]);
   const renderLink = ({ name, to }) => {
-    return /* @__PURE__ */ import_react11.default.createElement(Link, {
+    return /* @__PURE__ */ import_react12.default.createElement(Link, {
       to,
       key: name
     }, name);
   };
-  return /* @__PURE__ */ import_react11.default.createElement(TitledList, __spreadValues({
+  return /* @__PURE__ */ import_react12.default.createElement(TitledList, __spreadValues({
     title,
     description,
     items: links,
@@ -401,20 +422,20 @@ var COLOR_MAPPING2 = {
 };
 var Skeleton = (props) => {
   const { bgColor = "gray" /* GRAY */, width = 26, height = 24 } = props;
-  return /* @__PURE__ */ import_react12.default.createElement("div", {
-    className: (0, import_classnames6.default)(COLOR_MAPPING2[bgColor], "animate-pulse", "rounded"),
+  return /* @__PURE__ */ import_react13.default.createElement("div", {
+    className: (0, import_classnames7.default)(COLOR_MAPPING2[bgColor], "animate-pulse", "rounded"),
     style: { width, height }
   });
 };
 var ArticleSkeleton = (props) => {
   const { children, titleLength, descriptionLength } = props;
-  return /* @__PURE__ */ import_react12.default.createElement(Article, {
-    title: /* @__PURE__ */ import_react12.default.createElement(Skeleton, {
+  return /* @__PURE__ */ import_react13.default.createElement(Article, {
+    title: /* @__PURE__ */ import_react13.default.createElement(Skeleton, {
       width: 36 * titleLength,
       height: 36,
       bgColor: "black" /* BLACK */
     }),
-    description: descriptionLength && /* @__PURE__ */ import_react12.default.createElement(Skeleton, {
+    description: descriptionLength && /* @__PURE__ */ import_react13.default.createElement(Skeleton, {
       width: 16 * descriptionLength
     })
   }, children);
@@ -422,21 +443,21 @@ var ArticleSkeleton = (props) => {
 var LinkListSkeleton = (props) => {
   const _a = props, { linksLength } = _a, rest = __objRest(_a, ["linksLength"]);
   const renderSkeleton = (length) => {
-    return /* @__PURE__ */ import_react12.default.createElement(Skeleton, {
+    return /* @__PURE__ */ import_react13.default.createElement(Skeleton, {
       width: length * 16,
       bgColor: "blue" /* BLUE */
     });
   };
-  return /* @__PURE__ */ import_react12.default.createElement(ArticleSkeleton, __spreadValues({}, rest), /* @__PURE__ */ import_react12.default.createElement(List, {
+  return /* @__PURE__ */ import_react13.default.createElement(ArticleSkeleton, __spreadValues({}, rest), /* @__PURE__ */ import_react13.default.createElement(List, {
     items: linksLength,
     itemRenderer: renderSkeleton
   }));
 };
 
 // src/drop-image/DropImage.tsx
-var import_classnames7 = __toESM(require("classnames"));
-var import_react14 = __toESM(require("react"));
-var import_react15 = require("react");
+var import_classnames8 = __toESM(require("classnames"));
+var import_react15 = __toESM(require("react"));
+var import_react16 = require("react");
 
 // src/drop-image/utils.ts
 var wait = (d) => new Promise((r) => setTimeout(r, d));
@@ -444,12 +465,12 @@ var noop = () => {
 };
 
 // src/drop-image/useDropImage.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 var useDropImage = (params) => {
-  const [isDragOver, setIsDragOver] = (0, import_react13.useState)(false);
-  const [imageSrc, setImageSrc] = (0, import_react13.useState)("");
-  const [imageSize, setImageSize] = (0, import_react13.useState)({ width: 0, height: 0 });
-  const imageFile = (0, import_react13.useRef)(null);
+  const [isDragOver, setIsDragOver] = (0, import_react14.useState)(false);
+  const [imageSrc, setImageSrc] = (0, import_react14.useState)("");
+  const [imageSize, setImageSize] = (0, import_react14.useState)({ width: 0, height: 0 });
+  const imageFile = (0, import_react14.useRef)(null);
   const {
     portraitImageWidth = 384,
     landscapeImageWidth = 500,
@@ -481,15 +502,15 @@ var useDropImage = (params) => {
       setImageSrc("");
     }
   };
-  const handleDragOver = (0, import_react13.useCallback)((ev) => {
+  const handleDragOver = (0, import_react14.useCallback)((ev) => {
     ev.preventDefault();
     setIsDragOver(true);
     ev.dataTransfer.dropEffect = "move";
   }, []);
-  const handleDragLeave = (0, import_react13.useCallback)(() => {
+  const handleDragLeave = (0, import_react14.useCallback)(() => {
     setIsDragOver(false);
   }, []);
-  const handleDrop = (0, import_react13.useCallback)((ev) => {
+  const handleDrop = (0, import_react14.useCallback)((ev) => {
     ev.preventDefault();
     setIsDragOver(false);
     const file = ev.dataTransfer.files[0];
@@ -522,7 +543,7 @@ var useDropImage = (params) => {
     }
     img.onload = updateFunc;
   };
-  const imageRef = (0, import_react13.useCallback)((input) => {
+  const imageRef = (0, import_react14.useCallback)((input) => {
     if (!input) {
       return;
     }
@@ -549,8 +570,8 @@ var ImagePreviewer = (props) => {
     imageSrc,
     className
   } = props;
-  return /* @__PURE__ */ import_react14.default.createElement("img", {
-    className: (0, import_classnames7.default)(className, "max-w-[100%]", "h-[auto]", "duration-300", "transition-opacity", "opacity-100", {
+  return /* @__PURE__ */ import_react15.default.createElement("img", {
+    className: (0, import_classnames8.default)(className, "max-w-[100%]", "h-[auto]", "duration-300", "transition-opacity", "opacity-100", {
       "opacity-0": !showImagePreviewer,
       "!m-0": !showImagePreviewer,
       "!p-0": !showImagePreviewer
@@ -571,9 +592,9 @@ var GhostDropImage = (props) => {
     children,
     placeholder
   } = props;
-  const [coverVisible, setCoverVisible] = (0, import_react15.useState)(false);
-  const [imageVisible, setImageVisible] = (0, import_react15.useState)(false);
-  const handleDocDragEnter = (0, import_react14.useCallback)(() => {
+  const [coverVisible, setCoverVisible] = (0, import_react16.useState)(false);
+  const [imageVisible, setImageVisible] = (0, import_react16.useState)(false);
+  const handleDocDragEnter = (0, import_react15.useCallback)(() => {
     setCoverVisible(true);
   }, []);
   const {
@@ -598,19 +619,19 @@ var GhostDropImage = (props) => {
       reset();
     }
   });
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     document.addEventListener("dragenter", handleDocDragEnter);
     return () => {
       document.removeEventListener("dragenter", handleDocDragEnter);
     };
   }, []);
-  const coverCls = (0, import_classnames7.default)("fixed", "top-0", "left-0", "h-full", "w-full", {
+  const coverCls = (0, import_classnames8.default)("fixed", "top-0", "left-0", "h-full", "w-full", {
     "lqip-blur": coverVisible,
     "z-[999]": coverVisible,
     block: coverVisible,
     hidden: !coverVisible
   });
-  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement("div", {
+  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement("div", {
     className: coverCls,
     onDragLeave: () => {
       handleDragLeave();
@@ -623,7 +644,7 @@ var GhostDropImage = (props) => {
     imageRef,
     imageSize,
     imageSrc
-  }) : /* @__PURE__ */ import_react14.default.createElement(ImagePreviewer, {
+  }) : /* @__PURE__ */ import_react15.default.createElement(ImagePreviewer, {
     className,
     visible: imageVisible,
     imageRef,
@@ -649,9 +670,9 @@ var DropImage = (props) => {
     }
   } = props;
   if (ghost) {
-    return /* @__PURE__ */ import_react14.default.createElement(GhostDropImage, __spreadValues({}, props));
+    return /* @__PURE__ */ import_react15.default.createElement(GhostDropImage, __spreadValues({}, props));
   }
-  const [showImagePreviewer, setShowImagePreviewer] = (0, import_react15.useState)(false);
+  const [showImagePreviewer, setShowImagePreviewer] = (0, import_react16.useState)(false);
   const {
     handleDragLeave,
     handleDragOver,
@@ -680,8 +701,8 @@ var DropImage = (props) => {
       height: imageSize.height || dropAreaStyle.height
     });
   };
-  return /* @__PURE__ */ import_react14.default.createElement("div", {
-    className: (0, import_classnames7.default)(className, "transition-all items-center justify-center flex duration-200 ease-in-out", {
+  return /* @__PURE__ */ import_react15.default.createElement("div", {
+    className: (0, import_classnames8.default)(className, "transition-all items-center justify-center flex duration-200 ease-in-out", {
       "shadow-input": !imageSrc,
       "shadow-empty": imageSrc
     }),
@@ -694,7 +715,7 @@ var DropImage = (props) => {
     imageRef,
     imageSize,
     imageSrc
-  }) : /* @__PURE__ */ import_react14.default.createElement(ImagePreviewer, {
+  }) : /* @__PURE__ */ import_react15.default.createElement(ImagePreviewer, {
     visible: showImagePreviewer,
     imageRef,
     imageSrc,
@@ -702,18 +723,6 @@ var DropImage = (props) => {
   }), !imageSrc && placeholder);
 };
 
-// src/blink-dot/BlinkDot.tsx
-var import_classnames8 = __toESM(require("classnames"));
-var import_react16 = __toESM(require("react"));
-var BlinkDot = (props) => {
-  const { className } = props;
-  return /* @__PURE__ */ import_react16.default.createElement("span", {
-    className: (0, import_classnames8.default)("inline-flex h-1 w-1 justify-center items-center relative", className)
-  }, /* @__PURE__ */ import_react16.default.createElement("span", {
-    className: "animate-ping-fast absolute inline-flex h-full w-full rounded-full bg-red-600"
-  }));
-};
-
 // src/layout/layout.tsx
 var import_classnames9 = __toESM(require("classnames"));
 var import_react17 = __toESM(require("react"));

package/dist/index.mjs

@@ -247,59 +247,80 @@ var Page = (props) => {
 };
 
 // src/pop-confirm/PopConfirm.tsx
+import React11, { useState as useState2 } from "react";
+
+// src/blink-dot/BlinkDot.tsx
+import classNames5 from "classnames";
 import React10 from "react";
+var BlinkDot = (props) => {
+  const { className } = props;
+  return /* @__PURE__ */ React10.createElement("span", {
+    className: classNames5("inline-flex h-1 w-1 justify-center items-center relative", className)
+  }, /* @__PURE__ */ React10.createElement("span", {
+    className: "animate-ping-fast absolute inline-flex h-full w-full rounded-full bg-red-600"
+  }));
+};
+
+// src/pop-confirm/PopConfirm.tsx
 var PopConfirm = (props) => {
+  const [loading, setLoading] = useState2(false);
   const { onOk, onCancel, children, content, className } = props;
-  return /* @__PURE__ */ React10.createElement(Panel, {
+  return /* @__PURE__ */ React11.createElement(Panel, {
     className
-  }, /* @__PURE__ */ React10.createElement("div", {
+  }, /* @__PURE__ */ React11.createElement("div", {
     className: "mb-32"
-  }, children || content), /* @__PURE__ */ React10.createElement("div", {
+  }, children || content), /* @__PURE__ */ React11.createElement("div", {
     className: "flex justify-end"
-  }, onCancel && /* @__PURE__ */ React10.createElement(Button, {
+  }, onCancel && /* @__PURE__ */ React11.createElement(Button, {
     onClick: onCancel,
     type: "normal" /* NORMAL */
-  }, "Cancel"), onOk && /* @__PURE__ */ React10.createElement(Button, {
-    onClick: onOk,
-    className: "ml-16",
-    type: "primary" /* PRIMARY */
-  }, "OK")));
+  }, "Cancel"), onOk && /* @__PURE__ */ React11.createElement(Button, {
+    onClick: async (e) => {
+      setLoading(true);
+      await onOk(e);
+      setLoading(false);
+    },
+    className: "ml-16 relative",
+    type: loading ? "disabled" /* DISABLED */ : "primary" /* PRIMARY */
+  }, "OK", loading && /* @__PURE__ */ React11.createElement(BlinkDot, {
+    className: "!absolute top-2 right-2"
+  }))));
 };
 
 // src/table/Table.tsx
-import React11 from "react";
+import React12 from "react";
 var Table = (props) => {
   const { rowCount, rowRenderer, headerRenderer, className } = props;
   const rows = [];
   for (let i = 0; i < rowCount; i++) {
-    rows.push(/* @__PURE__ */ React11.createElement("tr", {
+    rows.push(/* @__PURE__ */ React12.createElement("tr", {
       key: i
     }, rowRenderer(i)));
   }
-  return /* @__PURE__ */ React11.createElement("table", {
+  return /* @__PURE__ */ React12.createElement("table", {
     className
-  }, headerRenderer && /* @__PURE__ */ React11.createElement("thead", null, /* @__PURE__ */ React11.createElement("tr", null, headerRenderer())), /* @__PURE__ */ React11.createElement("tbody", null, rows));
+  }, headerRenderer && /* @__PURE__ */ React12.createElement("thead", null, /* @__PURE__ */ React12.createElement("tr", null, headerRenderer())), /* @__PURE__ */ React12.createElement("tbody", null, rows));
 };
-Table.HCell = (props) => /* @__PURE__ */ React11.createElement("th", __spreadValues({}, props), props.children);
-Table.Cell = (props) => /* @__PURE__ */ React11.createElement("td", __spreadValues({}, props), props.children);
+Table.HCell = (props) => /* @__PURE__ */ React12.createElement("th", __spreadValues({}, props), props.children);
+Table.Cell = (props) => /* @__PURE__ */ React12.createElement("td", __spreadValues({}, props), props.children);
 
 // src/skeleton/Seleton.tsx
-import classNames5 from "classnames";
-import React13 from "react";
+import classNames6 from "classnames";
+import React14 from "react";
 
 // src/list/list.tsx
 import cls from "classnames";
-import React12 from "react";
+import React13 from "react";
 var List = (props) => {
   const { items, itemRenderer, className, horizontal, compact } = props;
   const spaceCls = compact ? "" : horizontal ? "mr-3" : "mb-4";
-  return /* @__PURE__ */ React12.createElement("ul", {
+  return /* @__PURE__ */ React13.createElement("ul", {
     className: cls(className, "list-style-none", {
       flex: horizontal,
       "align-center": horizontal
     })
   }, items.map((item, index) => {
-    return /* @__PURE__ */ React12.createElement("li", {
+    return /* @__PURE__ */ React13.createElement("li", {
       key: item.id || index,
       className: cls(spaceCls, "flex-shrink-0")
     }, itemRenderer(item, index));
@@ -308,22 +329,22 @@ var List = (props) => {
 var TitledList = (props) => {
   const _a = props, { title, description } = _a, rest = __objRest(_a, ["title", "description"]);
   if (!title) {
-    return /* @__PURE__ */ React12.createElement(List, __spreadValues({}, rest));
+    return /* @__PURE__ */ React13.createElement(List, __spreadValues({}, rest));
   }
-  return /* @__PURE__ */ React12.createElement(Article, {
+  return /* @__PURE__ */ React13.createElement(Article, {
     title,
     description
-  }, /* @__PURE__ */ React12.createElement(List, __spreadValues({}, rest)));
+  }, /* @__PURE__ */ React13.createElement(List, __spreadValues({}, rest)));
 };
 var LinkList = (props) => {
   const _a = props, { title, description, links } = _a, rest = __objRest(_a, ["title", "description", "links"]);
   const renderLink = ({ name, to }) => {
-    return /* @__PURE__ */ React12.createElement(Link, {
+    return /* @__PURE__ */ React13.createElement(Link, {
       to,
       key: name
     }, name);
   };
-  return /* @__PURE__ */ React12.createElement(TitledList, __spreadValues({
+  return /* @__PURE__ */ React13.createElement(TitledList, __spreadValues({
     title,
     description,
     items: links,
@@ -347,20 +368,20 @@ var COLOR_MAPPING2 = {
 };
 var Skeleton = (props) => {
   const { bgColor = "gray" /* GRAY */, width = 26, height = 24 } = props;
-  return /* @__PURE__ */ React13.createElement("div", {
-    className: classNames5(COLOR_MAPPING2[bgColor], "animate-pulse", "rounded"),
+  return /* @__PURE__ */ React14.createElement("div", {
+    className: classNames6(COLOR_MAPPING2[bgColor], "animate-pulse", "rounded"),
     style: { width, height }
   });
 };
 var ArticleSkeleton = (props) => {
   const { children, titleLength, descriptionLength } = props;
-  return /* @__PURE__ */ React13.createElement(Article, {
-    title: /* @__PURE__ */ React13.createElement(Skeleton, {
+  return /* @__PURE__ */ React14.createElement(Article, {
+    title: /* @__PURE__ */ React14.createElement(Skeleton, {
       width: 36 * titleLength,
       height: 36,
       bgColor: "black" /* BLACK */
     }),
-    description: descriptionLength && /* @__PURE__ */ React13.createElement(Skeleton, {
+    description: descriptionLength && /* @__PURE__ */ React14.createElement(Skeleton, {
       width: 16 * descriptionLength
     })
   }, children);
@@ -368,12 +389,12 @@ var ArticleSkeleton = (props) => {
 var LinkListSkeleton = (props) => {
   const _a = props, { linksLength } = _a, rest = __objRest(_a, ["linksLength"]);
   const renderSkeleton = (length) => {
-    return /* @__PURE__ */ React13.createElement(Skeleton, {
+    return /* @__PURE__ */ React14.createElement(Skeleton, {
       width: length * 16,
       bgColor: "blue" /* BLUE */
     });
   };
-  return /* @__PURE__ */ React13.createElement(ArticleSkeleton, __spreadValues({}, rest), /* @__PURE__ */ React13.createElement(List, {
+  return /* @__PURE__ */ React14.createElement(ArticleSkeleton, __spreadValues({}, rest), /* @__PURE__ */ React14.createElement(List, {
     items: linksLength,
     itemRenderer: renderSkeleton
   }));
@@ -381,11 +402,11 @@ var LinkListSkeleton = (props) => {
 
 // src/drop-image/DropImage.tsx
 import cls2 from "classnames";
-import React14, {
+import React15, {
   useEffect as useEffect2,
   useCallback as useCallback2
 } from "react";
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/drop-image/utils.ts
 var wait = (d) => new Promise((r) => setTimeout(r, d));
@@ -393,11 +414,11 @@ var noop = () => {
 };
 
 // src/drop-image/useDropImage.ts
-import { useState as useState2, useCallback, useRef } from "react";
+import { useState as useState3, useCallback, useRef } from "react";
 var useDropImage = (params) => {
-  const [isDragOver, setIsDragOver] = useState2(false);
-  const [imageSrc, setImageSrc] = useState2("");
-  const [imageSize, setImageSize] = useState2({ width: 0, height: 0 });
+  const [isDragOver, setIsDragOver] = useState3(false);
+  const [imageSrc, setImageSrc] = useState3("");
+  const [imageSize, setImageSize] = useState3({ width: 0, height: 0 });
   const imageFile = useRef(null);
   const {
     portraitImageWidth = 384,
@@ -498,7 +519,7 @@ var ImagePreviewer = (props) => {
     imageSrc,
     className
   } = props;
-  return /* @__PURE__ */ React14.createElement("img", {
+  return /* @__PURE__ */ React15.createElement("img", {
     className: cls2(className, "max-w-[100%]", "h-[auto]", "duration-300", "transition-opacity", "opacity-100", {
       "opacity-0": !showImagePreviewer,
       "!m-0": !showImagePreviewer,
@@ -520,8 +541,8 @@ var GhostDropImage = (props) => {
     children,
     placeholder
   } = props;
-  const [coverVisible, setCoverVisible] = useState3(false);
-  const [imageVisible, setImageVisible] = useState3(false);
+  const [coverVisible, setCoverVisible] = useState4(false);
+  const [imageVisible, setImageVisible] = useState4(false);
   const handleDocDragEnter = useCallback2(() => {
     setCoverVisible(true);
   }, []);
@@ -559,7 +580,7 @@ var GhostDropImage = (props) => {
     block: coverVisible,
     hidden: !coverVisible
   });
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("div", {
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("div", {
     className: coverCls,
     onDragLeave: () => {
       handleDragLeave();
@@ -572,7 +593,7 @@ var GhostDropImage = (props) => {
     imageRef,
     imageSize,
     imageSrc
-  }) : /* @__PURE__ */ React14.createElement(ImagePreviewer, {
+  }) : /* @__PURE__ */ React15.createElement(ImagePreviewer, {
     className,
     visible: imageVisible,
     imageRef,
@@ -598,9 +619,9 @@ var DropImage = (props) => {
     }
   } = props;
   if (ghost) {
-    return /* @__PURE__ */ React14.createElement(GhostDropImage, __spreadValues({}, props));
+    return /* @__PURE__ */ React15.createElement(GhostDropImage, __spreadValues({}, props));
   }
-  const [showImagePreviewer, setShowImagePreviewer] = useState3(false);
+  const [showImagePreviewer, setShowImagePreviewer] = useState4(false);
   const {
     handleDragLeave,
     handleDragOver,
@@ -629,7 +650,7 @@ var DropImage = (props) => {
       height: imageSize.height || dropAreaStyle.height
     });
   };
-  return /* @__PURE__ */ React14.createElement("div", {
+  return /* @__PURE__ */ React15.createElement("div", {
     className: cls2(className, "transition-all items-center justify-center flex duration-200 ease-in-out", {
       "shadow-input": !imageSrc,
       "shadow-empty": imageSrc
@@ -643,7 +664,7 @@ var DropImage = (props) => {
     imageRef,
     imageSize,
     imageSrc
-  }) : /* @__PURE__ */ React14.createElement(ImagePreviewer, {
+  }) : /* @__PURE__ */ React15.createElement(ImagePreviewer, {
     visible: showImagePreviewer,
     imageRef,
     imageSrc,
@@ -651,18 +672,6 @@ var DropImage = (props) => {
   }), !imageSrc && placeholder);
 };
 
-// src/blink-dot/BlinkDot.tsx
-import classNames6 from "classnames";
-import React15 from "react";
-var BlinkDot = (props) => {
-  const { className } = props;
-  return /* @__PURE__ */ React15.createElement("span", {
-    className: classNames6("inline-flex h-1 w-1 justify-center items-center relative", className)
-  }, /* @__PURE__ */ React15.createElement("span", {
-    className: "animate-ping-fast absolute inline-flex h-full w-full rounded-full bg-red-600"
-  }));
-};
-
 // src/layout/layout.tsx
 import cls3 from "classnames";
 import React16 from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/components",
-  "version": "1.5.11",
+  "version": "1.5.12",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",