@scripso-homepad/ui 0.4.36 → 0.4.38

package/dist/web/index.d.cts

@@ -103,6 +103,7 @@ type SidebarProps = {
     className?: string;
     mobileOpen: boolean;
     onMobileClose?: () => void;
+    onMobileOpen?: () => void;
     /**
      * Host-owned navigation. Call `navigate(item.to)` from the app router here.
      * The sidebar never imports react-router, so this must perform the route change.
@@ -115,7 +116,7 @@ type SidebarProps = {
     collapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
 };
-declare function Sidebar({ navItems, footerNavItems, branding, labels, sidebarStorageKey, pathname, user, onLogout, className, mobileOpen, onMobileClose, onNavItemClick, collapseIcon, expandIcon, closeIcon, initialCollapsed, collapsed, onCollapsedChange, }: SidebarProps): react.JSX.Element;
+declare function Sidebar({ navItems, footerNavItems, branding, labels, sidebarStorageKey, pathname, user, onLogout, className, mobileOpen, onMobileClose, onMobileOpen, onNavItemClick, collapseIcon, expandIcon, closeIcon, initialCollapsed, collapsed, onCollapsedChange, }: SidebarProps): react.JSX.Element;
 
 type SidebarMobileHeaderProps = {
     branding: Pick<AdminSidebarBranding, 'logoIconSrc' | 'logoTitle' | 'logoTagline'>;
@@ -123,8 +124,10 @@ type SidebarMobileHeaderProps = {
     onOpenMenu: () => void;
     menuOpen?: boolean;
     className?: string;
+    /** Rendered on the right side of the mobile header (e.g. notifications). */
+    end?: ReactNode;
 };
-declare function SidebarMobileHeader({ branding, openMenuLabel, onOpenMenu, menuOpen, className, }: SidebarMobileHeaderProps): react.JSX.Element;
+declare function SidebarMobileHeader({ branding, openMenuLabel, onOpenMenu, menuOpen, className, end, }: SidebarMobileHeaderProps): react.JSX.Element;
 
 type DashboardLayoutProps = {
     sidebar: SidebarProps;
@@ -268,6 +271,7 @@ type PaginationProps = {
      */
     variant?: PaginationVariant;
     className?: string;
+    /** Hide the entire bar when there is only one page. Page buttons are always hidden in that case. */
     hideOnSinglePage?: boolean;
 };
 declare function Pagination({ page, pageSize, total, onPageChange, labels, maxPageButtons, variant, className, hideOnSinglePage, }: PaginationProps): react.JSX.Element | null;

package/dist/web/index.d.ts

@@ -103,6 +103,7 @@ type SidebarProps = {
     className?: string;
     mobileOpen: boolean;
     onMobileClose?: () => void;
+    onMobileOpen?: () => void;
     /**
      * Host-owned navigation. Call `navigate(item.to)` from the app router here.
      * The sidebar never imports react-router, so this must perform the route change.
@@ -115,7 +116,7 @@ type SidebarProps = {
     collapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
 };
-declare function Sidebar({ navItems, footerNavItems, branding, labels, sidebarStorageKey, pathname, user, onLogout, className, mobileOpen, onMobileClose, onNavItemClick, collapseIcon, expandIcon, closeIcon, initialCollapsed, collapsed, onCollapsedChange, }: SidebarProps): react.JSX.Element;
+declare function Sidebar({ navItems, footerNavItems, branding, labels, sidebarStorageKey, pathname, user, onLogout, className, mobileOpen, onMobileClose, onMobileOpen, onNavItemClick, collapseIcon, expandIcon, closeIcon, initialCollapsed, collapsed, onCollapsedChange, }: SidebarProps): react.JSX.Element;
 
 type SidebarMobileHeaderProps = {
     branding: Pick<AdminSidebarBranding, 'logoIconSrc' | 'logoTitle' | 'logoTagline'>;
@@ -123,8 +124,10 @@ type SidebarMobileHeaderProps = {
     onOpenMenu: () => void;
     menuOpen?: boolean;
     className?: string;
+    /** Rendered on the right side of the mobile header (e.g. notifications). */
+    end?: ReactNode;
 };
-declare function SidebarMobileHeader({ branding, openMenuLabel, onOpenMenu, menuOpen, className, }: SidebarMobileHeaderProps): react.JSX.Element;
+declare function SidebarMobileHeader({ branding, openMenuLabel, onOpenMenu, menuOpen, className, end, }: SidebarMobileHeaderProps): react.JSX.Element;
 
 type DashboardLayoutProps = {
     sidebar: SidebarProps;
@@ -268,6 +271,7 @@ type PaginationProps = {
      */
     variant?: PaginationVariant;
     className?: string;
+    /** Hide the entire bar when there is only one page. Page buttons are always hidden in that case. */
     hideOnSinglePage?: boolean;
 };
 declare function Pagination({ page, pageSize, total, onPageChange, labels, maxPageButtons, variant, className, hideOnSinglePage, }: PaginationProps): react.JSX.Element | null;

package/dist/web/index.js

@@ -1,5 +1,5 @@
-import { __commonJS, __require, __toESM, Input, Button } from '../chunk-AOBKWDGW.js';
-import { ChevronsUpDown, Search, LogOut, X, Menu, ChevronLeft, ChevronRight } from 'lucide-react';
+import { __commonJS, __require, __toESM, Input, Button } from '../chunk-4FBZM62E.js';
+import { ChevronsUpDown, Search, LogOut, ChevronLeft, ChevronRight, X } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -5344,7 +5344,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;
@@ -5358,23 +5358,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:
@@ -5431,23 +5431,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);
@@ -29169,6 +29169,7 @@ function Sidebar({
   className,
   mobileOpen,
   onMobileClose,
+  onMobileOpen,
   onNavItemClick,
   collapseIcon,
   expandIcon,
@@ -29177,12 +29178,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] = useState(
     () => readInitialCollapsedState(sidebarStorageKey, initialCollapsed)
   );
   const isCollapsed = collapsed ?? internalCollapsed;
-  const isExpanded = isDesktop ? !isCollapsed : true;
+  const isExpanded = isDesktop ? !isCollapsed : mobileOpen;
+  const showCollapsedRail = isRailLayout && !isDesktop;
   const setCollapsed = useCallback(
     (next) => {
       if (collapsed === void 0) {
@@ -29201,8 +29204,12 @@ function Sidebar({
       toggleCollapsed();
       return;
     }
-    onMobileClose?.();
-  }, [isDesktop, onMobileClose, toggleCollapsed]);
+    if (mobileOpen) {
+      onMobileClose?.();
+      return;
+    }
+    onMobileOpen?.();
+  }, [isDesktop, mobileOpen, onMobileClose, onMobileOpen, toggleCollapsed]);
   const handleNavItemNavigate = useCallback(
     (item) => {
       onNavItemClick?.(item);
@@ -29242,23 +29249,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__ */ jsx("div", { className: "h-screen w-[76px] shrink-0", "aria-hidden": true }) : null,
     /* @__PURE__ */ 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__ */ jsxs(
             "div",
@@ -29290,8 +29300,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__ */ jsx(SidebarCollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsx(SidebarExpandIcon, {}) : closeIcon ?? /* @__PURE__ */ jsx(X, { size: 20, strokeWidth: 1.75 })
+                    "aria-label": isExpanded ? isDesktop ? labels.collapse : labels.closeMenu : labels.expand,
+                    children: isExpanded ? collapseIcon ?? closeIcon ?? /* @__PURE__ */ jsx(SidebarCollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsx(SidebarExpandIcon, {})
                   }
                 )
               ]
@@ -29340,7 +29350,8 @@ function SidebarMobileHeader({
   openMenuLabel,
   onOpenMenu,
   menuOpen = false,
-  className
+  className,
+  end
 }) {
   return /* @__PURE__ */ jsxs(
     "header",
@@ -29358,16 +29369,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__ */ jsx(Menu, { size: 22, strokeWidth: 1.75 })
+            children: /* @__PURE__ */ jsx(SidebarExpandIcon, { size: 22 })
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
           /* @__PURE__ */ jsx("img", { src: branding.logoIconSrc, alt: "", className: "h-[30px] w-[42px] shrink-0" }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 leading-none", children: [
             /* @__PURE__ */ jsx("p", { className: "truncate text-base font-bold tracking-tight text-navy", children: branding.logoTitle }),
             /* @__PURE__ */ jsx("p", { className: "truncate text-[6.5px] font-normal tracking-[-0.26px] text-navy-300 uppercase", children: branding.logoTagline })
           ] })
-        ] })
+        ] }),
+        end ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: end }) : null
       ]
     }
   );
