qt-ui-kit 1.0.113 → 1.0.115

package/dist/index.mjs

@@ -11172,17 +11172,28 @@ var require_lib7 = __commonJS({
 import { useState as useState2 } from "react";
 
 // src/types/global.ts
-var IntegrationService = /* @__PURE__ */ ((IntegrationService5) => {
-  IntegrationService5["SLACK"] = "slack";
-  IntegrationService5["GMAIL"] = "google_mail";
-  IntegrationService5["GCAL"] = "google_calendar";
-  IntegrationService5["MSTEAMS"] = "microsoft_teams";
-  IntegrationService5["MSMAIL"] = "microsoft_mail";
-  IntegrationService5["MSCAL"] = "microsoft_calendar";
-  IntegrationService5["AJIRA"] = "atlassian_jira";
-  IntegrationService5["CLKUP"] = "clickup";
-  IntegrationService5["ASANA"] = "asana";
-  return IntegrationService5;
+var FilterCategory = /* @__PURE__ */ ((FilterCategory2) => {
+  FilterCategory2["FIRES"] = "fires";
+  FilterCategory2["INSIGHTS"] = "insights";
+  FilterCategory2["NEW"] = "new";
+  FilterCategory2["DONE"] = "done";
+  return FilterCategory2;
+})(FilterCategory || {});
+var MoreFilter = /* @__PURE__ */ ((MoreFilter3) => {
+  MoreFilter3["MORE"] = "more";
+  return MoreFilter3;
+})(MoreFilter || {});
+var IntegrationService = /* @__PURE__ */ ((IntegrationService4) => {
+  IntegrationService4["SLACK"] = "slack";
+  IntegrationService4["GMAIL"] = "google_mail";
+  IntegrationService4["GCAL"] = "google_calendar";
+  IntegrationService4["MSTEAMS"] = "microsoft_teams";
+  IntegrationService4["MSMAIL"] = "microsoft_mail";
+  IntegrationService4["MSCAL"] = "microsoft_calendar";
+  IntegrationService4["AJIRA"] = "atlassian_jira";
+  IntegrationService4["CLKUP"] = "clickup";
+  IntegrationService4["ASANA"] = "asana";
+  return IntegrationService4;
 })(IntegrationService || {});
 var BaseIconName = /* @__PURE__ */ ((BaseIconName2) => {
   BaseIconName2["SEARCH"] = "search";
@@ -17277,162 +17288,350 @@ function FilterNavButton({ icon, label, active, onClick, totalItems }) {
 
 // src/components/organisms/filter_bar/filter_bar.tsx
 import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
+var CATEGORY_FILTERS = [
+  {
+    filter: "fires" /* FIRES */,
+    label: "Fires",
+    icon: (active) => /* @__PURE__ */ jsx45(FireIcon, { variant: active ? void 0 : "none" /* OUTLINED */ })
+  },
+  {
+    filter: "insights" /* INSIGHTS */,
+    label: "Q Insights",
+    icon: (active) => /* @__PURE__ */ jsx45(InsightsIcon, { variant: active ? void 0 : "none" /* OUTLINED */ })
+  },
+  {
+    filter: "new" /* NEW */,
+    label: "Unread",
+    icon: (active) => /* @__PURE__ */ jsx45(Mail, { size: 36, fillColor: active ? "#BFF4F6" : void 0 })
+  },
+  {
+    filter: "done" /* DONE */,
+    label: "Done",
+    icon: (active) => /* @__PURE__ */ jsx45(
+      CheckBox,
+      {
+        size: 36,
+        color: "#000000",
+        fillColor: active ? "#E8FE99" : void 0
+      }
+    )
+  }
+];
+var INTEGRATION_FILTERS = [
+  { services: ["slack" /* SLACK */], label: "Slack", icon: /* @__PURE__ */ jsx45(SlackIcon, {}) },
+  {
+    services: ["google_mail" /* GMAIL */],
+    label: "Gmail",
+    icon: /* @__PURE__ */ jsx45(GoogleMailIcon, {})
+  },
+  {
+    services: ["google_calendar" /* GCAL */],
+    label: "Gcal",
+    icon: /* @__PURE__ */ jsx45(GoogleCalendarIcon, {})
+  },
+  {
+    services: ["atlassian_jira" /* AJIRA */],
+    label: "Jira",
+    icon: /* @__PURE__ */ jsx45(AtlassianIcon, {})
+  },
+  {
+    services: ["microsoft_teams" /* MSTEAMS */],
+    label: "Teams",
+    icon: /* @__PURE__ */ jsx45(MicrosoftTeamsIcon, {})
+  },
+  {
+    services: ["microsoft_mail" /* MSMAIL */, "microsoft_calendar" /* MSCAL */],
+    label: "Outlook",
+    icon: /* @__PURE__ */ jsx45(MicrosoftOutlookMailIcon, {})
+  },
+  {
+    services: ["clickup" /* CLKUP */],
+    label: "ClickUp",
+    icon: /* @__PURE__ */ jsx45(ClickupIcon, {})
+  },
+  { services: ["asana" /* ASANA */], label: "Asana", icon: /* @__PURE__ */ jsx45(AsanaIcon, {}) }
+];
 function FilterBar({ buttons }) {
-  return /* @__PURE__ */ jsxs32("div", { className: "flex h-full min-h-0 flex-col w-[54px] items-center gap-4", children: [
-    !buttons?.fires?.disabled && /* @__PURE__ */ jsx45(
+  const renderCategoryButton = ({ filter, label, icon }) => {
+    const config = buttons?.[filter];
+    if (config?.disabled) return null;
+    return /* @__PURE__ */ jsx45(
       FilterNavButton,
       {
-        icon: /* @__PURE__ */ jsx45(
-          FireIcon,
-          {
-            variant: buttons?.fires?.active ? void 0 : "none" /* OUTLINED */
-          }
-        ),
-        label: "Fires",
-        onClick: buttons?.fires?.onClick,
-        totalItems: buttons?.fires?.count
-      }
-    ),
-    !buttons?.insights?.disabled && /* @__PURE__ */ jsx45(
+        icon: icon(config?.active),
+        label,
+        onClick: config?.onClick,
+        totalItems: config?.count
+      },
+      filter
+    );
+  };
+  const renderIntegrationButton = ({
+    services,
+    label,
+    icon
+  }) => {
+    const configs = services.map((service) => buttons?.[service]);
+    const allDisabled = configs.every((c) => c?.disabled);
+    if (allDisabled) return null;
+    const anyActive = configs.some((c) => c?.active);
+    const onClick = configs.find((c) => c?.onClick)?.onClick;
+    return /* @__PURE__ */ jsx45(
       FilterNavButton,
       {
-        icon: /* @__PURE__ */ jsx45(
-          InsightsIcon,
-          {
-            variant: buttons?.insights?.active ? void 0 : "none" /* OUTLINED */
-          }
-        ),
-        label: "Q Insights",
-        onClick: buttons?.insights?.onClick,
-        totalItems: buttons?.insights?.count
-      }
-    ),
-    !buttons?.unread?.disabled && /* @__PURE__ */ jsx45(
+        icon: /* @__PURE__ */ jsx45("div", { className: anyActive ? "" : "grayscale", children: icon }),
+        label,
+        onClick
+      },
+      services.join("-")
+    );
+  };
+  return /* @__PURE__ */ jsxs32("div", { className: "flex h-full w-[54px] min-h-0 flex-col items-center gap-4", children: [
+    CATEGORY_FILTERS.map(renderCategoryButton),
+    /* @__PURE__ */ jsx45("hr", { className: "w-full border-0.5 text-qtneutral-700" }),
+    /* @__PURE__ */ jsx45("div", { className: "flex-1 w-full min-h-0 min-w-[58px] overflow-y-auto flex flex-col items-center gap-4 overscroll-contain", children: INTEGRATION_FILTERS.map(renderIntegrationButton) }),
+    /* @__PURE__ */ jsx45("hr", { className: "w-full border-0.5 text-qtneutral-700" }),
+    /* @__PURE__ */ jsx45(
       FilterNavButton,
       {
-        icon: /* @__PURE__ */ jsx45(
-          Mail,
-          {
-            size: 36,
-            fillColor: buttons?.unread?.active ? "#BFF4F6" : void 0
-          }
-        ),
-        label: "Unread",
-        onClick: buttons?.unread?.onClick,
-        totalItems: buttons?.unread?.count
+        icon: /* @__PURE__ */ jsx45(PlusLarge, { size: 36 }),
+        onClick: buttons?.more?.onClick
       }
-    ),
-    !buttons?.done?.disabled && /* @__PURE__ */ jsx45(
-      FilterNavButton,
+    )
+  ] });
+}
+
+// src/components/molecules/modal/modal.tsx
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import { createPortal } from "react-dom";
+import clsx12 from "clsx";
+import { jsx as jsx46 } from "react/jsx-runtime";
+function Modal({
+  isOpen,
+  onClose,
+  children,
+  className,
+  disableBackdropClick = false,
+  disableEscapeKey = false
+}) {
+  const modalRef = useRef2(null);
+  const previousActiveElement = useRef2(null);
+  useEffect4(() => {
+    if (!isOpen || disableEscapeKey) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, disableEscapeKey]);
+  useEffect4(() => {
+    if (!isOpen) return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    previousActiveElement.current = document.activeElement;
+    setTimeout(() => {
+      const focusable = modalRef.current?.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable && focusable.length > 0) {
+        focusable[0].focus();
+      }
+    }, 0);
+    return () => {
+      document.body.style.overflow = originalOverflow;
+      previousActiveElement.current?.focus();
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  const handleBackdropClick = () => {
+    if (!disableBackdropClick) onClose();
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx46(
+      "div",
       {
-        icon: /* @__PURE__ */ jsx45(
-          CheckBox,
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-qtneutral-900/50 animate-fade-in",
+        onClick: handleBackdropClick,
+        "aria-modal": "true",
+        role: "dialog",
+        children: /* @__PURE__ */ jsx46(
+          "div",
           {
-            size: 36,
-            color: "#000000",
-            fillColor: buttons?.done?.active ? "#E8FE99" : void 0
+            ref: modalRef,
+            className: clsx12(
+              "bg-white rounded-2xl p-6 max-w-[480px] w-full mx-4 modal-shadow animate-modal-scale",
+              className
+            ),
+            onClick: (e) => e.stopPropagation(),
+            role: "document",
+            children
           }
-        ),
-        label: "Done",
-        onClick: buttons?.done?.onClick,
-        totalItems: buttons?.done?.count
+        )
       }
     ),
-    /* @__PURE__ */ jsx45("hr", { className: "w-full border-0.5 text-qtneutral-700" }),
-    /* @__PURE__ */ jsxs32("div", { className: "flex-1 min-h-0 w-full overflow-y-auto flex flex-col gap-4 overscroll-contain items-center min-w-[58px]", children: [
-      !buttons?.slack?.disabled && /* @__PURE__ */ jsx45(
-        FilterNavButton,
-        {
-          icon: /* @__PURE__ */ jsx45("div", { className: buttons?.slack?.active ? "" : "grayscale", children: /* @__PURE__ */ jsx45(SlackIcon, {}) }),
-          label: "slack",
-          onClick: buttons?.slack?.onClick
-        }
-      ),
-      !buttons?.google_mail?.disabled && /* @__PURE__ */ jsx45(
-        FilterNavButton,
-        {
-          icon: /* @__PURE__ */ jsx45("div", { className: buttons?.google_mail?.active ? "" : "grayscale", children: /* @__PURE__ */ jsx45(GoogleMailIcon, {}) }),
-          label: "Gmail",
-          onClick: buttons?.google_mail?.onClick
-        }
-      ),
-      !buttons?.google_calendar?.disabled && /* @__PURE__ */ jsx45(
-        FilterNavButton,
+    document.body
+  );
+}
+
+// src/components/molecules/modal/confirmation_modal.tsx
+import clsx13 from "clsx";
+import { jsx as jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
+var variantStyles = {
+  danger: {
+    confirm: "bg-qtred-500 text-white hover:bg-qtred-400",
+    cancel: "bg-white text-qtpurple-500 border-2 border-qtpurple-500 hover:bg-qtpurple-200"
+  },
+  primary: {
+    confirm: "bg-qtpurple-500 text-white hover:bg-qtpurple-600",
+    cancel: "bg-white text-qtpurple-500 border-2 border-qtpurple-500 hover:bg-qtpurple-200"
+  },
+  warning: {
+    confirm: "bg-qtorange-400 text-qtneutral-900 hover:bg-qtorange-300",
+    cancel: "bg-white text-qtpurple-500 border-2 border-qtpurple-500 hover:bg-qtpurple-200"
+  }
+};
+function ConfirmationModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message: message2,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "primary",
+  children
+}) {
+  const buttonBase = "px-4 py-2.5 rounded-lg label-1-bold transition-colors";
+  const styles = variantStyles[variant];
+  return /* @__PURE__ */ jsx47(Modal, { isOpen, onClose, children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsx47("h2", { className: "label-1-bold text-qtneutral-900", children: title }),
+    message2 && /* @__PURE__ */ jsx47("div", { className: "body-small text-qtneutral-800 whitespace-pre-line", children: typeof message2 === "string" ? /* @__PURE__ */ jsx47("p", { children: message2 }) : message2 }),
+    children,
+    /* @__PURE__ */ jsxs33("div", { className: "flex gap-4 justify-end", children: [
+      /* @__PURE__ */ jsx47(
+        "button",
         {
-          icon: /* @__PURE__ */ jsx45(
-            "div",
-            {
-              className: buttons?.google_calendar?.active ? "" : "grayscale",
-              children: /* @__PURE__ */ jsx45(GoogleCalendarIcon, {})
-            }
-          ),
-          label: "Gcal",
-          onClick: buttons?.google_calendar?.onClick
+          onClick: onConfirm,
+          className: clsx13(buttonBase, styles.confirm),
+          children: confirmLabel
         }
       ),
-      !buttons?.atlassian_jira?.disabled && /* @__PURE__ */ jsx45(
-        FilterNavButton,
+      /* @__PURE__ */ jsx47(
+        "button",
         {
-          icon: /* @__PURE__ */ jsx45(
-            "div",
-            {
-              className: buttons?.atlassian_jira?.active ? "" : "grayscale",
-              children: /* @__PURE__ */ jsx45(AtlassianIcon, {})
-            }
-          ),
-          label: "Jira",
-          onClick: buttons?.atlassian_jira?.onClick
+          onClick: onClose,
+          className: clsx13(buttonBase, styles.cancel, "px-8"),
+          children: cancelLabel
         }
-      ),
-      !buttons?.microsoft_teams?.disabled && /* @__PURE__ */ jsx45(
-        FilterNavButton,
-        {
-          icon: /* @__PURE__ */ jsx45(
-            "div",
-            {
-              className: buttons?.microsoft_teams?.active ? "" : "grayscale",
-              children: /* @__PURE__ */ jsx45(MicrosoftTeamsIcon, {})
-            }
-          ),
-          label: "Teams",
-          onClick: buttons?.microsoft_teams?.onClick
-        }
-      ),
-      !(buttons?.microsoft_mail?.disabled && buttons?.microsoft_calendar?.disabled) && /* @__PURE__ */ jsx45(
-        FilterNavButton,
+      )
+    ] })
+  ] }) });
+}
+
+// src/components/organisms/account/info/account_info_field.tsx
+import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
+function AccountInfoField({
+  label,
+  value,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs34("div", { className: `flex-1 flex flex-col flex-wrap gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsx48("label", { className: "body-bold text-qtneutral-900", children: label }),
+    /* @__PURE__ */ jsx48("p", { className: "body text-qtneutral-900", children: value || "-" })
+  ] });
+}
+
+// src/components/organisms/account/info/account_info_section.tsx
+import { jsx as jsx49, jsxs as jsxs35 } from "react/jsx-runtime";
+function AccountInfoSection({
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs35("div", { className: "flex flex-col flex-wrap gap-4 pt-6 pb-6", children: [
+    title && /* @__PURE__ */ jsx49("div", { className: "body-bold text-qtneutral-900", children: title }),
+    /* @__PURE__ */ jsx49("div", { className: "user-data-row", children })
+  ] });
+}
+
+// src/components/organisms/account/integrations/account_integration_card.tsx
+import React2 from "react";
+import clsx14 from "clsx";
+import { jsx as jsx50, jsxs as jsxs36 } from "react/jsx-runtime";
+var AccountIntegrationCard = React2.memo(function AccountIntegrationCard2({
+  integrationName,
+  children,
+  onConnect,
+  disabled,
+  ready,
+  icon,
+  limit
+}) {
+  const count = Array.isArray(children) ? children.length : children ? 1 : 0;
+  const isLimitReached = count >= limit;
+  return /* @__PURE__ */ jsxs36("div", { className: "card-your-apps flex flex-col items-center gap-4 rounded-lg border-2 border-qtneutral-400 bg-white p-4", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx50(
+          "div",
+          {
+            className: clsx14(
+              "w-[44px] h-[44px] flex items-center justify-center transition-opacity border-none bg-transparent p-0",
+              !ready && "opacity-50 cursor-not-allowed",
+              disabled && "grayscale border-2 border-green-700 bg-green-100"
+            ),
+            "aria-label": `Integrate with ${integrationName}`,
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs36("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx50("span", { className: "text-sm font-bold", children: integrationName }),
+          /* @__PURE__ */ jsx50("span", { className: "body-small text-qtneutral-800", children: count > 0 ? `${count} of ${limit} connected` : "No accounts connected" })
+        ] })
+      ] }),
+      !isLimitReached && ready && /* @__PURE__ */ jsx50(
+        "button",
         {
-          icon: /* @__PURE__ */ jsx45(
-            "div",
-            {
-              className: buttons?.microsoft_calendar?.active || buttons?.microsoft_mail?.active ? "" : "grayscale",
-              children: /* @__PURE__ */ jsx45(MicrosoftOutlookMailIcon, {})
-            }
+          onClick: onConnect,
+          disabled: disabled || !ready,
+          className: clsx14(
+            "label-1-bold text-qtpurple-600 bg-transparent border-none p-0 cursor-pointer hover:text-qtpurple-500",
+            (disabled || !ready) && "opacity-50 cursor-not-allowed pointer-events-none"
           ),
-          label: "Outlook",
-          onClick: buttons?.microsoft_mail?.onClick || buttons?.microsoft_calendar?.onClick
-        }
-      ),
-      !buttons?.clickup?.disabled && /* @__PURE__ */ jsx45(
-        FilterNavButton,
-        {
-          icon: /* @__PURE__ */ jsx45("div", { className: buttons?.clickup?.active ? "" : "grayscale", children: /* @__PURE__ */ jsx45(ClickupIcon, {}) }),
-          label: "ClickUp",
-          onClick: buttons?.clickup?.onClick
-        }
-      ),
-      !buttons?.asana?.disabled && /* @__PURE__ */ jsx45(
-        FilterNavButton,
-        {
-          icon: /* @__PURE__ */ jsx45("div", { className: buttons?.asana?.active ? "" : "grayscale", children: /* @__PURE__ */ jsx45(AsanaIcon, {}) }),
-          label: "Asana",
-          onClick: buttons?.asana?.onClick
+          children: count > 0 ? `+ Connect Another` : `+ Connect`
         }
       )
     ] }),
-    /* @__PURE__ */ jsx45("hr", { className: "w-full border-0.5 text-qtneutral-700" }),
-    /* @__PURE__ */ jsx45("div", { onClick: buttons?.more?.onClick, children: /* @__PURE__ */ jsx45(FilterNavButton, { icon: /* @__PURE__ */ jsx45(PlusLarge, { size: 36 }) }) })
+    count > 0 && /* @__PURE__ */ jsx50("div", { className: "flex w-full flex-col gap-2.5", children })
   ] });
-}
+});
+var account_integration_card_default = AccountIntegrationCard;
+
+// src/components/organisms/account/integrations/account_integration_card_item.tsx
+import React3 from "react";
+import { jsx as jsx51, jsxs as jsxs37 } from "react/jsx-runtime";
+var AccountIntegrationCardItem = React3.memo(
+  function AccountIntegrationCardItem2({
+    name,
+    onDisconnect
+  }) {
+    return /* @__PURE__ */ jsxs37("div", { className: "flex flex-row flex-nowrap justify-between items-center bg-qtneutral-100 p-4 border border-qtpurple-500 rounded-lg", children: [
+      /* @__PURE__ */ jsx51("div", { className: "label-1-bold text-qtneutral-900", children: name }),
+      /* @__PURE__ */ jsx51(
+        "button",
+        {
+          type: "button",
+          className: "label-2 text-qtred-500 underline bg-transparent border-none p-0 cursor-pointer hover:text-qtred-400",
+          onClick: (e) => {
+            e.stopPropagation();
+            onDisconnect();
+          },
+          children: "Disconnect"
+        }
+      )
+    ] });
+  }
+);
+var account_integration_card_item_default = AccountIntegrationCardItem;
 
 // src/types/events.ts
 var EventState = /* @__PURE__ */ ((EventState2) => {
@@ -17543,16 +17742,24 @@ This is a *markdown* **example**.
   }
 ];
 export {
+  AccountInfoField,
+  AccountInfoSection,
+  account_integration_card_default as AccountIntegrationCard,
+  account_integration_card_item_default as AccountIntegrationCardItem,
   BaseIconName,
   BrandIcon,
   ChatBody,
   ColorVariants,
+  ConfirmationModal,
   EmailBody,
   EventCard,
   EventState,
   EventType,
   FilterBar,
+  FilterCategory,
   IntegrationService,
+  Modal,
+  MoreFilter,
   NavBar,
   PreviewCard,
   SearchBar,