@scripso-homepad/ui 0.4.35 → 0.4.37

package/dist/web/index.cjs

@@ -5382,7 +5382,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 X3 = null;
+    var X2 = null;
     var Xj = false;
     function Yj(a, b, c) {
       for (c = c.child; null !== c; ) Zj(a, b, c), c = c.sibling;
@@ -5396,23 +5396,23 @@ var require_react_dom_production_min = __commonJS({
         case 5:
           U || Lj(c, b);
         case 6:
-          var d = X3, e = Xj;
-          X3 = null;
+          var d = X2, e = Xj;
+          X2 = null;
           Yj(a, b, c);
-          X3 = d;
+          X2 = d;
           Xj = e;
-          null !== X3 && (Xj ? (a = X3, c = c.stateNode, 8 === a.nodeType ? a.parentNode.removeChild(c) : a.removeChild(c)) : X3.removeChild(c.stateNode));
+          null !== X2 && (Xj ? (a = X2, c = c.stateNode, 8 === a.nodeType ? a.parentNode.removeChild(c) : a.removeChild(c)) : X2.removeChild(c.stateNode));
           break;
         case 18:
-          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));
+          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));
           break;
         case 4:
-          d = X3;
+          d = X2;
           e = Xj;
-          X3 = c.stateNode.containerInfo;
+          X2 = c.stateNode.containerInfo;
           Xj = true;
           Yj(a, b, c);
-          X3 = d;
+          X2 = d;
           Xj = e;
           break;
         case 0:
