qt-ui-kit 1.0.14 → 1.0.15

package/dist/index.d.mts

@@ -125,8 +125,10 @@ type Props = {
 };
 declare function TicketBody({ issueNumber, notification, project, task, dueDate, startDate, assignees, reporter, team, location, related, description, comments, }: Props): react_jsx_runtime.JSX.Element;
 
+declare function SearchBar(): react_jsx_runtime.JSX.Element;
+
 type IconSize = 16 | 20 | 24 | 36;
 
 declare const fakeMessages: MessageData[];
 
-export { BaseIconName, ChatBody, ColorVariants, EmailBody, EventCard, type EventData, EventType, type IconSize, IntegrationService, NavBar, PreviewCard, TicketBody, type TicketComment, UrgencyLevel, fakeMessages };
+export { BaseIconName, ChatBody, ColorVariants, EmailBody, EventCard, type EventData, EventType, NavBar as FilterBar, type IconSize, IntegrationService, NavBar, PreviewCard, SearchBar, TicketBody, type TicketComment, UrgencyLevel, fakeMessages };

package/dist/index.d.ts

@@ -125,8 +125,10 @@ type Props = {
 };
 declare function TicketBody({ issueNumber, notification, project, task, dueDate, startDate, assignees, reporter, team, location, related, description, comments, }: Props): react_jsx_runtime.JSX.Element;
 
+declare function SearchBar(): react_jsx_runtime.JSX.Element;
+
 type IconSize = 16 | 20 | 24 | 36;
 
 declare const fakeMessages: MessageData[];
 
-export { BaseIconName, ChatBody, ColorVariants, EmailBody, EventCard, type EventData, EventType, type IconSize, IntegrationService, NavBar, PreviewCard, TicketBody, type TicketComment, UrgencyLevel, fakeMessages };
+export { BaseIconName, ChatBody, ColorVariants, EmailBody, EventCard, type EventData, EventType, NavBar as FilterBar, type IconSize, IntegrationService, NavBar, PreviewCard, SearchBar, TicketBody, type TicketComment, UrgencyLevel, fakeMessages };

package/dist/index.js

@@ -11183,9 +11183,11 @@ __export(index_exports, {
   EmailBody: () => EmailBody,
   EventCard: () => EventCard,
   EventType: () => EventType,
+  FilterBar: () => NavBar,
   IntegrationService: () => IntegrationService,
   NavBar: () => NavBar,
   PreviewCard: () => PreviewCard,
+  SearchBar: () => SearchBar,
   TicketBody: () => TicketBody,
   UrgencyLevel: () => UrgencyLevel,
   fakeMessages: () => fakeMessages
@@ -16072,6 +16074,295 @@ function TicketBody({
   ] });
 }
 
