@scripso-homepad/ui 0.3.9 → 0.4.1

package/dist/web/index.js

@@ -0,0 +1,739 @@
+import { Input } from '../chunk-C7GHBVMM.js';
+import { ChevronsUpDown, Search, LogOut, PanelLeftClose, PanelLeftOpen, X, Menu } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useEffect, useState, useRef, useId, useCallback } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function BellIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      className: cn("shrink-0", className),
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M8.58333 17.4998C8.72282 17.7535 8.92787 17.9651 9.17708 18.1125C9.42628 18.2599 9.71048 18.3376 10 18.3376C10.2895 18.3376 10.5737 18.2599 10.8229 18.1125C11.0721 17.9651 11.2772 17.7535 11.4167 17.4998M5 6.6665C5 5.34042 5.52678 4.06865 6.46447 3.13097C7.40215 2.19329 8.67392 1.6665 10 1.6665C11.3261 1.6665 12.5979 2.19329 13.5355 3.13097C14.4732 4.06865 15 5.34042 15 6.6665C15 12.4998 17.5 14.1665 17.5 14.1665H2.5C2.5 14.1665 5 12.4998 5 6.6665Z",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function BuildingIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      className: cn("shrink-0", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10 12h4",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10 8h4",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M14 21v-3a2 2 0 0 0-4 0v3",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function useOnClickOutside(ref, handler, enabled = true) {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (!ref.current || !target || ref.current.contains(target)) {
+        return;
+      }
+      handler();
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("touchstart", onPointerDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("touchstart", onPointerDown);
+    };
+  }, [enabled, handler, ref]);
+}
+function BuildingSelect({
+  options,
+  value,
+  labels,
+  onChange,
+  disabled = false,
+  className,
+  menuClassName,
+  buildingIcon,
+  chevronIcon
+}) {
+  const [open, setOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const rootRef = useRef(null);
+  const listboxId = useId();
+  const selectedOption = options.find((option) => option.value === value);
+  const displayLabel = selectedOption?.label ?? labels.selectBuilding;
+  const selectableOptions = options.filter((option) => !option.disabled);
+  const closeMenu = useCallback(() => {
+    setOpen(false);
+    setHighlightedIndex(-1);
+  }, []);
+  const openMenu = useCallback(() => {
+    if (disabled || selectableOptions.length === 0) {
+      return;
+    }
+    const selectedIndex = selectableOptions.findIndex((option) => option.value === value);
+    setHighlightedIndex(selectedIndex >= 0 ? selectedIndex : 0);
+    setOpen(true);
+  }, [disabled, selectableOptions, value]);
+  const selectOption = useCallback(
+    (option) => {
+      if (option.disabled) {
+        return;
+      }
+      onChange?.(option.value);
+      closeMenu();
+    },
+    [closeMenu, onChange]
+  );
+  useOnClickOutside(rootRef, closeMenu, open);
+  const handleTriggerKeyDown = (event) => {
+    if (disabled) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowDown":
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        openMenu();
+        break;
+      case "Escape":
+        closeMenu();
+        break;
+    }
+  };
+  const handleListKeyDown = (event) => {
+    if (!open || selectableOptions.length === 0) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        setHighlightedIndex((current) => (current + 1) % selectableOptions.length);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        setHighlightedIndex(
+          (current) => (current - 1 + selectableOptions.length) % selectableOptions.length
+        );
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (highlightedIndex >= 0) {
+          selectOption(selectableOptions[highlightedIndex]);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        closeMenu();
+        break;
+      case "Tab":
+        closeMenu();
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative w-57.5", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": listboxId,
+        "aria-label": labels.selectBuilding,
+        onClick: () => open ? closeMenu() : openMenu(),
+        onKeyDown: handleTriggerKeyDown,
+        className: cn(
+          "flex h-11 w-full items-center gap-3 rounded-xl border border-storm-gray-50 bg-white p-3 text-left transition-colors",
+          !disabled && "cursor-pointer hover:bg-storm-gray-50/60",
+          open && "bg-storm-gray-50/60",
+          disabled && "cursor-not-allowed opacity-60"
+        ),
+        children: [
+          buildingIcon ?? /* @__PURE__ */ jsx(BuildingIcon, { className: "shrink-0 text-navy" }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium text-slate-blue", children: displayLabel }),
+          chevronIcon ?? /* @__PURE__ */ jsx(
+            ChevronsUpDown,
+            {
+              size: 16,
+              strokeWidth: 1.75,
+              className: cn(
+                "shrink-0 text-storm-gray-100 transition-transform duration-200",
+                open && "rotate-180"
+              ),
+              "aria-hidden": true
+            }
+          )
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      "ul",
+      {
+        id: listboxId,
+        role: "listbox",
+        "aria-label": labels.selectBuilding,
+        tabIndex: -1,
+        onKeyDown: handleListKeyDown,
+        className: cn(
+          "absolute top-[calc(100%+4px)] left-0 z-50 flex w-full flex-col gap-1 overflow-hidden rounded-xl border border-storm-gray-50 bg-white p-2 shadow-[0_8px_24px_rgba(21,26,30,0.08)]",
+          menuClassName
+        ),
+        children: options.map((option) => {
+          const selectableIndex = selectableOptions.findIndex(
+            (selectable) => selectable.value === option.value
+          );
+          const isSelected = option.value === value;
+          const isHighlighted = selectableIndex === highlightedIndex;
+          return /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": isSelected,
+              disabled: option.disabled,
+              onMouseEnter: () => {
+                if (!option.disabled && selectableIndex >= 0) {
+                  setHighlightedIndex(selectableIndex);
+                }
+              },
+              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",
+                !option.disabled && "cursor-pointer hover:bg-storm-gray-50",
+                (isSelected || isHighlighted) && !option.disabled && "bg-storm-gray-50",
+                option.disabled && "cursor-not-allowed opacity-50"
+              ),
+              children: /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label })
+            }
+          ) }, option.value);
+        })
+      }
+    ) : null
+  ] });
+}
+var defaultSearchFieldStyle = {
+  height: 44,
+  minHeight: 44,
+  maxHeight: 44,
+  backgroundColor: "transparent",
+  padding: 12,
+  width: 260,
+  borderRadius: 12
+};
+function AppHeader({
+  title,
+  labels,
+  buildingOptions,
+  selectedBuildingId,
+  className,
+  buildingSelectClassName,
+  searchClassName,
+  notificationsButtonClassName,
+  searchValue,
+  searchFieldStyle,
+  buildingIcon,
+  notificationsIcon,
+  searchIcon,
+  buildingChevronIcon,
+  buildingSelectDisabled = false,
+  searchDisabled = false,
+  notificationsDisabled = false,
+  onBuildingChange,
+  onNotificationsClick,
+  onSearchChange
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "flex shrink-0 items-center justify-between gap-4 border-b border-storm-gray-50 bg-storm-gray-0 px-6 py-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("h1", { className: "truncate text-xl font-bold text-slate-blue", children: title }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            BuildingSelect,
+            {
+              options: buildingOptions,
+              value: selectedBuildingId,
+              labels,
+              onChange: onBuildingChange,
+              disabled: buildingSelectDisabled,
+              className: buildingSelectClassName,
+              buildingIcon,
+              chevronIcon: buildingChevronIcon
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              leftIcon: searchIcon ?? /* @__PURE__ */ jsx(Search, { strokeWidth: 1.75 }),
+              placeholder: labels.searchPlaceholder,
+              value: searchValue,
+              onChangeText: (value) => onSearchChange?.(value),
+              editable: !searchDisabled,
+              className: cn("w-65!", searchClassName),
+              containerStyle: { width: 260, maxWidth: 260, flexShrink: 0 },
+              fieldStyle: searchFieldStyle ?? defaultSearchFieldStyle,
+              accessibilityLabel: labels.searchPlaceholder
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onNotificationsClick,
+              disabled: notificationsDisabled,
+              className: cn(
+                "h-11 cursor-pointer rounded-xl border border-storm-gray-50 p-3 text-slate-blue transition-colors hover:bg-storm-gray-50/60",
+                notificationsDisabled && "pointer-events-none opacity-60",
+                notificationsButtonClassName
+              ),
+              "aria-label": labels.notifications,
+              children: notificationsIcon ?? /* @__PURE__ */ jsx(BellIcon, { className: "text-navy" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window === "undefined") {
+      return false;
+    }
+    return window.matchMedia(query).matches;
+  });
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    const handleChange = () => setMatches(mediaQuery.matches);
+    handleChange();
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [query]);
+  return matches;
+}
+function SidebarNavItem({ item, isOpen, onNavigate }) {
+  if (item.hidden) {
+    return null;
+  }
+  const handleClick = () => {
+    item.onClick?.();
+    onNavigate?.(item);
+  };
+  return /* @__PURE__ */ jsx(
+    NavLink,
+    {
+      to: item.to,
+      end: item.end,
+      onClick: handleClick,
+      "aria-disabled": item.disabled,
+      tabIndex: item.disabled ? -1 : void 0,
+      className: ({ isActive }) => cn(
+        "relative flex items-center rounded-xl px-4 py-3 transition-[background-color,color,gap,padding] duration-300 ease-in-out",
+        isOpen ? "w-full gap-4" : "justify-center gap-0 px-3",
+        item.disabled && "pointer-events-none opacity-50",
+        isActive ? "bg-black/12 text-white" : "text-navy-100 hover:bg-white/5"
+      ),
+      children: ({ isActive }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "absolute top-1.5 -left-1 h-8 w-2 rounded-full bg-white transition-[opacity,transform] duration-300 ease-in-out",
+              isActive ? "scale-100 opacity-100" : "scale-75 opacity-0"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", children: item.icon }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "overflow-hidden text-sm 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
+          }
+        )
+      ] })
+    }
+  );
+}
+function getInitials(fullName, email) {
+  const parts = fullName.trim().split(/\s+/).filter(Boolean);
+  if (parts.length > 0) {
+    return parts.slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("");
+  }
+  return email.slice(0, 2).toUpperCase();
+}
+function SidebarUserCard({
+  user,
+  isOpen,
+  logoutLabel,
+  onLogout,
+  className
+}) {
+  const initials = user.initials ?? getInitials(user.fullName, user.email);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-center rounded-xl transition-[background-color,justify-content,gap,padding] duration-300 ease-in-out",
+        isOpen ? "justify-between gap-3 bg-black/12 p-3" : "justify-center px-3 py-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex size-11 shrink-0 items-center justify-center rounded-full bg-white/5 text-sm font-bold text-white",
+            "aria-hidden": true,
+            children: initials
+          }
+        ),
+        isOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-bold text-white", children: user.fullName }),
+            /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-storm-gray-100", children: user.email })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onLogout?.(),
+              className: "shrink-0 cursor-pointer text-navy-150 transition-[opacity,transform] duration-300 ease-in-out hover:opacity-80 active:scale-95",
+              "aria-label": logoutLabel,
+              children: /* @__PURE__ */ jsx(LogOut, { size: 20, strokeWidth: 1.75 })
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+function readInitialCollapsedState(storageKey, initialCollapsed) {
+  if (initialCollapsed !== void 0) {
+    return initialCollapsed;
+  }
+  if (typeof window === "undefined") {
+    return false;
+  }
+  const stored = window.localStorage.getItem(storageKey);
+  if (stored === null) {
+    return false;
+  }
+  return stored !== "true";
+}
+function Sidebar({
+  navItems,
+  footerNavItems,
+  branding,
+  labels,
+  sidebarStorageKey,
+  user,
+  onLogout,
+  className,
+  mobileOpen,
+  onMobileClose,
+  onNavItemClick,
+  collapseIcon,
+  expandIcon,
+  closeIcon,
+  initialCollapsed,
+  collapsed,
+  onCollapsedChange
+}) {
+  const location = useLocation();
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const [internalCollapsed, setInternalCollapsed] = useState(
+    () => readInitialCollapsedState(sidebarStorageKey, initialCollapsed)
+  );
+  const isCollapsed = collapsed ?? internalCollapsed;
+  const isExpanded = isDesktop ? !isCollapsed : true;
+  const setCollapsed = useCallback(
+    (next) => {
+      if (collapsed === void 0) {
+        setInternalCollapsed(next);
+        window.localStorage.setItem(sidebarStorageKey, String(!next));
+      }
+      onCollapsedChange?.(next);
+    },
+    [collapsed, onCollapsedChange, sidebarStorageKey]
+  );
+  const toggleCollapsed = useCallback(() => {
+    setCollapsed(!isCollapsed);
+  }, [isCollapsed, setCollapsed]);
+  const handleHeaderAction = useCallback(() => {
+    if (isDesktop) {
+      toggleCollapsed();
+      return;
+    }
+    onMobileClose?.();
+  }, [isDesktop, onMobileClose, toggleCollapsed]);
+  const handleNavItemNavigate = useCallback(
+    (item) => {
+      onNavItemClick?.(item);
+      if (!isDesktop) {
+        onMobileClose?.();
+      }
+    },
+    [isDesktop, onMobileClose, onNavItemClick]
+  );
+  const pathnameRef = useRef(location.pathname);
+  useEffect(() => {
+    if (pathnameRef.current === location.pathname) {
+      return;
+    }
+    pathnameRef.current = location.pathname;
+    if (!isDesktop) {
+      onMobileClose?.();
+    }
+  }, [location.pathname, isDesktop, onMobileClose]);
+  useEffect(() => {
+    if (!mobileOpen || isDesktop) {
+      return;
+    }
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [mobileOpen, isDesktop]);
+  const visibleNavItems = navItems.filter((item) => !item.hidden);
+  const visibleFooterNavItems = footerNavItems.filter((item) => !item.hidden);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "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",
+          mobileOpen ? "opacity-100" : "pointer-events-none opacity-0"
+        )
+      }
+    ),
+    /* @__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",
+          className
+        ),
+        "aria-hidden": !isDesktop && !mobileOpen,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex w-full items-center transition-[justify-content] duration-300 ease-in-out",
+                isExpanded ? "justify-between" : "justify-center"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex min-w-0 items-center gap-1.5 overflow-hidden transition-[max-width,opacity] duration-300 ease-in-out",
+                      isExpanded ? "max-w-[240px] opacity-100" : "max-w-0 opacity-0"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("img", { src: branding.logoIconSrc, alt: "", className: "h-5 w-[29px] shrink-0" }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col leading-none", children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-[21px] font-bold tracking-tight whitespace-nowrap text-white", children: branding.logoTitle }),
+                        /* @__PURE__ */ jsx("span", { className: "text-[6.5px] font-normal tracking-[-0.26px] text-navy-300 uppercase", children: branding.logoTagline })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    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 })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("nav", { className: "flex flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden", children: visibleNavItems.map((item) => /* @__PURE__ */ jsx(
+            SidebarNavItem,
+            {
+              item,
+              isOpen: isExpanded,
+              onNavigate: handleNavItemNavigate
+            },
+            item.to
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4", children: [
+            visibleFooterNavItems.map((item) => /* @__PURE__ */ jsx(
+              SidebarNavItem,
+              {
+                item,
+                isOpen: isExpanded,
+                onNavigate: handleNavItemNavigate
+              },
+              item.to
+            )),
+            user ? /* @__PURE__ */ jsx(
+              SidebarUserCard,
+              {
+                user,
+                isOpen: isExpanded,
+                logoutLabel: labels.logout,
+                onLogout
+              }
+            ) : null
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function SidebarMobileHeader({
+  branding,
+  openMenuLabel,
+  onOpenMenu,
+  menuOpen = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn(
+        "sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-storm-gray-50 bg-storm-gray-0 px-4 md:hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onOpenMenu,
+            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 })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 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 })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function DashboardLayout({
+  sidebar,
+  header,
+  mobileHeader,
+  children,
+  className,
+  mainClassName
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: className ?? "flex min-h-screen bg-storm-gray-0", children: [
+    /* @__PURE__ */ jsx(Sidebar, { ...sidebar }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx(SidebarMobileHeader, { ...mobileHeader }),
+      /* @__PURE__ */ jsx(AppHeader, { ...header }),
+      /* @__PURE__ */ jsx("main", { className: mainClassName ?? "flex-1 overflow-auto p-4 md:p-6", children })
+    ] })
+  ] });
+}
+
+export { AppHeader, BellIcon, BuildingIcon, BuildingSelect, DashboardLayout, Sidebar, SidebarMobileHeader, SidebarNavItem, SidebarUserCard, cn, useMediaQuery, useOnClickOutside };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map