@scripso-homepad/ui 0.4.35 → 0.4.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.35",
+  "version": "0.4.37",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/components/Button.tsx

@@ -124,7 +124,11 @@ export function Button({
     icon != null && typeof icon !== "boolean" ? icon : undefined;
   const hasIcon = showIcon || icon === true || customIcon != null;
   const resolvedContainerClassName = [
-    Platform.OS === "web" ? "max-md:px-4!" : "",
+    Platform.OS === "web"
+      ? hasIcon
+        ? "max-md:pl-4! pr-2!"
+        : "max-md:px-4!"
+      : "",
     className,
   ]
     .filter(Boolean)

package/src/components/PhoneInput.tsx

@@ -175,12 +175,15 @@ export function PhoneInput({
 const styles = StyleSheet.create({
   wrapper: {
     width: "100%",
+    minWidth: 0,
     gap: spacing.sm,
   },
   row: {
     flexDirection: "row",
     alignItems: "center",
     gap: INPUT_ICON_GAP,
+    minWidth: 0,
+    width: "100%",
   },
   countryOutline: {
     flexShrink: 0,
@@ -190,9 +193,11 @@ const styles = StyleSheet.create({
   },
   phoneOutline: {
     flex: 1,
+    minWidth: 0,
   },
   phoneField: {
     flex: 1,
+    minWidth: 0,
   },
   error: {
     fontSize: 12,

package/src/web/components/Drawer.tsx

@@ -148,7 +148,7 @@ export 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}
@@ -160,7 +160,7 @@ export 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

package/src/web/components/Pagination.tsx

@@ -42,6 +42,7 @@ export 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;
 };
 
@@ -64,15 +65,16 @@ export function Pagination({
   const visiblePages = getVisiblePageNumbers(safePage, totalPages, maxPageButtons);
   const canGoPrevious = safePage > 1;
   const canGoNext = safePage < totalPages;
+  const showPageControls = totalPages > 1;
 
-  if (hideOnSinglePage && totalPages <= 1) {
+  if (hideOnSinglePage && !showPageControls) {
     return null;
   }
 
   return (
     <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,
@@ -82,66 +84,68 @@ export function Pagination({
         {mergedLabels.showing({ start, end, total })}
       </p>
 
-      <nav
-        aria-label="Pagination"
-        className="flex items-center gap-2.5"
-      >
-        <button
-          type="button"
-          onClick={() => onPageChange(safePage - 1)}
-          disabled={!canGoPrevious}
-          aria-label={mergedLabels.previousPage}
-          className={cn(
-            paginationControlClassName,
-            canGoPrevious ? paginationHoverClassName : 'cursor-not-allowed opacity-40',
-          )}
+      {showPageControls ? (
+        <nav
+          aria-label="Pagination"
+          className="flex items-center gap-2.5"
         >
-          <ChevronLeft
-            className="size-3.5 text-storm-gray-500"
-            strokeWidth={1.75}
-            aria-hidden
-          />
-        </button>
+          <button
+            type="button"
+            onClick={() => onPageChange(safePage - 1)}
+            disabled={!canGoPrevious}
+            aria-label={mergedLabels.previousPage}
+            className={cn(
+              paginationControlClassName,
+              canGoPrevious ? paginationHoverClassName : 'cursor-not-allowed opacity-40',
+            )}
+          >
+            <ChevronLeft
+              className="size-3.5 text-storm-gray-500"
+              strokeWidth={1.75}
+              aria-hidden
+            />
+          </button>
 
-        {visiblePages.map((pageNumber) => {
-          const isActive = pageNumber === safePage;
+          {visiblePages.map((pageNumber) => {
+            const isActive = pageNumber === safePage;
 
-          return (
-            <button
-              key={pageNumber}
-              type="button"
-              onClick={() => onPageChange(pageNumber)}
-              aria-label={mergedLabels.page(pageNumber)}
-              aria-current={isActive ? 'page' : undefined}
-              className={cn(
-                paginationControlClassName,
-                isActive
-                  ? 'border-storm-gray-50 font-bold text-storm-gray-900'
-                  : paginationHoverClassName,
-              )}
-            >
-              {pageNumber}
-            </button>
-          );
-        })}
+            return (
+              <button
+                key={pageNumber}
+                type="button"
+                onClick={() => onPageChange(pageNumber)}
+                aria-label={mergedLabels.page(pageNumber)}
+                aria-current={isActive ? 'page' : undefined}
+                className={cn(
+                  paginationControlClassName,
+                  isActive
+                    ? 'border-storm-gray-50 font-bold text-storm-gray-900'
+                    : paginationHoverClassName,
+                )}
+              >
+                {pageNumber}
+              </button>
+            );
+          })}
 
-        <button
-          type="button"
-          onClick={() => onPageChange(safePage + 1)}
-          disabled={!canGoNext}
-          aria-label={mergedLabels.nextPage}
-          className={cn(
-            paginationControlClassName,
-            canGoNext ? paginationHoverClassName : 'cursor-not-allowed opacity-40',
-          )}
-        >
-          <ChevronRight
-            className="size-3.5 text-storm-gray-500"
-            strokeWidth={1.75}
-            aria-hidden
-          />
-        </button>
-      </nav>
+          <button
+            type="button"
+            onClick={() => onPageChange(safePage + 1)}
+            disabled={!canGoNext}
+            aria-label={mergedLabels.nextPage}
+            className={cn(
+              paginationControlClassName,
+              canGoNext ? paginationHoverClassName : 'cursor-not-allowed opacity-40',
+            )}
+          >
+            <ChevronRight
+              className="size-3.5 text-storm-gray-500"
+              strokeWidth={1.75}
+              aria-hidden
+            />
+          </button>
+        </nav>
+      ) : null}
     </div>
   );
 }

package/src/web/components/table/DataTable.tsx

@@ -86,7 +86,7 @@ export function DataTable({
 
   return (
     <DataTableClassNamesContext.Provider value={mergedClassNames}>
-      <div className={cn('flex flex-col', fillHeight && 'min-h-0 flex-1', mergedClassNames.root)}>
+      <div className={cn('flex min-w-0 flex-col', fillHeight && 'min-h-0 flex-1', mergedClassNames.root)}>
         <div
           className={cn(
             tableShellClassName,
@@ -109,6 +109,7 @@ export function DataTable({
         {hasFooter ? (
           <div
             className={cn(
+              'shrink-0',
               tableFooterShellClassName,
               tableBorderClassName,
               mergedClassNames.footer,

package/src/web/components/table/TableScrollArea.tsx

@@ -23,7 +23,7 @@ export function TableScrollArea({
   return (
     <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,
       )}

package/src/web/icons/SidebarCollapseIcon.tsx

@@ -0,0 +1,32 @@
+type SidebarCollapseIconProps = {
+  className?: string;
+  size?: number | string;
+  strokeWidth?: number | string;
+};
+
+/** Shown when the sidebar is open — click collapses it. */
+export function SidebarCollapseIcon({
+  className,
+  size = 20,
+  strokeWidth = 2,
+}: SidebarCollapseIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={className}
+    >
+      <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={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/icons/SidebarExpandIcon.tsx

@@ -0,0 +1,32 @@
+type SidebarExpandIconProps = {
+  className?: string;
+  size?: number | string;
+  strokeWidth?: number | string;
+};
+
+/** Shown when the sidebar is closed — click expands it. */
+export function SidebarExpandIcon({
+  className,
+  size = 20,
+  strokeWidth = 2,
+}: SidebarExpandIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+      className={className}
+    >
+      <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={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

package/src/web/index.ts

@@ -23,6 +23,8 @@ export type { SidebarUserCardProps } from './layout/SidebarUserCard';
 
 export { BellIcon } from './icons/BellIcon';
 export { BuildingIcon } from './icons/BuildingIcon';
+export { SidebarCollapseIcon } from './icons/SidebarCollapseIcon';
+export { SidebarExpandIcon } from './icons/SidebarExpandIcon';
 export { TableMoreIcon } from './icons/TableMoreIcon';
 export { TableSortIcon } from './icons/TableSortIcon';
 export { TableMenuCheckIcon } from './icons/TableMenuCheckIcon';

package/src/web/layout/DashboardLayout.stories.tsx

@@ -43,6 +43,7 @@ function DashboardLayoutDemo() {
           user: storyUser,
           mobileOpen: mobileMenuOpen,
           onMobileClose: () => setMobileMenuOpen(false),
+          onMobileOpen: () => setMobileMenuOpen(true),
           onLogout: fn(),
           onNavItemClick: () => setMobileMenuOpen(false),
         }}
@@ -63,7 +64,7 @@ function DashboardLayoutDemo() {
           buildingOptions: storyBuildingOptions,
           selectedBuildingId,
           onBuildingChange: setSelectedBuildingId,
-          className: 'hidden md:flex',
+          className: 'hidden lg:flex',
           searchValue: searchQuery,
           onSearchChange: setSearchQuery,
           onNotificationsClick: fn(),

package/src/web/layout/DashboardLayout.tsx

@@ -27,14 +27,14 @@ export function DashboardLayout({
   mainClassName,
 }: DashboardLayoutProps) {
   return (
-    <div className={cn('flex h-screen overflow-hidden flex-row bg-storm-gray-0', className)}>
-      <div className="h-screen shrink-0">
+    <div className={cn('flex h-screen min-w-0 overflow-hidden flex-row bg-storm-gray-0', className)}>
+      <div className="max-md:contents md:h-screen md:shrink-0">
         <Sidebar {...sidebar} />
       </div>
       <div className="flex h-screen min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
         <SidebarMobileHeader {...mobileHeader} />
         <AppHeader {...header} />
-        <main className={mainClassName ?? 'min-h-0 flex-1 overflow-y-auto p-4 md:p-6'}>{children}</main>
+        <main className={mainClassName ?? 'min-h-0 min-w-0 flex-1 overflow-x-hidden overflow-y-auto p-4 xl:p-6'}>{children}</main>
       </div>
     </div>
   );

package/src/web/layout/Sidebar.stories.tsx

@@ -67,6 +67,7 @@ function MobileDrawerStory(args: SidebarProps) {
           {...args}
           mobileOpen={mobileOpen}
           onMobileClose={() => setMobileOpen(false)}
+          onMobileOpen={() => setMobileOpen(true)}
         />
       </div>
     </WebLayoutCanvas>

package/src/web/layout/Sidebar.tsx

@@ -1,6 +1,7 @@
-import { PanelLeftClose, PanelLeftOpen, X } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
 
+import { SidebarCollapseIcon } from '../icons/SidebarCollapseIcon';
+import { SidebarExpandIcon } from '../icons/SidebarExpandIcon';
 import { useMediaQuery } from '../hooks/useMediaQuery';
 import { cn } from '../utils/cn';
 import { isNavItemActive } from './nav-active';
@@ -24,6 +25,7 @@ export 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.
@@ -66,6 +68,7 @@ export function Sidebar({
   className,
   mobileOpen,
   onMobileClose,
+  onMobileOpen,
   onNavItemClick,
   collapseIcon,
   expandIcon,
@@ -74,13 +77,15 @@ export function Sidebar({
   collapsed,
   onCollapsedChange,
 }: SidebarProps) {
-  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: boolean) => {
@@ -105,8 +110,14 @@ export function Sidebar({
       return;
     }
 
-    onMobileClose?.();
-  }, [isDesktop, onMobileClose, toggleCollapsed]);
+    if (mobileOpen) {
+      onMobileClose?.();
+
+      return;
+    }
+
+    onMobileOpen?.();
+  }, [isDesktop, mobileOpen, onMobileClose, onMobileOpen, toggleCollapsed]);
 
   const handleNavItemNavigate = useCallback(
     (item: AdminNavItem) => {
@@ -156,21 +167,28 @@ export 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 ? (
+        <div className="h-screen w-[76px] shrink-0" aria-hidden />
+      ) : null}
+
       <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}
       >
         <div
           className={cn(
@@ -199,22 +217,16 @@ export function Sidebar({
             onClick={handleHeaderAction}
             className="shrink-0 cursor-pointer text-white transition-[opacity,transform] duration-200 hover:opacity-80 active:scale-95"
             aria-label={
-              isDesktop
-                ? isExpanded
+              isExpanded
+                ? isDesktop
                   ? labels.collapse
-                  : labels.expand
-                : labels.closeMenu
+                  : labels.closeMenu
+                : labels.expand
             }
           >
-            {isDesktop ? (
-              isExpanded ? (
-                collapseIcon ?? <PanelLeftClose size={20} strokeWidth={1.75} />
-              ) : (
-                expandIcon ?? <PanelLeftOpen size={20} strokeWidth={1.75} />
-              )
-            ) : (
-              closeIcon ?? <X size={20} strokeWidth={1.75} />
-            )}
+            {isExpanded
+              ? (collapseIcon ?? closeIcon ?? <SidebarCollapseIcon />)
+              : (expandIcon ?? <SidebarExpandIcon />)}
           </button>
         </div>
 

package/src/web/layout/SidebarMobileHeader.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
+import { BellIcon } from '../icons/BellIcon';
 import { WebLayoutCanvas } from './story-helpers';
 import { SidebarMobileHeader } from './SidebarMobileHeader';
 import { storyBranding, storyLabels, storyLogoIconDarkSrc } from './story-fixtures';
@@ -45,3 +46,22 @@ export const MenuOpen: Story = {
     </WebLayoutCanvas>
   ),
 };
+
+export const WithEndAction: Story = {
+  args: {
+    end: (
+      <button
+        type="button"
+        className="relative flex size-11 shrink-0 items-center justify-center rounded-xl border border-storm-gray-50 text-navy"
+        aria-label="Notifications"
+      >
+        <BellIcon className="text-navy" />
+      </button>
+    ),
+  },
+  render: (args) => (
+    <WebLayoutCanvas>
+      <SidebarMobileHeader {...args} />
+    </WebLayoutCanvas>
+  ),
+};

package/src/web/layout/SidebarMobileHeader.tsx

@@ -1,5 +1,6 @@
-import { Menu } from 'lucide-react';
+import type { ReactNode } from 'react';
 
+import { SidebarExpandIcon } from '../icons/SidebarExpandIcon';
 import { cn } from '../utils/cn';
 import type { AdminSidebarBranding } from './types';
 
@@ -9,6 +10,8 @@ export type SidebarMobileHeaderProps = {
   onOpenMenu: () => void;
   menuOpen?: boolean;
   className?: string;
+  /** Rendered on the right side of the mobile header (e.g. notifications). */
+  end?: ReactNode;
 };
 
 export function SidebarMobileHeader({
@@ -17,6 +20,7 @@ export function SidebarMobileHeader({
   onOpenMenu,
   menuOpen = false,
   className,
+  end,
 }: SidebarMobileHeaderProps) {
   return (
     <header
@@ -32,9 +36,9 @@ export function SidebarMobileHeader({
         aria-label={openMenuLabel}
         aria-expanded={menuOpen}
       >
-        <Menu size={22} strokeWidth={1.75} />
+        <SidebarExpandIcon size={22} />
       </button>
-      <div className="flex min-w-0 items-center gap-2">
+      <div className="flex min-w-0 flex-1 items-center gap-2">
         <img src={branding.logoIconSrc} alt="" className="h-[30px] w-[42px] shrink-0" />
         <div className="min-w-0 leading-none">
           <p className="truncate text-base font-bold tracking-tight text-navy">{branding.logoTitle}</p>
@@ -43,6 +47,7 @@ export function SidebarMobileHeader({
           </p>
         </div>
       </div>
+      {end ? <div className="shrink-0">{end}</div> : null}
     </header>
   );
 }