+// src/components/atoms/icons/base_icons/CircleX.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function CircleX({
+  size = 24,
+  color = "#1D1D1F",
+  fillColor = "none"
+}) {
+  const getIconData = () => {
+    switch (size) {
+      case 16:
+        return {
+          viewBox: "0 0 16 16",
+          path: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M6.66667 9.33333L8 8M8 8L9.33333 6.66667M8 8L6.66667 6.66667M8 8L9.33333 9.33333M14 8C14 8.78793 13.8448 9.56815 13.5433 10.2961C13.2417 11.0241 12.7998 11.6855 12.2426 12.2426C11.6855 12.7998 11.0241 13.2417 10.2961 13.5433C9.56815 13.8448 8.78793 14 8 14C7.21207 14 6.43185 13.8448 5.7039 13.5433C4.97595 13.2417 4.31451 12.7998 3.75736 12.2426C3.20021 11.6855 2.75825 11.0241 2.45672 10.2961C2.15519 9.56815 2 8.78793 2 8C2 6.4087 2.63214 4.88258 3.75736 3.75736C4.88258 2.63214 6.4087 2 8 2C9.5913 2 11.1174 2.63214 12.2426 3.75736C13.3679 4.88258 14 6.4087 14 8Z", stroke: color, "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" })
+        };
+      case 20:
+        return {
+          viewBox: "0 0 20 20",
+          path: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M8.33333 11.6667L10 10M10 10L11.6667 8.33333M10 10L8.33333 8.33333M10 10L11.6667 11.6667M17.5 10C17.5 10.9849 17.306 11.9602 16.9291 12.8701C16.5522 13.7801 15.9997 14.6069 15.3033 15.3033C14.6069 15.9997 13.7801 16.5522 12.8701 16.9291C11.9602 17.306 10.9849 17.5 10 17.5C9.01509 17.5 8.03982 17.306 7.12987 16.9291C6.21993 16.5522 5.39314 15.9997 4.6967 15.3033C4.00026 14.6069 3.44781 13.7801 3.0709 12.8701C2.69399 11.9602 2.5 10.9849 2.5 10C2.5 8.01088 3.29018 6.10322 4.6967 4.6967C6.10322 3.29018 8.01088 2.5 10 2.5C11.9891 2.5 13.8968 3.29018 15.3033 4.6967C16.7098 6.10322 17.5 8.01088 17.5 10Z", stroke: color, "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+        };
+      case 24:
+        return {
+          viewBox: "0 0 24 24",
+          path: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M10 14L12 12M12 12L14 10M12 12L10 10M12 12L14 14M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z", stroke: color, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })
+        };
+      case 36:
+        return {
+          viewBox: "0 0 36 36",
+          path: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M15 21L18 18M18 18L21 15M18 18L15 15M18 18L21 21M31.5 18C31.5 19.7728 31.1508 21.5283 30.4724 23.1662C29.7939 24.8041 28.7995 26.2923 27.5459 27.5459C26.2923 28.7995 24.8041 29.7939 23.1662 30.4724C21.5283 31.1508 19.7728 31.5 18 31.5C16.2272 31.5 14.4717 31.1508 12.8338 30.4724C11.1959 29.7939 9.70765 28.7995 8.45406 27.5459C7.20047 26.2923 6.20606 24.8041 5.52763 23.1662C4.84919 21.5283 4.5 19.7728 4.5 18C4.5 14.4196 5.92232 10.9858 8.45406 8.45406C10.9858 5.92232 14.4196 4.5 18 4.5C21.5804 4.5 25.0142 5.92232 27.5459 8.45406C30.0777 10.9858 31.5 14.4196 31.5 18Z", stroke: color, "stroke-width": "2.25", "stroke-linecap": "round", "stroke-linejoin": "round" })
+        };
+    }
+  };
+  const { viewBox, path } = getIconData();
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: path
+    }
+  );
+}
+
+// src/components/atoms/icons/base_icons/Loading.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function Loading({
+  size = 24,
+  color = "#1D1D1F",
+  fillColor = "none"
+}) {
+  const getIconData = () => {
+    switch (size) {
+      case 16:
+        return {
+          viewBox: "0 0 16 16",
+          path: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              "path",
+              {
+                d: "M11.4209 4.85221C10.466 3.81296 9.13351 3.19329 7.72528 3.13377C6.31705 3.07424 4.93704 3.57926 3.89779 4.53422C2.85854 5.48917 2.23887 6.82165 2.17935 8.22988C2.11983 9.63811 2.62485 11.0181 3.5798 12.0574C4.05501 12.5745 4.62461 12.9868 5.26063 13.2835C5.89665 13.5802 6.581 13.7417 7.28038 13.7713C7.97977 13.8008 8.68023 13.6932 9.33409 13.4557C9.99289 13.2137 10.5952 12.851 11.1124 12.3758C11.6296 11.9005 12.0418 11.3309 12.3385 10.6949C12.6353 10.0589 12.7968 9.37456 12.8263 8.67517",
+                stroke: color,
+                "stroke-width": "1.25",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              "path",
+              {
+                d: "M10.4362 5.7666L12.3556 5.49268L12.0771 3.56836",
+                stroke: color,
+                "stroke-width": "1.25",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }
+            )
+          ] })
+        };
+      case 20:
+        return {
+          viewBox: "0 0 20 20",
+          path: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              "path",
+              {
+                d: "M14.2757 6.06538C13.082 4.76633 11.4164 3.99174 9.65611 3.91733C7.89583 3.84293 6.17081 4.4742 4.87175 5.6679C3.57269 6.86159 2.7981 8.52718 2.7237 10.2875C2.64929 12.0478 3.28057 13.7728 4.47426 15.0718C5.06828 15.7183 5.78027 16.2336 6.5753 16.6045C7.37033 16.9754 8.22576 17.1773 9.09999 17.2142C9.97423 17.2512 10.8498 17.1166 11.6671 16.8197C12.4906 16.5172 13.2436 16.0638 13.89 15.4698C14.5365 14.8758 15.0518 14.1638 15.4227 13.3688C15.7936 12.5738 15.9955 11.7183 16.0324 10.8441",
+                stroke: color,
+                "stroke-width": "1.5",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              "path",
+              {
+                d: "M13.0445 7.20838L15.4438 6.86597L15.0957 4.46057",
+                stroke: color,
+                "stroke-width": "1.5",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }
+            )
+          ] })
+        };
+      case 24:
+        return {
+          viewBox: "0 0 24 24",
+          path: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              "path",
+              {
+                d: "M17.1304 7.27831C15.698 5.71944 13.6993 4.78994 11.5869 4.70065C9.4746 4.61137 7.40458 5.3689 5.84571 6.80133C4.28684 8.23376 3.35733 10.2325 3.26805 12.3448C3.17876 14.4572 3.93629 16.5272 5.36872 18.086C6.08155 18.8618 6.93594 19.4802 7.88997 19.9253C8.844 20.3704 9.87052 20.6126 10.9196 20.6569C11.9687 20.7013 13.0194 20.5397 14.0002 20.1835C14.9884 19.8206 15.8919 19.2765 16.6676 18.5636C17.4434 17.8508 18.0618 16.9964 18.5068 16.0424C18.9519 15.0884 19.1942 14.0618 19.2385 13.0128",
+                stroke: color,
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              "path",
+              {
+                d: "M15.6528 8.65003L18.5319 8.23914L18.1143 5.35266",
+                stroke: color,
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }
+            )
+          ] })
+        };
+      case 36:
+        return {
+          viewBox: "0 0 36 36",
+          path: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              "path",
+              {
+                d: "M25.6966 10.9176C23.548 8.57929 20.5499 7.18503 17.3814 7.0511C14.2129 6.91717 11.1078 8.05347 8.76954 10.2021C6.43124 12.3508 5.03697 15.3488 4.90305 18.5173C4.76912 21.6859 5.90541 24.7909 8.05406 27.1292C9.1233 28.2928 10.4049 29.2204 11.8359 29.888C13.267 30.5557 14.8068 30.919 16.3804 30.9855C17.954 31.052 19.53 30.8097 21.0012 30.2754C22.4835 29.7309 23.8388 28.9148 25.0024 27.8456C26.166 26.7763 27.0936 25.4948 27.7612 24.0637C28.4289 22.6327 28.7922 21.0929 28.8587 19.5193",
+                stroke: color,
+                "stroke-width": "2.25",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              "path",
+              {
+                d: "M23.4797 12.975L27.7984 12.3587L27.1719 8.02893",
+                stroke: color,
+                "stroke-width": "2.25",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }
+            )
+          ] })
+        };
+    }
+  };
+  const { viewBox, path } = getIconData();
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: path
+    }
+  );
+}
+
+// src/components/atoms/icons/base_icons/Search.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function Search({
+  size = 24,
+  color = "#1D1D1F",
+  fillColor = "none"
+}) {
+  const getIconData = () => {
+    switch (size) {
+      case 16:
+        return {
+          viewBox: "0 0 16 16",
+          path: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M14 14L10 10M11.3333 6.66667C11.3333 9.244 9.244 11.3333 6.66667 11.3333C4.08934 11.3333 2 9.244 2 6.66667C2 4.08934 4.08934 2 6.66667 2C9.244 2 11.3333 4.08934 11.3333 6.66667Z", stroke: color, "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" })
+        };
+      case 20:
+        return {
+          viewBox: "0 0 20 20",
+          path: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M17.5 17.5L12.5 12.5M14.1667 8.33333C14.1667 11.555 11.555 14.1667 8.33333 14.1667C5.11167 14.1667 2.5 11.555 2.5 8.33333C2.5 5.11167 5.11167 2.5 8.33333 2.5C11.555 2.5 14.1667 5.11167 14.1667 8.33333Z", stroke: color, "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+        };
+      case 24:
+        return {
+          viewBox: "0 0 24 24",
+          path: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z", stroke: color, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })
+        };
+      case 36:
+        return {
+          viewBox: "0 0 36 36",
+          path: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M31.5 31.5L22.5 22.5M25.5 15C25.5 20.799 20.799 25.5 15 25.5C9.20101 25.5 4.5 20.799 4.5 15C4.5 9.20101 9.20101 4.5 15 4.5C20.799 4.5 25.5 9.20101 25.5 15Z", stroke: color, "stroke-width": "2.25", "stroke-linecap": "round", "stroke-linejoin": "round" })
+        };
+    }
+  };
+  const { viewBox, path } = getIconData();
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: path
+    }
+  );
+}
+
+// src/components/organisms/search_bar/search_bar.tsx
+var import_react4 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function SearchBar() {
+  const [query, setQuery] = (0, import_react4.useState)("");
+  const [state, setState] = (0, import_react4.useState)("inactive");
+  const [results, setResults] = (0, import_react4.useState)([]);
+  (0, import_react4.useEffect)(() => {
+    if (query === "") {
+      setState("inactive");
+      setResults([]);
+      return;
+    }
+    setState("typing");
+    const timeout = setTimeout(() => {
+      setState("loading");
+      setTimeout(() => {
+        setState("results");
+        setResults([
+          { label: "Unread", count: 11 },
+          { label: "Fire", count: 11 },
+          { label: "Slack", count: 9 },
+          { label: "Jira", count: 2 }
+        ]);
+      }, 1e3);
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [query]);
+  const clearQuery = () => {
+    setQuery("");
+    setState("inactive");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "w-full space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center px-4 py-2 rounded-full bg-gray-100 gap-2 text-gray-900", children: [
+      state === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Loading, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Search, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        "input",
+        {
+          type: "text",
+          className: "flex-1 bg-transparent outline-none placeholder:text-gray-400",
+          placeholder: "Search your filtered queue",
+          value: query,
+          onChange: (e) => setQuery(e.target.value)
+        }
+      ),
+      query && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { onClick: clearQuery, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CircleX, {}) })
+    ] }),
+    state === "results" && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("p", { className: "text-gray-700 font-medium", children: [
+        "Search results (",
+        results.reduce((acc, r) => acc + r.count, 0),
+        "):"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-wrap gap-2 mt-2", children: results.map((r) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+        "span",
+        {
+          className: "px-3 py-1 rounded-full bg-gray-100 text-gray-700",
+          children: [
+            r.label,
+            " (",
+            r.count,
+            ")"
+          ]
+        },
+        r.label
+      )) })
+    ] })
+  ] });
+}
+
 // src/util/mockdata.ts
 var fakeMessages = [
   {
@@ -16171,9 +16462,11 @@ This is a *markdown* **example**.
   EmailBody,
   EventCard,
   EventType,
+  FilterBar,
   IntegrationService,
   NavBar,
   PreviewCard,
+  SearchBar,
   TicketBody,
   UrgencyLevel,
   fakeMessages