@bbki.ng/components 1.5.9 → 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;
@@ -116,14 +116,25 @@ declare const Table: {
 declare enum SkeletonColor {
     BLUE = "blue",
     RED = "red",
-    GRAY = "gray"
+    GRAY = "gray",
+    BLACK = "black"
 }
-declare type SkeletonProps = {
+interface SkeletonProps {
     width?: number;
     height?: number;
     bgColor?: SkeletonColor;
-};
-declare const Skeleton: (props: SkeletonProps) => JSX.Element;
+}
+interface ArticleSkeletonProps extends SkeletonProps {
+    titleLength: number;
+    descriptionLength?: number;
+    children?: any;
+}
+interface LinkListSkeletonProps extends ArticleSkeletonProps {
+    linksLength: number[];
+}
+declare const Skeleton: (props: SkeletonProps) => JSX.Element;
+declare const ArticleSkeleton: (props: ArticleSkeletonProps) => JSX.Element;
+declare const LinkListSkeleton: (props: LinkListSkeletonProps) => JSX.Element;
 
 interface ImagePreviewerProps {
     className?: string;
@@ -182,4 +193,4 @@ interface LinkListProps extends Omit<listProps, "itemRenderer" | "items"> {
 }
 declare const LinkList: (props: LinkListProps) => JSX.Element;
 
-export { Article, ArticleProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, ImageDropProps, ImagePreviewerProps, Link, LinkColor, LinkList, LinkListProps, LinkProps, List, Logo, LogoProps, Nav, NavProps, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags, ThreeColLayout, TitledList, TitledListProps, listProps, threeColLayoutProps };
+export { Article, ArticleProps, ArticleSkeleton, ArticleSkeletonProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, ImageDropProps, ImagePreviewerProps, Link, LinkColor, LinkList, LinkListProps, LinkListSkeleton, LinkListSkeletonProps, LinkProps, List, Logo, LogoProps, Nav, NavProps, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags, ThreeColLayout, TitledList, TitledListProps, listProps, threeColLayoutProps };

package/dist/index.js

@@ -59,6 +59,7 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 var src_exports = {};
 __export(src_exports, {
   Article: () => Article,
+  ArticleSkeleton: () => ArticleSkeleton,
   BlinkDot: () => BlinkDot,
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
@@ -67,6 +68,7 @@ __export(src_exports, {
   Link: () => Link,
   LinkColor: () => LinkColor,
   LinkList: () => LinkList,
+  LinkListSkeleton: () => LinkListSkeleton,
   List: () => List,
   Logo: () => Logo,
   Nav: () => Nav,
@@ -299,68 +301,163 @@ 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_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_classnames7 = __toESM(require("classnames"));
+var import_react13 = __toESM(require("react"));
+
+// src/list/list.tsx
+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_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_react12.default.createElement("li", {
+      key: item.id || index,
+      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_react12.default.createElement(List, __spreadValues({}, rest));
+  }
+  return /* @__PURE__ */ import_react12.default.createElement(Article, {
+    title,
+    description
+  }, /* @__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_react12.default.createElement(Link, {
+      to,
+      key: name
+    }, name);
+  };
+  return /* @__PURE__ */ import_react12.default.createElement(TitledList, __spreadValues({
+    title,
+    description,
+    items: links,
+    itemRenderer: renderLink
+  }, rest));
 };
-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);
 
 // src/skeleton/Seleton.tsx
-var import_classnames5 = __toESM(require("classnames"));
-var import_react11 = __toESM(require("react"));
 var SkeletonColor = /* @__PURE__ */ ((SkeletonColor2) => {
   SkeletonColor2["BLUE"] = "blue";
   SkeletonColor2["RED"] = "red";
   SkeletonColor2["GRAY"] = "gray";
+  SkeletonColor2["BLACK"] = "black";
   return SkeletonColor2;
 })(SkeletonColor || {});
 var COLOR_MAPPING2 = {
   ["blue" /* BLUE */]: "bg-blue-100",
   ["red" /* RED */]: "bg-red-100",
-  ["gray" /* GRAY */]: "bg-gray-100"
+  ["gray" /* GRAY */]: "bg-gray-100",
+  ["black" /* BLACK */]: "bg-gray-200"
 };
 var Skeleton = (props) => {
   const { bgColor = "gray" /* GRAY */, width = 26, height = 24 } = props;
-  return /* @__PURE__ */ import_react11.default.createElement("div", {
-    className: (0, import_classnames5.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_react13.default.createElement(Article, {
+    title: /* @__PURE__ */ import_react13.default.createElement(Skeleton, {
+      width: 36 * titleLength,
+      height: 36,
+      bgColor: "black" /* BLACK */
+    }),
+    description: descriptionLength && /* @__PURE__ */ import_react13.default.createElement(Skeleton, {
+      width: 16 * descriptionLength
+    })
+  }, children);
+};
+var LinkListSkeleton = (props) => {
+  const _a = props, { linksLength } = _a, rest = __objRest(_a, ["linksLength"]);
+  const renderSkeleton = (length) => {
+    return /* @__PURE__ */ import_react13.default.createElement(Skeleton, {
+      width: length * 16,
+      bgColor: "blue" /* BLUE */
+    });
+  };
+  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_classnames6 = __toESM(require("classnames"));
-var import_react13 = __toESM(require("react"));
-var import_react14 = 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));
@@ -368,12 +465,12 @@ var noop = () => {
 };
 
 // src/drop-image/useDropImage.ts
-var import_react12 = require("react");
+var import_react14 = require("react");
 var useDropImage = (params) => {
-  const [isDragOver, setIsDragOver] = (0, import_react12.useState)(false);
-  const [imageSrc, setImageSrc] = (0, import_react12.useState)("");
-  const [imageSize, setImageSize] = (0, import_react12.useState)({ width: 0, height: 0 });
-  const imageFile = (0, import_react12.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,
@@ -405,18 +502,21 @@ var useDropImage = (params) => {
       setImageSrc("");
     }
   };
-  const handleDragOver = (0, import_react12.useCallback)((ev) => {
+  const handleDragOver = (0, import_react14.useCallback)((ev) => {
     ev.preventDefault();
     setIsDragOver(true);
     ev.dataTransfer.dropEffect = "move";
   }, []);
-  const handleDragLeave = (0, import_react12.useCallback)(() => {
+  const handleDragLeave = (0, import_react14.useCallback)(() => {
     setIsDragOver(false);
   }, []);
-  const handleDrop = (0, import_react12.useCallback)((ev) => {
+  const handleDrop = (0, import_react14.useCallback)((ev) => {
     ev.preventDefault();
     setIsDragOver(false);
     const file = ev.dataTransfer.files[0];
+    if (!file || !file.type.startsWith("image")) {
+      return;
+    }
     imageFile.current = file;
     setPreviewImageSrcByFile(file);
     onDrop(ev, file);
@@ -443,7 +543,7 @@ var useDropImage = (params) => {
     }
     img.onload = updateFunc;
   };
-  const imageRef = (0, import_react12.useCallback)((input) => {
+  const imageRef = (0, import_react14.useCallback)((input) => {
     if (!input) {
       return;
     }
@@ -470,8 +570,8 @@ var ImagePreviewer = (props) => {
     imageSrc,
     className
   } = props;
-  return /* @__PURE__ */ import_react13.default.createElement("img", {
-    className: (0, import_classnames6.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
@@ -492,9 +592,9 @@ var GhostDropImage = (props) => {
     children,
     placeholder
   } = props;
-  const [coverVisible, setCoverVisible] = (0, import_react14.useState)(false);
-  const [imageVisible, setImageVisible] = (0, import_react14.useState)(false);
-  const handleDocDragEnter = (0, import_react13.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 {
@@ -519,19 +619,19 @@ var GhostDropImage = (props) => {
       reset();
     }
   });
-  (0, import_react13.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     document.addEventListener("dragenter", handleDocDragEnter);
     return () => {
       document.removeEventListener("dragenter", handleDocDragEnter);
     };
   }, []);
-  const coverCls = (0, import_classnames6.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_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("div", {
+  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement("div", {
     className: coverCls,
     onDragLeave: () => {
       handleDragLeave();
@@ -544,7 +644,7 @@ var GhostDropImage = (props) => {
     imageRef,
     imageSize,
     imageSrc
-  }) : /* @__PURE__ */ import_react13.default.createElement(ImagePreviewer, {
+  }) : /* @__PURE__ */ import_react15.default.createElement(ImagePreviewer, {
     className,
     visible: imageVisible,
     imageRef,
@@ -570,9 +670,9 @@ var DropImage = (props) => {
     }
   } = props;
   if (ghost) {
-    return /* @__PURE__ */ import_react13.default.createElement(GhostDropImage, __spreadValues({}, props));
+    return /* @__PURE__ */ import_react15.default.createElement(GhostDropImage, __spreadValues({}, props));
   }
-  const [showImagePreviewer, setShowImagePreviewer] = (0, import_react14.useState)(false);
+  const [showImagePreviewer, setShowImagePreviewer] = (0, import_react16.useState)(false);
   const {
     handleDragLeave,
     handleDragOver,
@@ -601,8 +701,8 @@ var DropImage = (props) => {
       height: imageSize.height || dropAreaStyle.height
     });
   };
-  return /* @__PURE__ */ import_react13.default.createElement("div", {
-    className: (0, import_classnames6.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
     }),
@@ -615,7 +715,7 @@ var DropImage = (props) => {
     imageRef,
     imageSize,
     imageSrc
-  }) : /* @__PURE__ */ import_react13.default.createElement(ImagePreviewer, {
+  }) : /* @__PURE__ */ import_react15.default.createElement(ImagePreviewer, {
     visible: showImagePreviewer,
     imageRef,
     imageSrc,
@@ -623,84 +723,29 @@ var DropImage = (props) => {
   }), !imageSrc && placeholder);
 };
 
-// src/blink-dot/BlinkDot.tsx
-var import_classnames7 = __toESM(require("classnames"));
-var import_react15 = __toESM(require("react"));
-var BlinkDot = (props) => {
-  const { className } = props;
-  return /* @__PURE__ */ import_react15.default.createElement("span", {
-    className: (0, import_classnames7.default)("inline-flex h-1 w-1 justify-center items-center relative", className)
-  }, /* @__PURE__ */ import_react15.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_classnames8 = __toESM(require("classnames"));
-var import_react16 = __toESM(require("react"));
+var import_classnames9 = __toESM(require("classnames"));
+var import_react17 = __toESM(require("react"));
 var ThreeColLayout = (props) => {
   const { leftRenderer, middleRenderer, rightRenderer } = props;
-  const colCls = (0, import_classnames8.default)("max-h-full overflow-auto md:block py-64");
-  return /* @__PURE__ */ import_react16.default.createElement("div", {
+  const colCls = (0, import_classnames9.default)("max-h-full overflow-auto md:block py-64");
+  return /* @__PURE__ */ import_react17.default.createElement("div", {
     className: "grid grid-cols-1 xl:grid-cols-3 gap-4 h-full w-full"
-  }, /* @__PURE__ */ import_react16.default.createElement("div", {
-    className: (0, import_classnames8.default)("hidden", colCls)
-  }, leftRenderer && leftRenderer()), /* @__PURE__ */ import_react16.default.createElement("div", {
-    className: (0, import_classnames8.default)(colCls, "sm:px-128 xl:px-0 no-scrollbar", "relative", {
+  }, /* @__PURE__ */ import_react17.default.createElement("div", {
+    className: (0, import_classnames9.default)("hidden", colCls)
+  }, leftRenderer && leftRenderer()), /* @__PURE__ */ import_react17.default.createElement("div", {
+    className: (0, import_classnames9.default)(colCls, "sm:px-128 xl:px-0 no-scrollbar", "relative", {
       hidden: !middleRenderer
     })
-  }, middleRenderer && middleRenderer()), /* @__PURE__ */ import_react16.default.createElement("div", {
-    className: (0, import_classnames8.default)("hidden", colCls)
+  }, middleRenderer && middleRenderer()), /* @__PURE__ */ import_react17.default.createElement("div", {
+    className: (0, import_classnames9.default)("hidden", colCls)
   }, rightRenderer && rightRenderer()));
 };
-
-// src/list/list.tsx
-var import_classnames9 = __toESM(require("classnames"));
-var import_react17 = __toESM(require("react"));
-var List = (props) => {
-  const { items, itemRenderer, className, horizontal, compact } = props;
-  const spaceCls = compact ? "" : horizontal ? "mr-3" : "mb-4";
-  return /* @__PURE__ */ import_react17.default.createElement("ul", {
-    className: (0, import_classnames9.default)(className, "list-style-none", {
-      flex: horizontal,
-      "align-center": horizontal
-    })
-  }, items.map((item, index) => {
-    return /* @__PURE__ */ import_react17.default.createElement("li", {
-      key: item.id || index,
-      className: (0, import_classnames9.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_react17.default.createElement(List, __spreadValues({}, rest));
-  }
-  return /* @__PURE__ */ import_react17.default.createElement(Article, {
-    title,
-    description
-  }, /* @__PURE__ */ import_react17.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_react17.default.createElement(Link, {
-      to,
-      key: name
-    }, name);
-  };
-  return /* @__PURE__ */ import_react17.default.createElement(TitledList, __spreadValues({
-    title,
-    description,
-    items: links,
-    itemRenderer: renderLink
-  }, rest));
-};
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Article,
+  ArticleSkeleton,
   BlinkDot,
   Breadcrumb,
   Button,
@@ -709,6 +754,7 @@ module.exports = __toCommonJS(src_exports);
   Link,
   LinkColor,
   LinkList,
+  LinkListSkeleton,
   List,
   Logo,
   Nav,

package/dist/index.mjs

@@ -247,71 +247,166 @@ 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__ */ React12.createElement("th", __spreadValues({}, props), props.children);
+Table.Cell = (props) => /* @__PURE__ */ React12.createElement("td", __spreadValues({}, props), props.children);
+
+// src/skeleton/Seleton.tsx
+import classNames6 from "classnames";
+import React14 from "react";
+
+// src/list/list.tsx
+import cls from "classnames";
+import React13 from "react";
+var List = (props) => {
+  const { items, itemRenderer, className, horizontal, compact } = props;
+  const spaceCls = compact ? "" : horizontal ? "mr-3" : "mb-4";
+  return /* @__PURE__ */ React13.createElement("ul", {
+    className: cls(className, "list-style-none", {
+      flex: horizontal,
+      "align-center": horizontal
+    })
+  }, items.map((item, index) => {
+    return /* @__PURE__ */ React13.createElement("li", {
+      key: item.id || index,
+      className: cls(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__ */ React13.createElement(List, __spreadValues({}, rest));
+  }
+  return /* @__PURE__ */ React13.createElement(Article, {
+    title,
+    description
+  }, /* @__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__ */ React13.createElement(Link, {
+      to,
+      key: name
+    }, name);
+  };
+  return /* @__PURE__ */ React13.createElement(TitledList, __spreadValues({
+    title,
+    description,
+    items: links,
+    itemRenderer: renderLink
+  }, rest));
 };
-Table.HCell = (props) => /* @__PURE__ */ React11.createElement("th", __spreadValues({}, props), props.children);
-Table.Cell = (props) => /* @__PURE__ */ React11.createElement("td", __spreadValues({}, props), props.children);
 
 // src/skeleton/Seleton.tsx
-import classNames5 from "classnames";
-import React12 from "react";
 var SkeletonColor = /* @__PURE__ */ ((SkeletonColor2) => {
   SkeletonColor2["BLUE"] = "blue";
   SkeletonColor2["RED"] = "red";
   SkeletonColor2["GRAY"] = "gray";
+  SkeletonColor2["BLACK"] = "black";
   return SkeletonColor2;
 })(SkeletonColor || {});
 var COLOR_MAPPING2 = {
   ["blue" /* BLUE */]: "bg-blue-100",
   ["red" /* RED */]: "bg-red-100",
-  ["gray" /* GRAY */]: "bg-gray-100"
+  ["gray" /* GRAY */]: "bg-gray-100",
+  ["black" /* BLACK */]: "bg-gray-200"
 };
 var Skeleton = (props) => {
   const { bgColor = "gray" /* GRAY */, width = 26, height = 24 } = props;
-  return /* @__PURE__ */ React12.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__ */ React14.createElement(Article, {
+    title: /* @__PURE__ */ React14.createElement(Skeleton, {
+      width: 36 * titleLength,
+      height: 36,
+      bgColor: "black" /* BLACK */
+    }),
+    description: descriptionLength && /* @__PURE__ */ React14.createElement(Skeleton, {
+      width: 16 * descriptionLength
+    })
+  }, children);
+};
+var LinkListSkeleton = (props) => {
+  const _a = props, { linksLength } = _a, rest = __objRest(_a, ["linksLength"]);
+  const renderSkeleton = (length) => {
+    return /* @__PURE__ */ React14.createElement(Skeleton, {
+      width: length * 16,
+      bgColor: "blue" /* BLUE */
+    });
+  };
+  return /* @__PURE__ */ React14.createElement(ArticleSkeleton, __spreadValues({}, rest), /* @__PURE__ */ React14.createElement(List, {
+    items: linksLength,
+    itemRenderer: renderSkeleton
+  }));
+};
 
 // src/drop-image/DropImage.tsx
-import cls from "classnames";
-import React13, {
+import cls2 from "classnames";
+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));
@@ -319,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,
@@ -368,6 +463,9 @@ var useDropImage = (params) => {
     ev.preventDefault();
     setIsDragOver(false);
     const file = ev.dataTransfer.files[0];
+    if (!file || !file.type.startsWith("image")) {
+      return;
+    }
     imageFile.current = file;
     setPreviewImageSrcByFile(file);
     onDrop(ev, file);
@@ -421,8 +519,8 @@ var ImagePreviewer = (props) => {
     imageSrc,
     className
   } = props;
-  return /* @__PURE__ */ React13.createElement("img", {
-    className: cls(className, "max-w-[100%]", "h-[auto]", "duration-300", "transition-opacity", "opacity-100", {
+  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,
       "!p-0": !showImagePreviewer
@@ -443,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);
   }, []);
@@ -476,13 +574,13 @@ var GhostDropImage = (props) => {
       document.removeEventListener("dragenter", handleDocDragEnter);
     };
   }, []);
-  const coverCls = cls("fixed", "top-0", "left-0", "h-full", "w-full", {
+  const coverCls = cls2("fixed", "top-0", "left-0", "h-full", "w-full", {
     "lqip-blur": coverVisible,
     "z-[999]": coverVisible,
     block: coverVisible,
     hidden: !coverVisible
   });
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement("div", {
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("div", {
     className: coverCls,
     onDragLeave: () => {
       handleDragLeave();
@@ -495,7 +593,7 @@ var GhostDropImage = (props) => {
     imageRef,
     imageSize,
     imageSrc
-  }) : /* @__PURE__ */ React13.createElement(ImagePreviewer, {
+  }) : /* @__PURE__ */ React15.createElement(ImagePreviewer, {
     className,
     visible: imageVisible,
     imageRef,
@@ -521,9 +619,9 @@ var DropImage = (props) => {
     }
   } = props;
   if (ghost) {
-    return /* @__PURE__ */ React13.createElement(GhostDropImage, __spreadValues({}, props));
+    return /* @__PURE__ */ React15.createElement(GhostDropImage, __spreadValues({}, props));
   }
-  const [showImagePreviewer, setShowImagePreviewer] = useState3(false);
+  const [showImagePreviewer, setShowImagePreviewer] = useState4(false);
   const {
     handleDragLeave,
     handleDragOver,
@@ -552,8 +650,8 @@ var DropImage = (props) => {
       height: imageSize.height || dropAreaStyle.height
     });
   };
-  return /* @__PURE__ */ React13.createElement("div", {
-    className: cls(className, "transition-all items-center justify-center flex duration-200 ease-in-out", {
+  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
     }),
@@ -566,7 +664,7 @@ var DropImage = (props) => {
     imageRef,
     imageSize,
     imageSrc
-  }) : /* @__PURE__ */ React13.createElement(ImagePreviewer, {
+  }) : /* @__PURE__ */ React15.createElement(ImagePreviewer, {
     visible: showImagePreviewer,
     imageRef,
     imageSrc,
@@ -574,82 +672,27 @@ var DropImage = (props) => {
   }), !imageSrc && placeholder);
 };
 
-// src/blink-dot/BlinkDot.tsx
-import classNames6 from "classnames";
-import React14 from "react";
-var BlinkDot = (props) => {
-  const { className } = props;
-  return /* @__PURE__ */ React14.createElement("span", {
-    className: classNames6("inline-flex h-1 w-1 justify-center items-center relative", className)
-  }, /* @__PURE__ */ React14.createElement("span", {
-    className: "animate-ping-fast absolute inline-flex h-full w-full rounded-full bg-red-600"
-  }));
-};
-
 // src/layout/layout.tsx
-import cls2 from "classnames";
-import React15 from "react";
+import cls3 from "classnames";
+import React16 from "react";
 var ThreeColLayout = (props) => {
   const { leftRenderer, middleRenderer, rightRenderer } = props;
-  const colCls = cls2("max-h-full overflow-auto md:block py-64");
-  return /* @__PURE__ */ React15.createElement("div", {
+  const colCls = cls3("max-h-full overflow-auto md:block py-64");
+  return /* @__PURE__ */ React16.createElement("div", {
     className: "grid grid-cols-1 xl:grid-cols-3 gap-4 h-full w-full"
-  }, /* @__PURE__ */ React15.createElement("div", {
-    className: cls2("hidden", colCls)
-  }, leftRenderer && leftRenderer()), /* @__PURE__ */ React15.createElement("div", {
-    className: cls2(colCls, "sm:px-128 xl:px-0 no-scrollbar", "relative", {
+  }, /* @__PURE__ */ React16.createElement("div", {
+    className: cls3("hidden", colCls)
+  }, leftRenderer && leftRenderer()), /* @__PURE__ */ React16.createElement("div", {
+    className: cls3(colCls, "sm:px-128 xl:px-0 no-scrollbar", "relative", {
       hidden: !middleRenderer
     })
-  }, middleRenderer && middleRenderer()), /* @__PURE__ */ React15.createElement("div", {
-    className: cls2("hidden", colCls)
+  }, middleRenderer && middleRenderer()), /* @__PURE__ */ React16.createElement("div", {
+    className: cls3("hidden", colCls)
   }, rightRenderer && rightRenderer()));
 };
-
-// src/list/list.tsx
-import cls3 from "classnames";
-import React16 from "react";
-var List = (props) => {
-  const { items, itemRenderer, className, horizontal, compact } = props;
-  const spaceCls = compact ? "" : horizontal ? "mr-3" : "mb-4";
-  return /* @__PURE__ */ React16.createElement("ul", {
-    className: cls3(className, "list-style-none", {
-      flex: horizontal,
-      "align-center": horizontal
-    })
-  }, items.map((item, index) => {
-    return /* @__PURE__ */ React16.createElement("li", {
-      key: item.id || index,
-      className: cls3(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__ */ React16.createElement(List, __spreadValues({}, rest));
-  }
-  return /* @__PURE__ */ React16.createElement(Article, {
-    title,
-    description
-  }, /* @__PURE__ */ React16.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__ */ React16.createElement(Link, {
-      to,
-      key: name
-    }, name);
-  };
-  return /* @__PURE__ */ React16.createElement(TitledList, __spreadValues({
-    title,
-    description,
-    items: links,
-    itemRenderer: renderLink
-  }, rest));
-};
 export {
   Article,
+  ArticleSkeleton,
   BlinkDot,
   Breadcrumb,
   Button,
@@ -658,6 +701,7 @@ export {
   Link,
   LinkColor,
   LinkList,
+  LinkListSkeleton,
   List,
   Logo,
   Nav,

package/package.json

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