@bbki.ng/components 1.5.7 → 1.5.10

package/dist/index.d.ts

@@ -1,13 +1,14 @@
-import React, { EventHandler, ReactElement, CSSProperties, Ref, ReactNode, FunctionComponent } from 'react';
+import React, { FunctionComponent, EventHandler, ReactElement, CSSProperties, Ref, ReactNode } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 
 declare type ArticleProps = {
-    title: string;
+    title: any;
     className?: string;
     content?: any;
     children: any;
+    description?: any;
 };
-declare const Article: (props: ArticleProps) => JSX.Element;
+declare const Article: FunctionComponent<ArticleProps>;
 
 declare enum ButtonType {
     DANGER = "danger",
@@ -55,8 +56,9 @@ interface LinkProps extends LinkProps$1 {
     color?: LinkColor;
     className?: string;
     external?: boolean;
+    name?: any;
+    children?: any;
     to: string;
-    children: any;
 }
 declare const Link: (props: LinkProps) => JSX.Element;
 
@@ -114,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;
@@ -153,4 +166,31 @@ declare type BLinkDotProps = {
 };
 declare const BlinkDot: (props: BLinkDotProps) => JSX.Element;
 
-export { Article, ArticleProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, ImageDropProps, ImagePreviewerProps, Link, LinkColor, LinkProps, Logo, LogoProps, Nav, NavProps, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags };
+declare type threeColLayoutProps = {
+    leftRenderer?: () => ReactElement | null;
+    rightRenderer?: () => ReactElement | null;
+    middleRenderer?: () => ReactElement | null;
+};
+declare const ThreeColLayout: (props: threeColLayoutProps) => JSX.Element;
+
+interface listProps {
+    className?: string;
+    compact?: boolean;
+    items: any[];
+    itemRenderer: (itemProps: any, index: number) => ReactElement;
+    horizontal?: boolean;
+}
+declare const List: FunctionComponent<listProps>;
+interface TitledListProps extends listProps {
+    title?: any;
+    description?: any;
+}
+declare const TitledList: FunctionComponent<TitledListProps>;
+interface LinkListProps extends Omit<listProps, "itemRenderer" | "items"> {
+    title?: string;
+    description?: any;
+    links: LinkProps[];
+}
+declare const LinkList: (props: LinkListProps) => JSX.Element;
+
+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,
@@ -66,6 +67,9 @@ __export(src_exports, {
   DropImage: () => DropImage,
   Link: () => Link,
   LinkColor: () => LinkColor,
+  LinkList: () => LinkList,
+  LinkListSkeleton: () => LinkListSkeleton,
+  List: () => List,
   Logo: () => Logo,
   Nav: () => Nav,
   Page: () => Page,
@@ -75,21 +79,25 @@ __export(src_exports, {
   SkeletonColor: () => SkeletonColor,
   Table: () => Table,
   Tag: () => Tag,
-  Tags: () => Tags
+  Tags: () => Tags,
+  ThreeColLayout: () => ThreeColLayout,
+  TitledList: () => TitledList
 });
 
 // src/article/Article.tsx
 var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
 var Article = (props) => {
-  const { title, content, children, className } = props;
+  const { title, content, children, className, description } = props;
   return /* @__PURE__ */ import_react.default.createElement("div", {
     className: (0, import_classnames.default)("article", className)
   }, /* @__PURE__ */ import_react.default.createElement("div", {
     className: "text-[2.25rem] leading-none"
   }, title), /* @__PURE__ */ import_react.default.createElement("hr", {
     className: "my-64 border-gray-200"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
+  }), description && /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "mb-128"
+  }, description), /* @__PURE__ */ import_react.default.createElement("div", {
     className: "text-gray-700"
   }, children || content));
 };
@@ -330,31 +338,105 @@ Table.HCell = (props) => /* @__PURE__ */ import_react10.default.createElement("t
 Table.Cell = (props) => /* @__PURE__ */ import_react10.default.createElement("td", __spreadValues({}, props), props.children);
 
 // src/skeleton/Seleton.tsx
+var import_classnames6 = __toESM(require("classnames"));
+var import_react12 = __toESM(require("react"));
+
+// src/list/list.tsx
 var import_classnames5 = __toESM(require("classnames"));
 var import_react11 = __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", {
+      flex: horizontal,
+      "align-center": horizontal
+    })
+  }, items.map((item, index) => {
+    return /* @__PURE__ */ import_react11.default.createElement("li", {
+      key: item.id || index,
+      className: (0, import_classnames5.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_react11.default.createElement(Article, {
+    title,
+    description
+  }, /* @__PURE__ */ import_react11.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, {
+      to,
+      key: name
+    }, name);
+  };
+  return /* @__PURE__ */ import_react11.default.createElement(TitledList, __spreadValues({
+    title,
+    description,
+    items: links,
+    itemRenderer: renderLink
+  }, rest));
+};
+
+// src/skeleton/Seleton.tsx
 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_react12.default.createElement("div", {
+    className: (0, import_classnames6.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, {
+      width: 36 * titleLength,
+      height: 36,
+      bgColor: "black" /* BLACK */
+    }),
+    description: descriptionLength && /* @__PURE__ */ import_react12.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_react12.default.createElement(Skeleton, {
+      width: length * 16,
+      bgColor: "blue" /* BLUE */
+    });
+  };
+  return /* @__PURE__ */ import_react12.default.createElement(ArticleSkeleton, __spreadValues({}, rest), /* @__PURE__ */ import_react12.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_classnames7 = __toESM(require("classnames"));
+var import_react14 = __toESM(require("react"));
+var import_react15 = require("react");
 
 // src/drop-image/utils.ts
 var wait = (d) => new Promise((r) => setTimeout(r, d));
@@ -362,12 +444,12 @@ var noop = () => {
 };
 
 // src/drop-image/useDropImage.ts
-var import_react12 = require("react");
+var import_react13 = 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_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 {
     portraitImageWidth = 384,
     landscapeImageWidth = 500,
@@ -399,15 +481,15 @@ var useDropImage = (params) => {
       setImageSrc("");
     }
   };
-  const handleDragOver = (0, import_react12.useCallback)((ev) => {
+  const handleDragOver = (0, import_react13.useCallback)((ev) => {
     ev.preventDefault();
     setIsDragOver(true);
     ev.dataTransfer.dropEffect = "move";
   }, []);
-  const handleDragLeave = (0, import_react12.useCallback)(() => {
+  const handleDragLeave = (0, import_react13.useCallback)(() => {
     setIsDragOver(false);
   }, []);
-  const handleDrop = (0, import_react12.useCallback)((ev) => {
+  const handleDrop = (0, import_react13.useCallback)((ev) => {
     ev.preventDefault();
     setIsDragOver(false);
     const file = ev.dataTransfer.files[0];
@@ -437,7 +519,7 @@ var useDropImage = (params) => {
     }
     img.onload = updateFunc;
   };
-  const imageRef = (0, import_react12.useCallback)((input) => {
+  const imageRef = (0, import_react13.useCallback)((input) => {
     if (!input) {
       return;
     }
@@ -464,8 +546,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_react14.default.createElement("img", {
+    className: (0, import_classnames7.default)(className, "max-w-[100%]", "h-[auto]", "duration-300", "transition-opacity", "opacity-100", {
       "opacity-0": !showImagePreviewer,
       "!m-0": !showImagePreviewer,
       "!p-0": !showImagePreviewer
@@ -486,9 +568,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_react15.useState)(false);
+  const [imageVisible, setImageVisible] = (0, import_react15.useState)(false);
+  const handleDocDragEnter = (0, import_react14.useCallback)(() => {
     setCoverVisible(true);
   }, []);
   const {
@@ -513,19 +595,19 @@ var GhostDropImage = (props) => {
       reset();
     }
   });
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.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_classnames7.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_react14.default.createElement(import_react14.default.Fragment, null, /* @__PURE__ */ import_react14.default.createElement("div", {
     className: coverCls,
     onDragLeave: () => {
       handleDragLeave();
@@ -538,7 +620,7 @@ var GhostDropImage = (props) => {
     imageRef,
     imageSize,
     imageSrc
-  }) : /* @__PURE__ */ import_react13.default.createElement(ImagePreviewer, {
+  }) : /* @__PURE__ */ import_react14.default.createElement(ImagePreviewer, {
     className,
     visible: imageVisible,
     imageRef,
@@ -564,9 +646,9 @@ var DropImage = (props) => {
     }
   } = props;
   if (ghost) {
-    return /* @__PURE__ */ import_react13.default.createElement(GhostDropImage, __spreadValues({}, props));
+    return /* @__PURE__ */ import_react14.default.createElement(GhostDropImage, __spreadValues({}, props));
   }
-  const [showImagePreviewer, setShowImagePreviewer] = (0, import_react14.useState)(false);
+  const [showImagePreviewer, setShowImagePreviewer] = (0, import_react15.useState)(false);
   const {
     handleDragLeave,
     handleDragOver,
@@ -595,8 +677,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_react14.default.createElement("div", {
+    className: (0, import_classnames7.default)(className, "transition-all items-center justify-center flex duration-200 ease-in-out", {
       "shadow-input": !imageSrc,
       "shadow-empty": imageSrc
     }),
@@ -609,7 +691,7 @@ var DropImage = (props) => {
     imageRef,
     imageSize,
     imageSrc
-  }) : /* @__PURE__ */ import_react13.default.createElement(ImagePreviewer, {
+  }) : /* @__PURE__ */ import_react14.default.createElement(ImagePreviewer, {
     visible: showImagePreviewer,
     imageRef,
     imageSrc,
@@ -618,20 +700,40 @@ var DropImage = (props) => {
 };
 
 // src/blink-dot/BlinkDot.tsx
-var import_classnames7 = __toESM(require("classnames"));
-var import_react15 = __toESM(require("react"));
+var import_classnames8 = __toESM(require("classnames"));
+var import_react16 = __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", {
+  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"));
+var ThreeColLayout = (props) => {
+  const { leftRenderer, middleRenderer, rightRenderer } = props;
+  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_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_react17.default.createElement("div", {
+    className: (0, import_classnames9.default)("hidden", colCls)
+  }, rightRenderer && rightRenderer()));
+};
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Article,
+  ArticleSkeleton,
   BlinkDot,
   Breadcrumb,
   Button,
@@ -639,6 +741,9 @@ module.exports = __toCommonJS(src_exports);
   DropImage,
   Link,
   LinkColor,
+  LinkList,
+  LinkListSkeleton,
+  List,
   Logo,
   Nav,
   Page,
@@ -648,5 +753,7 @@ module.exports = __toCommonJS(src_exports);
   SkeletonColor,
   Table,
   Tag,
-  Tags
+  Tags,
+  ThreeColLayout,
+  TitledList
 });

package/dist/index.mjs

@@ -34,14 +34,16 @@ var __objRest = (source, exclude) => {
 import classNames from "classnames";
 import React from "react";
 var Article = (props) => {
-  const { title, content, children, className } = props;
+  const { title, content, children, className, description } = props;
   return /* @__PURE__ */ React.createElement("div", {
     className: classNames("article", className)
   }, /* @__PURE__ */ React.createElement("div", {
     className: "text-[2.25rem] leading-none"
   }, title), /* @__PURE__ */ React.createElement("hr", {
     className: "my-64 border-gray-200"
-  }), /* @__PURE__ */ React.createElement("div", {
+  }), description && /* @__PURE__ */ React.createElement("div", {
+    className: "mb-128"
+  }, description), /* @__PURE__ */ React.createElement("div", {
     className: "text-gray-700"
   }, children || content));
 };
@@ -283,29 +285,103 @@ Table.Cell = (props) => /* @__PURE__ */ React11.createElement("td", __spreadValu
 
 // src/skeleton/Seleton.tsx
 import classNames5 from "classnames";
+import React13 from "react";
+
+// src/list/list.tsx
+import cls from "classnames";
 import React12 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", {
+    className: cls(className, "list-style-none", {
+      flex: horizontal,
+      "align-center": horizontal
+    })
+  }, items.map((item, index) => {
+    return /* @__PURE__ */ React12.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__ */ React12.createElement(List, __spreadValues({}, rest));
+  }
+  return /* @__PURE__ */ React12.createElement(Article, {
+    title,
+    description
+  }, /* @__PURE__ */ React12.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, {
+      to,
+      key: name
+    }, name);
+  };
+  return /* @__PURE__ */ React12.createElement(TitledList, __spreadValues({
+    title,
+    description,
+    items: links,
+    itemRenderer: renderLink
+  }, rest));
+};
+
+// src/skeleton/Seleton.tsx
 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", {
+  return /* @__PURE__ */ React13.createElement("div", {
     className: classNames5(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, {
+      width: 36 * titleLength,
+      height: 36,
+      bgColor: "black" /* BLACK */
+    }),
+    description: descriptionLength && /* @__PURE__ */ React13.createElement(Skeleton, {
+      width: 16 * descriptionLength
+    })
+  }, children);
+};
+var LinkListSkeleton = (props) => {
+  const _a = props, { linksLength } = _a, rest = __objRest(_a, ["linksLength"]);
+  const renderSkeleton = (length) => {
+    return /* @__PURE__ */ React13.createElement(Skeleton, {
+      width: length * 16,
+      bgColor: "blue" /* BLUE */
+    });
+  };
+  return /* @__PURE__ */ React13.createElement(ArticleSkeleton, __spreadValues({}, rest), /* @__PURE__ */ React13.createElement(List, {
+    items: linksLength,
+    itemRenderer: renderSkeleton
+  }));
+};
 
 // src/drop-image/DropImage.tsx
-import cls from "classnames";
-import React13, {
+import cls2 from "classnames";
+import React14, {
   useEffect as useEffect2,
   useCallback as useCallback2
 } from "react";
@@ -419,8 +495,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__ */ React14.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
@@ -474,13 +550,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__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement("div", {
     className: coverCls,
     onDragLeave: () => {
       handleDragLeave();
@@ -493,7 +569,7 @@ var GhostDropImage = (props) => {
     imageRef,
     imageSize,
     imageSrc
-  }) : /* @__PURE__ */ React13.createElement(ImagePreviewer, {
+  }) : /* @__PURE__ */ React14.createElement(ImagePreviewer, {
     className,
     visible: imageVisible,
     imageRef,
@@ -519,7 +595,7 @@ var DropImage = (props) => {
     }
   } = props;
   if (ghost) {
-    return /* @__PURE__ */ React13.createElement(GhostDropImage, __spreadValues({}, props));
+    return /* @__PURE__ */ React14.createElement(GhostDropImage, __spreadValues({}, props));
   }
   const [showImagePreviewer, setShowImagePreviewer] = useState3(false);
   const {
@@ -550,8 +626,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__ */ React14.createElement("div", {
+    className: cls2(className, "transition-all items-center justify-center flex duration-200 ease-in-out", {
       "shadow-input": !imageSrc,
       "shadow-empty": imageSrc
     }),
@@ -564,7 +640,7 @@ var DropImage = (props) => {
     imageRef,
     imageSize,
     imageSrc
-  }) : /* @__PURE__ */ React13.createElement(ImagePreviewer, {
+  }) : /* @__PURE__ */ React14.createElement(ImagePreviewer, {
     visible: showImagePreviewer,
     imageRef,
     imageSrc,
@@ -574,17 +650,37 @@ var DropImage = (props) => {
 
 // src/blink-dot/BlinkDot.tsx
 import classNames6 from "classnames";
-import React14 from "react";
+import React15 from "react";
 var BlinkDot = (props) => {
   const { className } = props;
-  return /* @__PURE__ */ React14.createElement("span", {
+  return /* @__PURE__ */ React15.createElement("span", {
     className: classNames6("inline-flex h-1 w-1 justify-center items-center relative", className)
-  }, /* @__PURE__ */ React14.createElement("span", {
+  }, /* @__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";
+var ThreeColLayout = (props) => {
+  const { leftRenderer, middleRenderer, rightRenderer } = props;
+  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__ */ 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__ */ React16.createElement("div", {
+    className: cls3("hidden", colCls)
+  }, rightRenderer && rightRenderer()));
+};
 export {
   Article,
+  ArticleSkeleton,
   BlinkDot,
   Breadcrumb,
   Button,
@@ -592,6 +688,9 @@ export {
   DropImage,
   Link,
   LinkColor,
+  LinkList,
+  LinkListSkeleton,
+  List,
   Logo,
   Nav,
   Page,
@@ -601,5 +700,7 @@ export {
   SkeletonColor,
   Table,
   Tag,
-  Tags
+  Tags,
+  ThreeColLayout,
+  TitledList
 };

package/package.json

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

package/dist/index.css

@@ -1,226 +0,0 @@
-/* src/main.css */
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: currentColor;
-}
-::before,
-::after {
-  --tw-content: "";
-}
-html {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  font-family:
-    pt-sans,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Roboto,
-    Helvetica Neue,
-    Arial,
-    Noto Sans,
-    sans-serif,
-    Apple Color Emoji,
-    Segoe UI Emoji,
-    Segoe UI Symbol,
-    Noto Color Emoji;
-}
-body {
-  margin: 0;
-  line-height: inherit;
-}
-hr {
-  height: 0;
-  color: inherit;
-  border-top-width: 1px;
-}
-abbr[title] {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-b,
-strong {
-  font-weight: bolder;
-}
-code,
-kbd,
-samp,
-pre {
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    Liberation Mono,
-    Courier New,
-    monospace;
-  font-size: 1em;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-table {
-  text-indent: 0;
-  border-color: inherit;
-  border-collapse: collapse;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: inherit;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-}
-button,
-select {
-  text-transform: none;
-}
-button,
-[type=button],
-[type=reset],
-[type=submit] {
-  -webkit-appearance: button;
-  background-color: transparent;
-  background-image: none;
-}
-:-moz-focusring {
-  outline: auto;
-}
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-progress {
-  vertical-align: baseline;
-}
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-[type=search] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-summary {
-  display: list-item;
-}
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-legend {
-  padding: 0;
-}
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-textarea {
-  resize: vertical;
-}
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  opacity: 1;
-  color: #9CA3AF;
-}
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
-  opacity: 1;
-  color: #9CA3AF;
-}
-input::placeholder,
-textarea::placeholder {
-  opacity: 1;
-  color: #9CA3AF;
-}
-button,
-[role=button] {
-  cursor: pointer;
-}
-:disabled {
-  cursor: default;
-}
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  vertical-align: middle;
-}
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-[hidden] {
-  display: none;
-}