qt-ui-kit 1.0.30 → 1.0.31

package/dist/index.d.mts

@@ -79,8 +79,15 @@ type Props$6 = {
 };
 declare function PreviewCard({ onRead, onSelected, service, subjectLine, body, sender, source, metadata, date, onClickGoToSource, urgencyLevel, alert, }: Props$6): react_jsx_runtime.JSX.Element;
 
-type Props$5 = {};
-declare function NavBar({}: Props$5): react_jsx_runtime.JSX.Element;
+type NavButtonKey = "queue" | "account" | "logout";
+type NavButtonConfig = {
+    active?: boolean;
+    onClick?: () => void;
+};
+type Props$5 = {
+    buttons?: Partial<Record<NavButtonKey, NavButtonConfig>>;
+};
+declare function NavBar({ buttons }: Props$5): react_jsx_runtime.JSX.Element;
 
 type Props$4 = {
     eventType?: EventType;

package/dist/index.d.ts

@@ -79,8 +79,15 @@ type Props$6 = {
 };
 declare function PreviewCard({ onRead, onSelected, service, subjectLine, body, sender, source, metadata, date, onClickGoToSource, urgencyLevel, alert, }: Props$6): react_jsx_runtime.JSX.Element;
 
-type Props$5 = {};
-declare function NavBar({}: Props$5): react_jsx_runtime.JSX.Element;
+type NavButtonKey = "queue" | "account" | "logout";
+type NavButtonConfig = {
+    active?: boolean;
+    onClick?: () => void;
+};
+type Props$5 = {
+    buttons?: Partial<Record<NavButtonKey, NavButtonConfig>>;
+};
+declare function NavBar({ buttons }: Props$5): react_jsx_runtime.JSX.Element;
 
 type Props$4 = {
     eventType?: EventType;

package/dist/index.js

@@ -15662,33 +15662,64 @@ function QTLogo({ variant }) {
 // src/components/molecules/buttons/nav_button/main_nav_button/main_nav_button.tsx
 var import_clsx5 = __toESM(require("clsx"));
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function MainNavButton({ icon, label, active }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "w-min h-min flex flex-none flex-col place-items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      "div",
-      {
-        className: (0, import_clsx5.default)(
-          "w-[44px] h-[44px] flex flex-none flex-col place-items-center place-content-center rounded-xl border-2 hover:border-qtpurple-500",
-          active ? "border-qtpurple-500 qt-drop-shadow-100 bg-qtpurple-200" : "border-qtpurple-300 bg-white"
+function MainNavButton({ icon, label, active, onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "div",
+    {
+      className: "w-min h-min flex flex-none flex-col place-items-center gap-2",
+      onClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          "div",
+          {
+            className: (0, import_clsx5.default)(
+              "w-[44px] h-[44px] flex flex-none flex-col place-items-center place-content-center rounded-xl border-2 hover:border-qtpurple-500",
+              active ? "border-qtpurple-500 qt-drop-shadow-100 bg-qtpurple-200" : "border-qtpurple-300 bg-white"
+            ),
+            children: icon
+          }
         ),
-        children: icon
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "label-3-bold text-qtpurple-500", children: label })
-  ] });
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "label-3-bold text-qtpurple-500", children: label })
+      ]
+    }
+  );
 }
 
 // src/components/organisms/nav_bar/nav_bar.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-function NavBar({}) {
+function NavBar({ buttons = {} }) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col w-[66px] bg-qtneutral-100 navbar-shadow h-full py-12 place-items-center place-content-between gap-8", children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-8", children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(QTLogo, { variant: "monogram" }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MainNavButton, { active: true, label: "Queue", icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Queue, { color: "#6558FD" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        MainNavButton,
+        {
+          active: buttons.queue?.active,
+          label: "Queue",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Queue, { color: "#6558FD" }),
+          onClick: buttons.queue?.onClick
+        }
+      )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MainNavButton, { label: "Account", icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Gear, { color: "#6558FD" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MainNavButton, { label: "Logout", icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Logout, { color: "#6558FD" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        MainNavButton,
+        {
+          active: buttons.account?.active,
+          label: "Account",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Gear, { color: "#6558FD" }),
+          onClick: buttons.account?.onClick
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        MainNavButton,
+        {
+          active: buttons.logout?.active,
+          label: "Logout",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Logout, { color: "#6558FD" }),
+          onClick: buttons.logout?.onClick
+        }
+      )
     ] })
   ] });
 }