@scripso-homepad/ui 0.4.9 → 0.4.10

package/dist/web/index.js

@@ -5,6 +5,9 @@ import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, useRef, useEffect, useState, useId, useCallback, useMemo, useContext, useLayoutEffect } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
+import { Toaster as Toaster$1, toast } from 'sonner';
+export { toast } from 'sonner';
+import 'sonner/dist/styles.css';
 
 // node_modules/react-dom/node_modules/scheduler/cjs/scheduler.production.min.js
 var require_scheduler_production_min = __commonJS({
@@ -5342,7 +5345,7 @@ var require_react_dom_production_min = __commonJS({
       if (5 === d || 6 === d) a = a.stateNode, b ? c.insertBefore(a, b) : c.appendChild(a);
       else if (4 !== d && (a = a.child, null !== a)) for (Wj(a, b, c), a = a.sibling; null !== a; ) Wj(a, b, c), a = a.sibling;
     }
-    var X2 = null;
+    var X3 = null;
     var Xj = false;
     function Yj(a, b, c) {
       for (c = c.child; null !== c; ) Zj(a, b, c), c = c.sibling;
@@ -5356,23 +5359,23 @@ var require_react_dom_production_min = __commonJS({
         case 5:
           U || Lj(c, b);
         case 6:
-          var d = X2, e = Xj;
-          X2 = null;
+          var d = X3, e = Xj;
+          X3 = null;
           Yj(a, b, c);
-          X2 = d;
+          X3 = d;
           Xj = e;
-          null !== X2 && (Xj ? (a = X2, c = c.stateNode, 8 === a.nodeType ? a.parentNode.removeChild(c) : a.removeChild(c)) : X2.removeChild(c.stateNode));
+          null !== X3 && (Xj ? (a = X3, c = c.stateNode, 8 === a.nodeType ? a.parentNode.removeChild(c) : a.removeChild(c)) : X3.removeChild(c.stateNode));
           break;
         case 18:
-          null !== X2 && (Xj ? (a = X2, c = c.stateNode, 8 === a.nodeType ? Kf(a.parentNode, c) : 1 === a.nodeType && Kf(a, c), bd(a)) : Kf(X2, c.stateNode));
+          null !== X3 && (Xj ? (a = X3, c = c.stateNode, 8 === a.nodeType ? Kf(a.parentNode, c) : 1 === a.nodeType && Kf(a, c), bd(a)) : Kf(X3, c.stateNode));
           break;
         case 4:
-          d = X2;
+          d = X3;
           e = Xj;
-          X2 = c.stateNode.containerInfo;
+          X3 = c.stateNode.containerInfo;
           Xj = true;
           Yj(a, b, c);
-          X2 = d;
+          X3 = d;
           Xj = e;
           break;
         case 0:
@@ -5429,23 +5432,23 @@ var require_react_dom_production_min = __commonJS({
           a: for (; null !== h; ) {
             switch (h.tag) {
               case 5:
-                X2 = h.stateNode;
+                X3 = h.stateNode;
                 Xj = false;
                 break a;
               case 3:
-                X2 = h.stateNode.containerInfo;
+                X3 = h.stateNode.containerInfo;
                 Xj = true;
                 break a;
               case 4:
-                X2 = h.stateNode.containerInfo;
+                X3 = h.stateNode.containerInfo;
                 Xj = true;
                 break a;
             }
             h = h.return;
           }
-          if (null === X2) throw Error(p(160));
+          if (null === X3) throw Error(p(160));
           Zj(f, g, e);
-          X2 = null;
+          X3 = null;
           Xj = false;
           var k = e.alternate;
           null !== k && (k.return = null);
@@ -29835,10 +29838,10 @@ function TableActionsCell({ className, children, ...props }) {
 
 // src/web/components/TableActionsMenu.tsx
 var import_react_dom = __toESM(require_react_dom(), 1);
-var actionButtonClassName = "inline-flex cursor-pointer items-center gap-1 rounded-lg border border-storm-gray-50 bg-white px-3 py-2 font-sans text-xs font-medium leading-none text-storm-gray-900 transition-colors hover:bg-storm-gray-0";
+var inlineActionClassName = "inline-flex cursor-pointer items-center gap-1 rounded-lg border border-storm-gray-50 bg-white px-3 py-2 font-sans text-xs font-medium leading-none text-storm-gray-900 transition-colors hover:bg-storm-gray-0";
 var variantClasses = {
-  approve: actionButtonClassName,
-  reject: actionButtonClassName,
+  approve: inlineActionClassName,
+  reject: inlineActionClassName,
   menu: "inline-flex size-7 cursor-pointer items-center justify-center rounded-lg text-storm-gray-500 transition-colors hover:bg-storm-gray-0 hover:text-storm-gray-900"
 };
 var inlineActionIconClassName = "inline-flex size-4 shrink-0 items-center justify-center [&_svg]:size-4";
@@ -30298,8 +30301,8 @@ function Modal({
   }
   const sharedButtonClassName = cn(
     "btn h-13 justify-center!",
-    footerLayout === "split" && "min-w-0 flex-1",
-    buttonClassName
+    footerLayout === "split" && "min-w-0 flex-1 basis-0",
+    footerLayout !== "split" && buttonClassName
   );
   return /* @__PURE__ */ jsx(
     "div",
@@ -30338,7 +30341,7 @@ function Modal({
                   "h2",
                   {
                     id: "homepad-modal-title",
-                    className: "font-sans text-lg font-bold leading-none tracking-normal text-black",
+                    className: "font-sans text-lg font-bold leading-6 tracking-normal text-black",
                     children: title
                   }
                 ),
@@ -30346,7 +30349,7 @@ function Modal({
                   "p",
                   {
                     id: "homepad-modal-subtitle",
-                    className: "font-sans text-xs font-normal leading-none tracking-normal text-storm-gray-400",
+                    className: "font-sans text-xs font-normal leading-4 tracking-normal text-storm-gray-400",
                     children: subtitle
                   }
                 ) : null
@@ -30357,7 +30360,7 @@ function Modal({
               "footer",
               {
                 className: cn(
-                  "flex gap-4",
+                  "flex shrink-0 gap-4",
                   footerLayout === "split" ? "w-full" : footerAlignClasses[footerAlign]
                 ),
                 children: [
@@ -30392,6 +30395,386 @@ function Modal({
     }
   );
 }
+var DRAWER_TRANSITION_MS = 300;
+function Drawer({
+  open,
+  title,
+  subtitle,
+  children,
+  footer,
+  onClose,
+  closeAriaLabel = "Close",
+  widthClassName = "w-full md:w-[464px]",
+  className,
+  headerClassName,
+  contentClassName,
+  footerClassName
+}) {
+  const [isPresent, setIsPresent] = useState(open);
+  const [isAnimatedIn, setIsAnimatedIn] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setIsPresent(true);
+      const frame = window.requestAnimationFrame(() => {
+        window.requestAnimationFrame(() => {
+          setIsAnimatedIn(true);
+        });
+      });
+      return () => {
+        window.cancelAnimationFrame(frame);
+      };
+    }
+    setIsAnimatedIn(false);
+    const timeout = window.setTimeout(() => {
+      setIsPresent(false);
+    }, DRAWER_TRANSITION_MS);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!isPresent) {
+      return;
+    }
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isPresent, onClose]);
+  if (!isPresent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex justify-end p-2 max-md:p-0",
+      role: "presentation",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": closeAriaLabel,
+            className: cn(
+              "absolute inset-0 bg-storm-gray-850/40 backdrop-blur-[12px] transition-opacity duration-300 ease-in-out",
+              isAnimatedIn ? "opacity-100" : "opacity-0"
+            ),
+            onClick: onClose
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": "homepad-drawer-title",
+            ...subtitle ? { "aria-describedby": "homepad-drawer-subtitle" } : {},
+            className: cn(
+              "relative z-10 flex h-[calc(100dvh-16px)] min-h-0 flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out will-change-transform max-md:h-dvh max-md:rounded-none",
+              isAnimatedIn ? "translate-x-0" : "translate-x-full",
+              widthClassName,
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "header",
+                {
+                  className: cn(
+                    "flex h-[87px] shrink-0 items-start justify-between border-b border-storm-gray-50 pt-6 pr-6 pb-4 pl-6",
+                    headerClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex flex-col gap-1", children: [
+                      /* @__PURE__ */ jsx(
+                        "h2",
+                        {
+                          id: "homepad-drawer-title",
+                          className: "font-sans text-[18px] font-bold leading-6 tracking-normal text-black",
+                          children: title
+                        }
+                      ),
+                      subtitle ? /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          id: "homepad-drawer-subtitle",
+                          className: "font-sans text-sm font-normal leading-[19px] tracking-normal text-storm-gray-400",
+                          children: subtitle
+                        }
+                      ) : null
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": closeAriaLabel,
+                        className: "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-storm-gray-400 transition-colors hover:bg-storm-gray-50 hover:text-storm-gray-600",
+                        onClick: onClose,
+                        children: /* @__PURE__ */ jsx(X, { className: "size-5", strokeWidth: 1.75 })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "drawer-scroll-area min-h-0 flex-1 overflow-y-auto px-6 pt-6 pb-0",
+                    contentClassName
+                  ),
+                  children
+                }
+              ),
+              footer ? /* @__PURE__ */ jsx("footer", { className: cn("shrink-0 px-6 py-5", footerClassName), children: footer }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function TimelineCheckIcon({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M13.3346 4L6.0013 11.3333L2.66797 8",
+          stroke: "#279D54",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function HistoryTimeline({ events }) {
+  return /* @__PURE__ */ jsx("ol", { className: "m-0 flex list-none flex-col gap-1 p-0", children: events.map((event, index) => {
+    const isLast = index === events.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex w-8 shrink-0 flex-col items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-[28px] border border-storm-gray-50 bg-white", children: /* @__PURE__ */ jsx(TimelineCheckIcon, { className: "size-4 shrink-0" }) }),
+        !isLast ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "mt-1 h-[31px] w-px shrink-0 border-l border-dashed border-storm-gray-100"
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2 pt-1.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-sans text-sm font-medium leading-[19px] tracking-normal text-slate-blue", children: event.title }),
+        /* @__PURE__ */ jsx("p", { className: "font-sans text-xs font-normal leading-4 tracking-normal text-storm-gray-300", children: event.timestamp })
+      ] })
+    ] }, event.id);
+  }) });
+}
+function ToastCloseIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M15 5L5 15M5 5L15 15",
+          stroke: "#B5BCC1",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastSuccessIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M20 6L9 17L4 12",
+          stroke: "#279D54",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastErrorIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M18 6L6 18M6 6L18 18",
+          stroke: "#AE0011",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastWarningIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12.0001 9.00022V13.0002M12.0001 17.0002H12.0101M21.7301 18.0002L13.7301 4.00022C13.5556 3.69243 13.3027 3.43641 12.997 3.25829C12.6913 3.08017 12.3438 2.98633 11.9901 2.98633C11.6363 2.98633 11.2888 3.08017 10.9831 3.25829C10.6774 3.43641 10.4245 3.69243 10.2501 4.00022L2.25005 18.0002C2.07373 18.3056 1.98128 18.6521 1.98206 19.0047C1.98284 19.3573 2.07683 19.7035 2.2545 20.008C2.43217 20.3126 2.6872 20.5648 2.99375 20.7391C3.30029 20.9133 3.64746 21.0034 4.00005 21.0002H20.0001C20.351 20.9999 20.6956 20.9072 20.9993 20.7315C21.3031 20.5558 21.5553 20.3033 21.7306 19.9993C21.9059 19.6954 21.9981 19.3506 21.998 18.9997C21.9979 18.6488 21.9055 18.3041 21.7301 18.0002Z",
+          stroke: "#F2A800",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastInfoIcon(props) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z",
+          stroke: "#0F52C7",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ToastIconBadge({
+  tone,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `homepad-toast__icon-badge homepad-toast__icon-badge--${tone}`, children });
+}
+var homepadToastIcons = {
+  success: /* @__PURE__ */ jsx(ToastIconBadge, { tone: "success", children: /* @__PURE__ */ jsx(ToastSuccessIcon, {}) }),
+  error: /* @__PURE__ */ jsx(ToastIconBadge, { tone: "error", children: /* @__PURE__ */ jsx(ToastErrorIcon, {}) }),
+  warning: /* @__PURE__ */ jsx(ToastIconBadge, { tone: "warning", children: /* @__PURE__ */ jsx(ToastWarningIcon, {}) }),
+  info: /* @__PURE__ */ jsx(ToastIconBadge, { tone: "info", children: /* @__PURE__ */ jsx(ToastInfoIcon, {}) }),
+  close: /* @__PURE__ */ jsx(ToastCloseIcon, {})
+};
+function Toaster({
+  className,
+  position = "bottom-right",
+  theme = "light",
+  closeButton = true,
+  gap = 12,
+  offset = 20,
+  toastOptions,
+  icons,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      className: ["homepad-toaster", className].filter(Boolean).join(" "),
+      theme,
+      position,
+      closeButton,
+      gap,
+      offset,
+      mobileOffset: 8,
+      icons: { ...homepadToastIcons, ...icons },
+      toastOptions: {
+        duration: 4e3,
+        classNames: {
+          toast: "homepad-toast",
+          title: "homepad-toast__title",
+          description: "homepad-toast__description",
+          content: "homepad-toast__content",
+          icon: "homepad-toast__icon",
+          closeButton: "homepad-toast__close",
+          ...toastOptions?.classNames
+        },
+        ...toastOptions
+      },
+      ...props
+    }
+  );
+}
+function ToasterProvider() {
+  return /* @__PURE__ */ jsx(Toaster, {});
+}
+
+// src/web/mutation-toast.ts
+async function runMutationWithToast(action, messages, options) {
+  try {
+    await action();
+    toast.success(messages.success);
+    return { success: true };
+  } catch (error) {
+    const errorMessage = options?.getErrorMessage?.(error) ?? messages.error;
+    toast.error(errorMessage);
+    return { success: false, errorMessage };
+  }
+}
 function ConfirmModal({
   open,
   title,
@@ -30555,6 +30938,6 @@ react-dom/cjs/react-dom.development.js:
    *)
 */
 
-export { AppHeader, Badge, BellIcon, BuildingIcon, BuildingSelect, ConfirmModal, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, DataTable, Modal, Pagination, Sidebar, SidebarMobileHeader, SidebarNavItem, SidebarUserCard, StatusBadge, Table, TableActionButton, TableActionsCell, TableActionsMenu, TableBody, TableCell, TableHead, TableHeader, TableIconText, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, TableRow, TableRowStatusActions, TableScrollArea, TableSortIcon, TableStatusActionsCell, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };
+export { AppHeader, Badge, BellIcon, BuildingIcon, BuildingSelect, ConfirmModal, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, DataTable, Drawer, HistoryTimeline, Modal, Pagination, Sidebar, SidebarMobileHeader, SidebarNavItem, SidebarUserCard, StatusBadge, Table, TableActionButton, TableActionsCell, TableActionsMenu, TableBody, TableCell, TableHead, TableHeader, TableIconText, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, TableRow, TableRowStatusActions, TableScrollArea, TableSortIcon, TableStatusActionsCell, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map