@scripso-homepad/ui 0.4.10 → 0.4.11

package/dist/web/index.cjs

@@ -27567,7 +27567,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);
@@ -28423,7 +28423,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);
@@ -29219,7 +29219,7 @@ function BuildingSelect({
         ),
         children: [
           buildingIcon ?? /* @__PURE__ */ jsxRuntime.jsx(BuildingIcon, { className: "shrink-0 text-navy" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-slate-blue", children: displayLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate typography-14 font-medium text-slate-blue", children: displayLabel }),
           chevronIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.ChevronsUpDown,
             {
@@ -29267,7 +29267,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"
@@ -29320,7 +29320,7 @@ function AppHeader({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "truncate text-xl font-bold text-slate-blue", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "truncate typography-title text-slate-blue", children: title }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
           hasBuildingSelect ? /* @__PURE__ */ jsxRuntime.jsx(
             BuildingSelect,
@@ -29423,7 +29423,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
@@ -29460,15 +29460,15 @@ function SidebarUserCard({
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-bold text-white", children: user.fullName }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-xs text-storm-gray-100", children: user.email })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate typography-14 font-bold text-white", children: user.fullName }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate typography-12 text-storm-gray-100", children: user.email })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -30049,7 +30049,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,
@@ -30083,7 +30083,7 @@ function Pagination({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium leading-none text-storm-gray-200", children: mergedLabels.showing({ start, end, total }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-12 font-medium text-storm-gray-200", children: mergedLabels.showing({ start, end, total }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "nav",
           {
@@ -30170,8 +30170,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",
@@ -30349,7 +30349,7 @@ function TableActionsCell({ className, children, ...props }) {
 
 // src/web/components/TableActionsMenu.tsx
 var import_react_dom = __toESM(require_react_dom());
-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,
@@ -30508,7 +30508,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"
             ),
@@ -30739,7 +30739,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
       ),
@@ -30758,7 +30758,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: [
@@ -30769,6 +30769,9 @@ function TableIconText({ icon, children, className }) {
   );
 }
 
+// src/web/components/Modal.tsx
+var import_react_dom2 = __toESM(require_react_dom());
+
 // src/icons/arrowUpRightPath.ts
 var ARROW_UP_RIGHT_PATH = "M14.1667 14.1668V5.8335H5.83333M14.1667 5.8335L5.83333 14.1668";
 function ArrowUpRightIcon({
@@ -30979,6 +30982,7 @@ function Modal({
   cancelDisabled = false,
   confirmDisabled = false,
   closeOnBackdrop = true,
+  closeOnEscape = true,
   containerClassName,
   contentClassName,
   buttonClassName
@@ -30987,16 +30991,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;
   }
@@ -31005,11 +31012,15 @@ function Modal({
     footerLayout === "split" && "min-w-0 flex-1 basis-0",
     footerLayout !== "split" && buttonClassName
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const modal = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
         "div",
@@ -31019,14 +31030,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__ */ jsxRuntime.jsxs("header", { className: cn("flex", icon ? "items-center gap-2.5" : void 0), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn("flex shrink-0", icon ? "items-center gap-2.5" : void 0), children: [
               icon ? /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -31042,7 +31053,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
                   }
                 ),
@@ -31050,13 +31061,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__ */ jsxRuntime.jsx("div", { className: cn("min-w-0", contentClassName), children }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("min-h-0 min-w-0 flex-1 overflow-y-auto", contentClassName), children }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               "footer",
               {
@@ -31095,6 +31106,7 @@ function Modal({
       )
     }
   );
+  return typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(modal, document.body) : modal;
 }
 var DRAWER_TRANSITION_MS = 300;
 function Drawer({
@@ -31198,7 +31210,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
                         }
                       ),
@@ -31206,7 +31218,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
@@ -31282,8 +31294,8 @@ function HistoryTimeline({ events }) {
         ) : null
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2 pt-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-sans text-sm font-medium leading-[19px] tracking-normal text-slate-blue", children: event.title }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-sans text-xs font-normal leading-4 tracking-normal text-storm-gray-300", children: event.timestamp })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-14 font-medium tracking-normal text-slate-blue", children: event.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-caption tracking-normal text-storm-gray-300", children: event.timestamp })
       ] })
     ] }, event.id);
   }) });
@@ -31534,7 +31546,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
                 }
               ),
@@ -31542,7 +31554,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
                 }
               )