qt-ui-kit 1.0.113 → 1.0.114

package/dist/index.mjs

@@ -17434,6 +17434,238 @@ function FilterBar({ buttons }) {
   ] });
 }
 
+// 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",
+      {
+        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",
+          {
+            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
+          }
+        )
+      }
+    ),
+    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",
+        {
+          onClick: onConfirm,
+          className: clsx13(buttonBase, styles.confirm),
+          children: confirmLabel
+        }
+      ),
+      /* @__PURE__ */ jsx47(
+        "button",
+        {
+          onClick: onClose,
+          className: clsx13(buttonBase, styles.cancel, "px-8"),
+          children: cancelLabel
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// 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",
+        {
+          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"
+          ),
+          children: count > 0 ? `+ Connect Another` : `+ Connect`
+        }
+      )
+    ] }),
+    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) => {
   EventState2["NEW"] = "new";
@@ -17543,16 +17775,22 @@ 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,
   IntegrationService,
+  Modal,
   NavBar,
   PreviewCard,
   SearchBar,