@@ -5469,23 +5469,23 @@ var require_react_dom_production_min = __commonJS({
           a: for (; null !== h; ) {
             switch (h.tag) {
               case 5:
-                X3 = h.stateNode;
+                X2 = h.stateNode;
                 Xj = false;
                 break a;
               case 3:
-                X3 = h.stateNode.containerInfo;
+                X2 = h.stateNode.containerInfo;
                 Xj = true;
                 break a;
               case 4:
-                X3 = h.stateNode.containerInfo;
+                X2 = h.stateNode.containerInfo;
                 Xj = true;
                 break a;
             }
             h = h.return;
           }
-          if (null === X3) throw Error(p(160));
+          if (null === X2) throw Error(p(160));
           Zj(f, g, e);
-          X3 = null;
+          X2 = null;
           Xj = false;
           var k = e.alternate;
           null !== k && (k.return = null);
@@ -29500,6 +29500,62 @@ function AppHeader({
     }
   );
 }
+function SidebarCollapseIcon({
+  className,
+  size = 20,
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12.5 2.5V17.5M8.33333 12.5L5.83333 10L8.33333 7.5M4.16667 2.5H15.8333C16.7538 2.5 17.5 3.24619 17.5 4.16667V15.8333C17.5 16.7538 16.7538 17.5 15.8333 17.5H4.16667C3.24619 17.5 2.5 16.7538 2.5 15.8333V4.16667C2.5 3.24619 3.24619 2.5 4.16667 2.5Z",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function SidebarExpandIcon({
+  className,
+  size = 20,
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12.5 2.5V17.5M6.66667 7.5L9.16667 10L6.66667 12.5M4.16667 2.5H15.8333C16.7538 2.5 17.5 3.24619 17.5 4.16667V15.8333C17.5 16.7538 16.7538 17.5 15.8333 17.5H4.16667C3.24619 17.5 2.5 16.7538 2.5 15.8333V4.16667C2.5 3.24619 3.24619 2.5 4.16667 2.5Z",
+          stroke: "currentColor",
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
 function useMediaQuery(query) {
   const [matches, setMatches] = react.useState(() => {
     if (typeof window === "undefined") {
@@ -29726,6 +29782,7 @@ function Sidebar({
   className,
   mobileOpen,
   onMobileClose,
+  onMobileOpen,
   onNavItemClick,
   collapseIcon,
   expandIcon,
@@ -29734,12 +29791,14 @@ function Sidebar({
   collapsed,
   onCollapsedChange
 }) {
-  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  const isRailLayout = useMediaQuery("(min-width: 768px)");
   const [internalCollapsed, setInternalCollapsed] = react.useState(
     () => readInitialCollapsedState(sidebarStorageKey, initialCollapsed)
   );
   const isCollapsed = collapsed ?? internalCollapsed;
-  const isExpanded = isDesktop ? !isCollapsed : true;
+  const isExpanded = isDesktop ? !isCollapsed : mobileOpen;
+  const showCollapsedRail = isRailLayout && !isDesktop;
   const setCollapsed = react.useCallback(
     (next) => {
       if (collapsed === void 0) {
@@ -29758,8 +29817,12 @@ function Sidebar({
       toggleCollapsed();
       return;
     }
-    onMobileClose?.();
-  }, [isDesktop, onMobileClose, toggleCollapsed]);
+    if (mobileOpen) {
+      onMobileClose?.();
+      return;
+    }
+    onMobileOpen?.();
+  }, [isDesktop, mobileOpen, onMobileClose, onMobileOpen, toggleCollapsed]);
   const handleNavItemNavigate = react.useCallback(
     (item) => {
       onNavItemClick?.(item);
@@ -29799,23 +29862,26 @@ function Sidebar({
         "aria-label": labels.closeMenu,
         onClick: onMobileClose,
         className: cn(
-          "fixed inset-0 z-40 bg-navy-800/60 backdrop-blur-[1px] transition-opacity duration-300 ease-in-out md:hidden",
+          "fixed inset-0 z-40 bg-navy-800/60 backdrop-blur-[1px] transition-opacity duration-300 ease-in-out lg:hidden",
           mobileOpen ? "opacity-100" : "pointer-events-none opacity-0"
         )
       }
     ),
+    showCollapsedRail && mobileOpen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-screen w-[76px] shrink-0", "aria-hidden": true }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
       "aside",
       {
         className: cn(
           "fixed inset-y-0 left-0 z-50 flex h-screen w-[min(300px,85vw)] flex-col gap-8 overflow-hidden bg-navy p-4 shadow-xl",
           "transition-[transform,width,padding,gap] duration-300 ease-in-out will-change-[transform,width]",
-          mobileOpen ? "translate-x-0" : "-translate-x-full",
-          "md:relative md:z-auto md:w-[300px] md:translate-x-0 md:shadow-none",
-          isExpanded ? "md:w-[300px]" : "md:w-[76px] md:items-center md:gap-2 md:px-3 md:py-4",
+          mobileOpen ? "translate-x-0" : "-translate-x-full pointer-events-none",
+          "md:relative md:z-auto md:w-[76px] md:translate-x-0 md:pointer-events-auto md:shadow-none md:items-center md:gap-2 md:px-3 md:py-4",
+          mobileOpen && "md:fixed md:z-50 md:w-[min(300px,85vw)] md:items-stretch md:gap-8 md:p-4 md:shadow-xl",
+          "lg:relative lg:z-auto lg:translate-x-0 lg:pointer-events-auto lg:shadow-none",
+          isExpanded ? "lg:w-[300px] lg:items-stretch lg:gap-8 lg:p-4" : "lg:w-[76px] lg:items-center lg:gap-2 lg:px-3 lg:py-4",
           className
         ),
-        "aria-hidden": !isDesktop && !mobileOpen,
+        "aria-hidden": !isDesktop && !mobileOpen && !showCollapsedRail,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
@@ -29847,8 +29913,8 @@ function Sidebar({
                     type: "button",
                     onClick: handleHeaderAction,
                     className: "shrink-0 cursor-pointer text-white transition-[opacity,transform] duration-200 hover:opacity-80 active:scale-95",
-                    "aria-label": isDesktop ? isExpanded ? labels.collapse : labels.expand : labels.closeMenu,
-                    children: isDesktop ? isExpanded ? collapseIcon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { size: 20, strokeWidth: 1.75 }) : expandIcon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftOpen, { size: 20, strokeWidth: 1.75 }) : closeIcon ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20, strokeWidth: 1.75 })
+                    "aria-label": isExpanded ? isDesktop ? labels.collapse : labels.closeMenu : labels.expand,
+                    children: isExpanded ? collapseIcon ?? closeIcon ?? /* @__PURE__ */ jsxRuntime.jsx(SidebarCollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsxRuntime.jsx(SidebarExpandIcon, {})
                   }
                 )
               ]
@@ -29897,7 +29963,8 @@ function SidebarMobileHeader({
   openMenuLabel,
   onOpenMenu,
   menuOpen = false,
-  className
+  className,
+  end
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "header",
@@ -29915,16 +29982,17 @@ function SidebarMobileHeader({
             className: "flex size-10 items-center justify-center rounded-xl text-navy transition-colors hover:bg-storm-gray-50",
             "aria-label": openMenuLabel,
             "aria-expanded": menuOpen,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { size: 22, strokeWidth: 1.75 })
+            children: /* @__PURE__ */ jsxRuntime.jsx(SidebarExpandIcon, { size: 22 })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("img", { src: branding.logoIconSrc, alt: "", className: "h-[30px] w-[42px] shrink-0" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 leading-none", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-base font-bold tracking-tight text-navy", children: branding.logoTitle }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[6.5px] font-normal tracking-[-0.26px] text-navy-300 uppercase", children: branding.logoTagline })
           ] })
-        ] })
+        ] }),
+        end ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: end }) : null
       ]
     }
   );
