@scripso-homepad/ui 0.4.35 → 0.4.37

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;
@@ -169,6 +172,22 @@ type BuildingIconProps = {
 };
 declare function BuildingIcon({ className }: BuildingIconProps): react.JSX.Element;
 
+type SidebarCollapseIconProps = {
+    className?: string;
+    size?: number | string;
+    strokeWidth?: number | string;
+};
+/** Shown when the sidebar is open — click collapses it. */
+declare function SidebarCollapseIcon({ className, size, strokeWidth, }: SidebarCollapseIconProps): react.JSX.Element;
+
+type SidebarExpandIconProps = {
+    className?: string;
+    size?: number | string;
+    strokeWidth?: number | string;
+};
+/** Shown when the sidebar is closed — click expands it. */
+declare function SidebarExpandIcon({ className, size, strokeWidth, }: SidebarExpandIconProps): react.JSX.Element;
+
 type TableMoreIconProps = {
     className?: string;
 };
@@ -252,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;
@@ -533,4 +553,4 @@ declare function useOnClickOutside<T extends HTMLElement>(ref: OutsideTarget<T>,
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, Badge, type BadgeProps, type BadgeVariant, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, ConfirmModal, type ConfirmModalProps, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableClassNames, type DataTableProps, Drawer, type DrawerProps, HistoryTimeline, type HistoryTimelineItem, type HistoryTimelineProps, type HomepadToasterProps, Modal, type ModalFooterAlign, type ModalFooterLayout, type ModalProps, type MutationToastMessages, type MutationToastResult, Pagination, type PaginationLabels, type PaginationProps, type PaginationVariant, type RunMutationWithToastOptions, Sidebar, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Table, TableActionButton, type TableActionButtonProps, type TableActionButtonVariant, TableActionsCell, type TableActionsCellProps, TableActionsMenu, type TableActionsMenuItem, type TableActionsMenuItemTone, type TableActionsMenuProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellVariant, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIconText, type TableIconTextProps, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, type TableProps, TableRow, type TableRowActionsConfig, type TableRowProps, TableRowStatusActions, type TableRowStatusActionsProps, TableScrollArea, type TableScrollAreaProps, type TableSortDirection, TableSortIcon, TableStatusActionsCell, type TableStatusActionsCellProps, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };
+export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, Badge, type BadgeProps, type BadgeVariant, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, ConfirmModal, type ConfirmModalProps, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableClassNames, type DataTableProps, Drawer, type DrawerProps, HistoryTimeline, type HistoryTimelineItem, type HistoryTimelineProps, type HomepadToasterProps, Modal, type ModalFooterAlign, type ModalFooterLayout, type ModalProps, type MutationToastMessages, type MutationToastResult, Pagination, type PaginationLabels, type PaginationProps, type PaginationVariant, type RunMutationWithToastOptions, Sidebar, SidebarCollapseIcon, SidebarExpandIcon, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Table, TableActionButton, type TableActionButtonProps, type TableActionButtonVariant, TableActionsCell, type TableActionsCellProps, TableActionsMenu, type TableActionsMenuItem, type TableActionsMenuItemTone, type TableActionsMenuProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellVariant, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIconText, type TableIconTextProps, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, type TableProps, TableRow, type TableRowActionsConfig, type TableRowProps, TableRowStatusActions, type TableRowStatusActionsProps, TableScrollArea, type TableScrollAreaProps, type TableSortDirection, TableSortIcon, TableStatusActionsCell, type TableStatusActionsCellProps, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };

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;
@@ -169,6 +172,22 @@ type BuildingIconProps = {
 };
 declare function BuildingIcon({ className }: BuildingIconProps): react.JSX.Element;
 
+type SidebarCollapseIconProps = {
+    className?: string;
+    size?: number | string;
+    strokeWidth?: number | string;
+};
+/** Shown when the sidebar is open — click collapses it. */
+declare function SidebarCollapseIcon({ className, size, strokeWidth, }: SidebarCollapseIconProps): react.JSX.Element;
+
+type SidebarExpandIconProps = {
+    className?: string;
+    size?: number | string;
+    strokeWidth?: number | string;
+};
+/** Shown when the sidebar is closed — click expands it. */
+declare function SidebarExpandIcon({ className, size, strokeWidth, }: SidebarExpandIconProps): react.JSX.Element;
+
 type TableMoreIconProps = {
     className?: string;
 };
