@bbki.ng/components 2.1.39 → 2.1.41

package/dist/index.cjs

@@ -111,6 +111,7 @@ var Logo = React3.memo(
     height: "48",
     viewBox: "0 0 48 48",
     fill: "none",
+    onClick: props.onClick,
     className: props.className
   }, /* @__PURE__ */ React3.createElement("path", {
     d: "M29.1152 21.3106C32.0605 21.3106 34.4481 18.9101 34.4481 15.9489V24.6457C34.4481 25.7585 33.5508 26.6607 32.444 26.6607H15.1207C14.0138 26.6607 13.1166 25.7585 13.1166 24.6457V15.9489C13.1166 18.9101 15.5042 21.3106 18.4494 21.3106C21.3947 21.3106 23.7823 18.9101 23.7823 15.9489C23.7823 18.9101 26.17 21.3106 29.1152 21.3106Z",
@@ -143,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";
@@ -177,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",
@@ -190,61 +212,60 @@ 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"
     }, 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) => {
   if (props.mini) {
     return /* @__PURE__ */ import_react6.default.createElement("div", {
@@ -253,14 +274,17 @@ var Nav = (props) => {
       paths: props.paths
     }));
   }
+  const nav = (0, import_react_router_dom2.useNavigate)();
   return /* @__PURE__ */ import_react6.default.createElement("div", {
     className: `p-8 w-full flex items-center ${props.className}`
   }, /* @__PURE__ */ import_react6.default.createElement(Logo, {
-    className: "mr-8"
+    className: "mr-8",
+    onClick: () => {
+      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
   }));
 };
 
@@ -480,11 +504,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, {