@bbki.ng/components 2.1.40 → 2.1.42

package/dist/index.cjs

@@ -144,13 +144,32 @@ var Logo = React3.memo(
 var import_react6 = __toESM(require("react"), 1);
 
 // lib/breadcrumb/Breadcrumb.tsx
-var import_react4 = __toESM(require("react"), 1);
-var import_classnames3 = __toESM(require("classnames"), 1);
+var import_react5 = __toESM(require("react"), 1);
+var import_classnames4 = __toESM(require("classnames"), 1);
 
 // lib/link/Link.tsx
-var import_classnames2 = __toESM(require("classnames"), 1);
+var import_classnames3 = __toESM(require("classnames"), 1);
 var import_react_router_dom = require("react-router-dom");
+var import_react4 = __toESM(require("react"), 1);
+
+// lib/blink-dot/BlinkDot.tsx
+var import_classnames2 = __toESM(require("classnames"), 1);
 var import_react3 = __toESM(require("react"), 1);
+var BlinkDot = (props) => {
+  const { className } = props;
+  const status = props.status || "hidden";
+  const statusCls = (0, import_classnames2.default)({
+    "animate-ping-fast": status === "blink",
+    hidden: status === "hidden"
+  });
+  return /* @__PURE__ */ import_react3.default.createElement("span", {
+    className: (0, import_classnames2.default)("inline-flex justify-center items-center relative")
+  }, /* @__PURE__ */ import_react3.default.createElement("span", {
+    className: `absolute inline-flex h-full w-full rounded-full text-red-600  -top-[28px] -left-[3px] ${statusCls}`
+  }, "."));
+};
+
+// lib/link/Link.tsx
 var LinkColor = /* @__PURE__ */ ((LinkColor2) => {
   LinkColor2["BLUE"] = "blue";
   LinkColor2["RED"] = "red";
@@ -178,9 +197,11 @@ var Link = (props) => {
     external,
     className,
     children,
+    status,
+    readonly,
     ...rest
   } = props;
-  const linkCls = (0, import_classnames2.default)(
+  const linkCls = (0, import_classnames3.default)(
     className,
     "rounded",
     "!no-underline",
@@ -191,60 +212,59 @@ var Link = (props) => {
     FOCUS_BG_COLOR_MAPPING[color]
   );
   if (external) {
-    return /* @__PURE__ */ import_react3.default.createElement("a", {
+    return /* @__PURE__ */ import_react4.default.createElement("a", {
       href: props.to,
       className: linkCls,
       target: "_blank",
-      rel: "noreferrer"
+      rel: "noreferrer",
+      style: { padding: 4 }
     }, children);
   }
-  return /* @__PURE__ */ import_react3.default.createElement(import_react_router_dom.Link, {
+  if (readonly) {
+    const isNonEnName = !/^[a-zA-Z~]+$/.test(children);
+    const offsetCls = (0, import_classnames3.default)({ "relative top-[2px]": isNonEnName });
+    return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("span", {
+      className: (0, import_classnames3.default)("text-gray-400", offsetCls),
+      style: { padding: 4 }
+    }, children), /* @__PURE__ */ import_react4.default.createElement(BlinkDot, {
+      status
+    }));
+  }
+  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_react_router_dom.Link, {
     ...rest,
-    className: linkCls
-  }, children);
+    className: linkCls,
+    style: { padding: 4 }
+  }, children), /* @__PURE__ */ import_react4.default.createElement(BlinkDot, {
+    className: "-top-3 left-1",
+    status
+  }));
 };
 
 // lib/breadcrumb/Breadcrumb.tsx
 var Breadcrumb = (props) => {
-  const { paths } = props;
+  const { paths, loading } = props;
   const PathElements = paths.map(({ path, name }, index) => {
-    const slash = index === 0 ? null : /* @__PURE__ */ import_react4.default.createElement("span", {
+    const slash = index === 0 ? null : /* @__PURE__ */ import_react5.default.createElement("span", {
       className: "text-gray-400"
     }, "/");
     const isNonEnName = !/^[a-zA-Z~]+$/.test(name);
-    const offsetCls = (0, import_classnames3.default)({ "relative top-[2px]": isNonEnName });
-    const link = path ? /* @__PURE__ */ import_react4.default.createElement(Link, {
-      to: path,
-      className: offsetCls,
-      style: { padding: 4 }
-    }, name) : /* @__PURE__ */ import_react4.default.createElement("span", {
-      className: (0, import_classnames3.default)("text-gray-400", offsetCls),
-      style: { padding: 4 }
-    }, name);
-    return /* @__PURE__ */ import_react4.default.createElement("span", {
+    const offsetCls = (0, import_classnames4.default)({ "relative top-[2px]": isNonEnName });
+    const isLast = index === paths.length - 1;
+    const status = loading && isLast ? "blink" : "hidden";
+    return /* @__PURE__ */ import_react5.default.createElement("span", {
       key: path || name
-    }, slash, link);
+    }, slash, /* @__PURE__ */ import_react5.default.createElement(Link, {
+      to: path ?? "",
+      className: offsetCls,
+      readonly: !path,
+      status
+    }, name));
   });
-  return /* @__PURE__ */ import_react4.default.createElement("div", {
+  return /* @__PURE__ */ import_react5.default.createElement("div", {
     className: "breadcrumb"
   }, PathElements);
 };
 
-// lib/blink-dot/BlinkDot.tsx
-var import_classnames4 = __toESM(require("classnames"), 1);
-var import_react5 = __toESM(require("react"), 1);
-var BlinkDot = (props) => {
-  const { className } = props;
-  return /* @__PURE__ */ import_react5.default.createElement("span", {
-    className: (0, import_classnames4.default)(
-      "inline-flex h-1 w-1 justify-center items-center relative",
-      className
-    )
-  }, /* @__PURE__ */ import_react5.default.createElement("span", {
-    className: "animate-ping-fast absolute inline-flex h-full w-full rounded-full bg-red-600"
-  }));
-};
-
 // lib/nav/Nav.tsx
 var import_react_router_dom2 = require("react-router-dom");
 var Nav = (props) => {
@@ -264,9 +284,8 @@ var Nav = (props) => {
       nav("/");
     }
   }), /* @__PURE__ */ import_react6.default.createElement(Breadcrumb, {
-    paths: props.paths
-  }), props.loading && /* @__PURE__ */ import_react6.default.createElement(BlinkDot, {
-    className: "-top-2 left-1"
+    paths: props.paths,
+    loading: props.loading
   }));
 };
 
@@ -456,7 +475,7 @@ var import_classnames6 = __toESM(require("classnames"), 1);
 var import_react13 = __toESM(require("react"), 1);
 var List = (props) => {
   const { items, itemRenderer, className, horizontal, compact } = props;
-  const spaceCls = compact ? "" : horizontal ? "mr-3" : "mb-8";
+  const spaceCls = compact ? "" : horizontal ? "mr-3" : "mb-16";
   return /* @__PURE__ */ import_react13.default.createElement("ul", {
     className: (0, import_classnames6.default)(className, "list-style-none", {
       flex: horizontal,
@@ -486,11 +505,12 @@ var TitledList = (props) => {
 };
 var LinkList = (props) => {
   const { title, description, links, ...rest } = props;
-  const renderLink = ({ name, to, external }) => {
+  const renderLink = ({ name, to, external, ...rest2 }) => {
     return /* @__PURE__ */ import_react13.default.createElement(Link, {
       to,
       key: name,
-      external
+      external,
+      ...rest2
     }, name);
   };
   return /* @__PURE__ */ import_react13.default.createElement(TitledList, {