@@ -252,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;
@@ -533,4 +553,4 @@ declare function useOnClickOutside<T extends HTMLElement>(ref: OutsideTarget<T>,
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, Badge, type BadgeProps, type BadgeVariant, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, ConfirmModal, type ConfirmModalProps, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableClassNames, type DataTableProps, Drawer, type DrawerProps, HistoryTimeline, type HistoryTimelineItem, type HistoryTimelineProps, type HomepadToasterProps, Modal, type ModalFooterAlign, type ModalFooterLayout, type ModalProps, type MutationToastMessages, type MutationToastResult, Pagination, type PaginationLabels, type PaginationProps, type PaginationVariant, type RunMutationWithToastOptions, Sidebar, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Table, TableActionButton, type TableActionButtonProps, type TableActionButtonVariant, TableActionsCell, type TableActionsCellProps, TableActionsMenu, type TableActionsMenuItem, type TableActionsMenuItemTone, type TableActionsMenuProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellVariant, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIconText, type TableIconTextProps, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, type TableProps, TableRow, type TableRowActionsConfig, type TableRowProps, TableRowStatusActions, type TableRowStatusActionsProps, TableScrollArea, type TableScrollAreaProps, type TableSortDirection, TableSortIcon, TableStatusActionsCell, type TableStatusActionsCellProps, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };
+export { type AdminBuildingOption, type AdminHeaderLabels, type AdminLayoutLabels, type AdminNavItem, type AdminSidebarBranding, type AdminSidebarLabels, type AdminSidebarUser, AppHeader, type AppHeaderProps, Badge, type BadgeProps, type BadgeVariant, BellIcon, BuildingIcon, BuildingSelect, type BuildingSelectProps, ConfirmModal, type ConfirmModalProps, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableClassNames, type DataTableProps, Drawer, type DrawerProps, HistoryTimeline, type HistoryTimelineItem, type HistoryTimelineProps, type HomepadToasterProps, Modal, type ModalFooterAlign, type ModalFooterLayout, type ModalProps, type MutationToastMessages, type MutationToastResult, Pagination, type PaginationLabels, type PaginationProps, type PaginationVariant, type RunMutationWithToastOptions, Sidebar, SidebarCollapseIcon, SidebarExpandIcon, SidebarMobileHeader, type SidebarMobileHeaderProps, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarUserCard, type SidebarUserCardProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Table, TableActionButton, type TableActionButtonProps, type TableActionButtonVariant, TableActionsCell, type TableActionsCellProps, TableActionsMenu, type TableActionsMenuItem, type TableActionsMenuItemTone, type TableActionsMenuProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, type TableCellVariant, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, TableIconText, type TableIconTextProps, TableMenuActivateIcon, TableMenuCheckIcon, TableMenuCloseIcon, TableMenuEditIcon, TableMenuInfoIcon, TableMenuRefreshIcon, TableMenuSuspendIcon, TableMenuTrashIcon, TableMoreIcon, type TableProps, TableRow, type TableRowActionsConfig, type TableRowProps, TableRowStatusActions, type TableRowStatusActionsProps, TableScrollArea, type TableScrollAreaProps, type TableSortDirection, TableSortIcon, TableStatusActionsCell, type TableStatusActionsCellProps, Toaster, ToasterProvider, cn, getPaginationRange, getTotalPages, getVisiblePageNumbers, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };

package/dist/web/index.js

@@ -1,5 +1,5 @@
-import { __commonJS, __require, __toESM, Input, Button } from '../chunk-AOBKWDGW.js';
-import { ChevronsUpDown, Search, LogOut, PanelLeftClose, PanelLeftOpen, 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);
@@ -28887,6 +28887,62 @@ function AppHeader({
     }
   );
 }
+function SidebarCollapseIcon({
+  className,
+  size = 20,
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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] = useState(() => {
     if (typeof window === "undefined") {
@@ -29113,6 +29169,7 @@ function Sidebar({
   className,
   mobileOpen,
   onMobileClose,
+  onMobileOpen,
   onNavItemClick,
   collapseIcon,
   expandIcon,
@@ -29121,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) {
@@ -29145,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);
@@ -29186,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",
@@ -29234,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(PanelLeftClose, { size: 20, strokeWidth: 1.75 }) : expandIcon ?? /* @__PURE__ */ jsx(PanelLeftOpen, { size: 20, strokeWidth: 1.75 }) : 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, {})
                   }
                 )
               ]
@@ -29284,7 +29350,8 @@ function SidebarMobileHeader({
   openMenuLabel,
   onOpenMenu,
   menuOpen = false,
-  className
+  className,
+  end
 }) {
   return /* @__PURE__ */ jsxs(
     "header",
@@ -29302,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
       ]
     }
   );
@@ -29324,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 })
     ] })
   ] });
 }
@@ -29665,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",
@@ -29747,7 +29816,7 @@ function Pagination({
               )
             ]
           }
-        )
+        ) : null
       ]
     }
   );
@@ -30189,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
       ),
@@ -30243,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",
       {
@@ -30271,6 +30340,7 @@ function DataTable({
       "div",
       {
         className: cn(
+          "shrink-0",
           tableFooterShellClassName,
           tableBorderClassName,
           mergedClassNames.footer
@@ -30582,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
@@ -30596,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",
@@ -31074,6 +31144,6 @@ react-dom/cjs/react-dom.development.js:
    *)
 */
 
-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, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };
+export { AppHeader, Badge, BellIcon, BuildingIcon, BuildingSelect, ConfirmModal, DEFAULT_TABLE_BODY_MIN_HEIGHT, DashboardLayout, DataTable, Drawer, HistoryTimeline, Modal, Pagination, Sidebar, SidebarCollapseIcon, SidebarExpandIcon, 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, isNavItemActive, runMutationWithToast, tableRowDisabledCellClassName, useMediaQuery, useOnClickOutside };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map