@scripso-homepad/ui 0.4.10 → 0.4.11

package/dist/web/index.d.cts

@@ -427,11 +427,12 @@ type ModalProps = {
     cancelDisabled?: boolean;
     confirmDisabled?: boolean;
     closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
     containerClassName?: string;
     contentClassName?: string;
     buttonClassName?: string;
 };
-declare function Modal({ open, title, subtitle, icon, iconContainerClassName, children, cancelText, confirmText, onCancel, onConfirm, footerAlign, footerLayout, cancelDisabled, confirmDisabled, closeOnBackdrop, containerClassName, contentClassName, buttonClassName, }: ModalProps): react.JSX.Element | null;
+declare function Modal({ open, title, subtitle, icon, iconContainerClassName, children, cancelText, confirmText, onCancel, onConfirm, footerAlign, footerLayout, cancelDisabled, confirmDisabled, closeOnBackdrop, closeOnEscape, containerClassName, contentClassName, buttonClassName, }: ModalProps): react.JSX.Element | null;
 
 type DrawerProps = {
     open: boolean;

package/dist/web/index.d.ts

@@ -427,11 +427,12 @@ type ModalProps = {
     cancelDisabled?: boolean;
     confirmDisabled?: boolean;
     closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
     containerClassName?: string;
     contentClassName?: string;
     buttonClassName?: string;
 };
-declare function Modal({ open, title, subtitle, icon, iconContainerClassName, children, cancelText, confirmText, onCancel, onConfirm, footerAlign, footerLayout, cancelDisabled, confirmDisabled, closeOnBackdrop, containerClassName, contentClassName, buttonClassName, }: ModalProps): react.JSX.Element | null;
+declare function Modal({ open, title, subtitle, icon, iconContainerClassName, children, cancelText, confirmText, onCancel, onConfirm, footerAlign, footerLayout, cancelDisabled, confirmDisabled, closeOnBackdrop, closeOnEscape, containerClassName, contentClassName, buttonClassName, }: ModalProps): react.JSX.Element | null;
 
 type DrawerProps = {
     open: boolean;

package/dist/web/index.js

@@ -27529,7 +27529,7 @@ var require_react_dom_development = __commonJS({
           return root2;
         }
         var ReactVersion = "18.3.1";
-        function createPortal2(children, containerInfo, implementation) {
+        function createPortal3(children, containerInfo, implementation) {
           var key = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null;
           {
             checkKeyStringCoercion(key);
@@ -28385,7 +28385,7 @@ var require_react_dom_development = __commonJS({
           if (!isValidContainer(container)) {
             throw new Error("Target container is not a DOM element.");
           }
-          return createPortal2(children, container, null, key);
+          return createPortal3(children, container, null, key);
         }
         function renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
           return unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback);
@@ -28708,7 +28708,7 @@ function BuildingSelect({
         ),
         children: [
           buildingIcon ?? /* @__PURE__ */ jsx(BuildingIcon, { className: "shrink-0 text-navy" }),
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-slate-blue", children: displayLabel }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate typography-14 font-medium text-slate-blue", children: displayLabel }),
           chevronIcon ?? /* @__PURE__ */ jsx(
             ChevronsUpDown,
             {
@@ -28756,7 +28756,7 @@ function BuildingSelect({
               },
               onClick: () => selectOption(option),
               className: cn(
-                "flex w-full rounded-lg px-3 py-2.5 text-left text-sm font-medium text-slate-blue transition-colors",
+                "flex w-full rounded-lg px-3 py-2.5 text-left typography-14 font-medium text-slate-blue transition-colors",
                 !option.disabled && "cursor-pointer hover:bg-storm-gray-50",
                 (isSelected || isHighlighted) && !option.disabled && "bg-storm-gray-50",
                 option.disabled && "cursor-not-allowed opacity-50"
@@ -28809,7 +28809,7 @@ function AppHeader({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("h1", { className: "truncate text-xl font-bold text-slate-blue", children: title }),
+        /* @__PURE__ */ jsx("h1", { className: "truncate typography-title text-slate-blue", children: title }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
           hasBuildingSelect ? /* @__PURE__ */ jsx(
             BuildingSelect,
@@ -28912,7 +28912,7 @@ function SidebarNavItem({ item, isOpen, onNavigate }) {
           "span",
           {
             className: cn(
-              "overflow-hidden text-sm font-semibold whitespace-nowrap transition-[max-width,opacity] duration-300 ease-in-out",
+              "overflow-hidden typography-14 font-semibold whitespace-nowrap transition-[max-width,opacity] duration-300 ease-in-out",
               isOpen ? "max-w-[180px] opacity-100" : "max-w-0 opacity-0"
             ),
             children: item.label
@@ -28949,15 +28949,15 @@ function SidebarUserCard({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5 text-sm font-bold text-white",
+            className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5 typography-14 font-bold text-white",
             "aria-hidden": true,
             children: initials
           }
         ),
         isOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
-            /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-bold text-white", children: user.fullName }),
-            /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-storm-gray-100", children: user.email })
+            /* @__PURE__ */ jsx("p", { className: "truncate typography-14 font-bold text-white", children: user.fullName }),
+            /* @__PURE__ */ jsx("p", { className: "truncate typography-12 text-storm-gray-100", children: user.email })
           ] }),
           /* @__PURE__ */ jsx(
             "button",
@@ -29538,7 +29538,7 @@ var defaultLabels = {
   page: (pageNumber) => `Page ${pageNumber}`,
   showing: ({ start, end, total }) => `Showing ${start}-${end} of ${total}`
 };
-var paginationControlClassName = "inline-flex size-7 items-center justify-center rounded-lg border border-storm-gray-50 p-1 text-xs font-medium leading-none text-storm-gray-500 transition-colors";
+var paginationControlClassName = "inline-flex size-7 items-center justify-center rounded-lg border border-storm-gray-50 p-1 typography-12 font-medium text-storm-gray-500 transition-colors";
 var paginationHoverClassName = "cursor-pointer hover:bg-storm-gray-0";
 function Pagination({
   page,
@@ -29572,7 +29572,7 @@ function Pagination({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("p", { className: "text-xs font-medium leading-none text-storm-gray-200", children: mergedLabels.showing({ start, end, total }) }),
+        /* @__PURE__ */ jsx("p", { className: "typography-12 font-medium text-storm-gray-200", children: mergedLabels.showing({ start, end, total }) }),
         /* @__PURE__ */ jsxs(
           "nav",
           {
@@ -29659,8 +29659,8 @@ var tableCellPaddingClassName = "px-3 py-3";
 var tableHeadPaddingClassName = "px-3 py-4";
 var tableShellClassName = "flex flex-col overflow-hidden border bg-storm-gray-0";
 var tableFooterShellClassName = "overflow-hidden rounded-b-xl border bg-storm-gray-0";
-var tableHeaderClassName = "bg-storm-gray-0 font-sans text-xs font-normal leading-none tracking-normal text-storm-gray-400";
-var tableBodyClassName = "bg-white font-sans text-sm font-medium leading-none tracking-normal text-storm-gray-900";
+var tableHeaderClassName = "bg-storm-gray-0 typography-12 font-normal tracking-normal text-storm-gray-400";
+var tableBodyClassName = "bg-white typography-14 font-medium tracking-normal text-storm-gray-900";
 var tableAlignClasses = {
   left: "",
   right: "text-right",
@@ -29838,7 +29838,7 @@ function TableActionsCell({ className, children, ...props }) {
 
 // src/web/components/TableActionsMenu.tsx
 var import_react_dom = __toESM(require_react_dom(), 1);
-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 inlineActionClassName = "inline-flex cursor-pointer items-center gap-1 rounded-lg border border-storm-gray-50 bg-white px-3 py-2 typography-12 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0";
 var variantClasses = {
   approve: inlineActionClassName,
   reject: inlineActionClassName,
@@ -29997,7 +29997,7 @@ function TableActionsMenu({
               item.onSelect();
             },
             className: cn(
-              "flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left font-sans text-sm font-medium leading-none text-storm-gray-900 transition-colors hover:bg-storm-gray-0",
+              "flex h-[51px] w-full cursor-pointer items-center gap-2.5 px-3 text-left typography-14 font-medium text-storm-gray-900 transition-colors hover:bg-storm-gray-0",
               index > 0 && "border-t border-storm-gray-50",
               item.disabled && "cursor-not-allowed opacity-50"
             ),
@@ -30228,7 +30228,7 @@ function Badge({ children, variant = "neutral", icon, className }) {
     "span",
     {
       className: cn(
-        "inline-flex items-center gap-2 rounded-[28px] px-3 py-1.5 font-sans text-xs font-semibold leading-none whitespace-nowrap",
+        "inline-flex items-center gap-2 rounded-[28px] px-3 py-1.5 typography-12 font-semibold whitespace-nowrap",
         badgeVariantClasses[variant],
         className
       ),
@@ -30247,7 +30247,7 @@ function TableIconText({ icon, children, className }) {
     "span",
     {
       className: cn(
-        "inline-flex items-center gap-2 font-sans text-sm font-medium leading-none tracking-normal text-storm-gray-900",
+        "inline-flex items-center gap-2 typography-14 font-medium tracking-normal text-storm-gray-900",
         className
       ),
       children: [
@@ -30257,6 +30257,9 @@ function TableIconText({ icon, children, className }) {
     }
   );
 }
+
+// src/web/components/Modal.tsx
+var import_react_dom2 = __toESM(require_react_dom(), 1);
 var footerAlignClasses = {
   left: "justify-start",
   center: "justify-center",
@@ -30278,6 +30281,7 @@ function Modal({
   cancelDisabled = false,
   confirmDisabled = false,
   closeOnBackdrop = true,
+  closeOnEscape = true,
   containerClassName,
   contentClassName,
   buttonClassName
@@ -30286,16 +30290,19 @@ function Modal({
     if (!open) {
       return;
     }
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
     const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
+      if (event.key === "Escape" && closeOnEscape) {
         onCancel();
       }
     };
     window.addEventListener("keydown", handleKeyDown);
     return () => {
+      document.body.style.overflow = previousOverflow;
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [open, onCancel]);
+  }, [open, onCancel, closeOnEscape]);
   if (!open) {
     return null;
   }
@@ -30304,11 +30311,15 @@ function Modal({
     footerLayout === "split" && "min-w-0 flex-1 basis-0",
     footerLayout !== "split" && buttonClassName
   );
-  return /* @__PURE__ */ jsx(
+  const modal = /* @__PURE__ */ jsx(
     "div",
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40",
-      onClick: closeOnBackdrop ? onCancel : void 0,
+      className: "fixed inset-0 z-[100] flex items-center justify-center p-4 backdrop-blur-[12px] bg-storm-gray-850/40",
+      onClick: closeOnBackdrop ? (event) => {
+        if (event.target === event.currentTarget) {
+          onCancel();
+        }
+      } : void 0,
       role: "presentation",
       children: /* @__PURE__ */ jsxs(
         "div",
@@ -30318,14 +30329,14 @@ function Modal({
           "aria-labelledby": "homepad-modal-title",
           ...subtitle ? { "aria-describedby": "homepad-modal-subtitle" } : {},
           className: cn(
-            "flex w-full max-w-2xl flex-col gap-6 rounded-2xl bg-white p-4 opacity-100 md:p-6",
+            "flex max-h-[min(90dvh,calc(100dvh-2rem))] w-full max-w-2xl flex-col gap-6 rounded-2xl bg-white p-4 opacity-100 md:p-6",
             containerClassName
           ),
           onClick: (event) => {
             event.stopPropagation();
           },
           children: [
-            /* @__PURE__ */ jsxs("header", { className: cn("flex", icon ? "items-center gap-2.5" : void 0), children: [
+            /* @__PURE__ */ jsxs("header", { className: cn("flex shrink-0", icon ? "items-center gap-2.5" : void 0), children: [
               icon ? /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -30341,7 +30352,7 @@ function Modal({
                   "h2",
                   {
                     id: "homepad-modal-title",
-                    className: "font-sans text-lg font-bold leading-6 tracking-normal text-black",
+                    className: "typography-title-sm tracking-normal text-black",
                     children: title
                   }
                 ),
@@ -30349,13 +30360,13 @@ function Modal({
                   "p",
                   {
                     id: "homepad-modal-subtitle",
-                    className: "font-sans text-xs font-normal leading-4 tracking-normal text-storm-gray-400",
+                    className: "typography-caption tracking-normal text-storm-gray-400",
                     children: subtitle
                   }
                 ) : null
               ] })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: cn("min-w-0", contentClassName), children }),
+            /* @__PURE__ */ jsx("div", { className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto", contentClassName), children }),
             /* @__PURE__ */ jsxs(
               "footer",
               {
@@ -30394,6 +30405,7 @@ function Modal({
       )
     }
   );
+  return typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(modal, document.body) : modal;
 }
 var DRAWER_TRANSITION_MS = 300;
 function Drawer({
@@ -30497,7 +30509,7 @@ function Drawer({
                         "h2",
                         {
                           id: "homepad-drawer-title",
-                          className: "font-sans text-[18px] font-bold leading-6 tracking-normal text-black",
+                          className: "typography-title-sm tracking-normal text-black",
                           children: title
                         }
                       ),
@@ -30505,7 +30517,7 @@ function Drawer({
                         "p",
                         {
                           id: "homepad-drawer-subtitle",
-                          className: "font-sans text-sm font-normal leading-[19px] tracking-normal text-storm-gray-400",
+                          className: "typography-body tracking-normal text-storm-gray-400",
                           children: subtitle
                         }
                       ) : null
@@ -30581,8 +30593,8 @@ function HistoryTimeline({ events }) {
         ) : 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 })
+        /* @__PURE__ */ jsx("p", { className: "typography-14 font-medium tracking-normal text-slate-blue", children: event.title }),
+        /* @__PURE__ */ jsx("p", { className: "typography-caption tracking-normal text-storm-gray-300", children: event.timestamp })
       ] })
     ] }, event.id);
   }) });
@@ -30833,7 +30845,7 @@ function ConfirmModal({
                 "h2",
                 {
                   id: "homepad-confirm-modal-title",
-                  className: "font-sans text-xl font-bold leading-6.75 tracking-normal text-black",
+                  className: "typography-title tracking-normal text-black",
                   children: title
                 }
               ),
@@ -30841,7 +30853,7 @@ function ConfirmModal({
                 "div",
                 {
                   id: "homepad-confirm-modal-description",
-                  className: "text-center font-sans text-sm font-normal leading-4.75 tracking-normal text-storm-gray-400",
+                  className: "text-center typography-body tracking-normal text-storm-gray-400",
                   children: description
                 }
               )