@@ -29937,12 +30005,12 @@ function DashboardLayout({
   className,
   mainClassName
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-screen overflow-hidden flex-row bg-storm-gray-0", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-screen shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { ...sidebar }) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-screen min-w-0 overflow-hidden flex-row bg-storm-gray-0", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-md:contents md:h-screen md:shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { ...sidebar }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-screen min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: [
       /* @__PURE__ */ jsxRuntime.jsx(SidebarMobileHeader, { ...mobileHeader }),
       /* @__PURE__ */ jsxRuntime.jsx(AppHeader, { ...header }),
-      /* @__PURE__ */ jsxRuntime.jsx("main", { className: mainClassName ?? "min-h-0 flex-1 overflow-y-auto p-4 md:p-6", children })
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: mainClassName ?? "min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto p-4 xl:p-6", children })
     ] })
   ] });
 }
@@ -30278,21 +30346,22 @@ function Pagination({
   const visiblePages = getVisiblePageNumbers(safePage, totalPages, maxPageButtons);
   const canGoPrevious = safePage > 1;
   const canGoNext = safePage < totalPages;
-  if (hideOnSinglePage && totalPages <= 1) {
+  const showPageControls = totalPages > 1;
+  if (hideOnSinglePage && !showPageControls) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "flex flex-col gap-4 px-4 pb-4 pt-4 font-[family-name:var(--font-sans)] sm:flex-row sm:items-center sm:justify-between",
+        "flex flex-col items-center gap-4 px-4 pb-4 pt-4 text-center font-[family-name:var(--font-sans)] sm:flex-row sm:items-center sm:justify-between sm:text-left",
         variant === "standalone" && cn("rounded-xl border bg-storm-gray-0", "border-storm-gray-50"),
         dataTableClassNames.pagination,
         className
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typography-12 font-medium text-storm-gray-200", children: mergedLabels.showing({ start, end, total }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        showPageControls ? /* @__PURE__ */ jsxRuntime.jsxs(
           "nav",
           {
             "aria-label": "Pagination",
@@ -30360,7 +30429,7 @@ function Pagination({
               )
             ]
           }
-        )
+        ) : null
       ]
     }
   );
@@ -30802,7 +30871,7 @@ function TableScrollArea({
     "div",
     {
       className: cn(
-        "table-scroll-area w-full overflow-auto",
+        "table-scroll-area w-full min-w-0 max-w-full overflow-auto",
         fillHeight && "min-h-0 flex-1",
         className
       ),
@@ -30856,7 +30925,7 @@ function DataTable({
     }),
     [className, classNames, footerClassName, scrollClassName, tableClassName]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(DataTableClassNamesContext.Provider, { value: mergedClassNames, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col", fillHeight && "min-h-0 flex-1", mergedClassNames.root), children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(DataTableClassNamesContext.Provider, { value: mergedClassNames, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-w-0 flex-col", fillHeight && "min-h-0 flex-1", mergedClassNames.root), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -30884,6 +30953,7 @@ function DataTable({
       "div",
       {
         className: cn(
+          "shrink-0",
           tableFooterShellClassName,
           tableBorderClassName,
           mergedClassNames.footer
@@ -31036,7 +31106,7 @@ function Button({
   const customIcon = icon != null && typeof icon !== "boolean" ? icon : void 0;
   const hasIcon = showIcon || icon === true || customIcon != null;
   const resolvedContainerClassName = [
-    reactNative.Platform.OS === "web" ? "max-md:px-4!" : "",
+    reactNative.Platform.OS === "web" ? hasIcon ? "max-md:pl-4! pr-2!" : "max-md:px-4!" : "",
     className
   ].filter(Boolean).join(" ");
   useApplyWebClassName(containerRef, resolvedContainerClassName || void 0);
@@ -31389,7 +31459,7 @@ function Drawer({
             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",
+              "absolute inset-0 z-0 cursor-pointer bg-storm-gray-850/40 backdrop-blur-[12px] transition-opacity duration-300 ease-in-out",
               isAnimatedIn ? "opacity-100" : "opacity-0"
             ),
             onClick: onClose
@@ -31403,7 +31473,7 @@ function Drawer({
             "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 max-md:h-dvh max-md:rounded-none",
+              "relative z-10 flex h-[calc(100dvh-16px)] min-h-0 cursor-auto flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out max-md:h-dvh max-md:rounded-none",
               // Keep GPU transform only while animating — settled translate-x-0 blurs text.
               !isTransformSettled && "will-change-transform",
               isAnimatedIn ? isTransformSettled ? "transform-none" : "translate-x-0" : "translate-x-full",
@@ -31899,6 +31969,8 @@ exports.HistoryTimeline = HistoryTimeline;
 exports.Modal = Modal;
 exports.Pagination = Pagination;
 exports.Sidebar = Sidebar;
+exports.SidebarCollapseIcon = SidebarCollapseIcon;
+exports.SidebarExpandIcon = SidebarExpandIcon;
 exports.SidebarMobileHeader = SidebarMobileHeader;
 exports.SidebarNavItem = SidebarNavItem;
 exports.SidebarUserCard = SidebarUserCard;