@@ -29380,12 +29392,12 @@ function DashboardLayout({
   className,
   mainClassName
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-screen overflow-hidden flex-row bg-storm-gray-0", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "h-screen shrink-0", children: /* @__PURE__ */ jsx(Sidebar, { ...sidebar }) }),
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-screen min-w-0 overflow-hidden flex-row bg-storm-gray-0", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "max-md:contents md:h-screen md:shrink-0", children: /* @__PURE__ */ jsx(Sidebar, { ...sidebar }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex h-screen min-h-0 min-w-0 flex-1 flex-col overflow-hidden", children: [
       /* @__PURE__ */ jsx(SidebarMobileHeader, { ...mobileHeader }),
       /* @__PURE__ */ jsx(AppHeader, { ...header }),
-      /* @__PURE__ */ jsx("main", { className: mainClassName ?? "min-h-0 flex-1 overflow-y-auto p-4 md:p-6", children })
+      /* @__PURE__ */ jsx("main", { className: mainClassName ?? "min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto p-4 xl:p-6", children })
     ] })
   ] });
 }
@@ -29721,21 +29733,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__ */ 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__ */ jsx("p", { className: "typography-12 font-medium text-storm-gray-200", children: mergedLabels.showing({ start, end, total }) }),
-        /* @__PURE__ */ jsxs(
+        showPageControls ? /* @__PURE__ */ jsxs(
           "nav",
           {
             "aria-label": "Pagination",
@@ -29803,7 +29816,7 @@ function Pagination({
               )
             ]
           }
-        )
+        ) : null
       ]
     }
   );
@@ -30245,7 +30258,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
       ),
@@ -30299,7 +30312,7 @@ function DataTable({
     }),
     [className, classNames, footerClassName, scrollClassName, tableClassName]
   );
-  return /* @__PURE__ */ jsx(DataTableClassNamesContext.Provider, { value: mergedClassNames, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", fillHeight && "min-h-0 flex-1", mergedClassNames.root), children: [
+  return /* @__PURE__ */ jsx(DataTableClassNamesContext.Provider, { value: mergedClassNames, children: /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col", fillHeight && "min-h-0 flex-1", mergedClassNames.root), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -30327,6 +30340,7 @@ function DataTable({
       "div",
       {
         className: cn(
+          "shrink-0",
           tableFooterShellClassName,
           tableBorderClassName,
           mergedClassNames.footer
@@ -30638,7 +30652,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
@@ -30652,7 +30666,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",