@hellboy/ds 0.1.2 → 0.2.7

package/dist/components/navbar.js

@@ -0,0 +1,994 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/components/navbar/index.ts
+var navbar_exports = {};
+__export(navbar_exports, {
+  NAVBAR_COLLAPSED_WIDTH: () => NAVBAR_COLLAPSED_WIDTH,
+  NAVBAR_COLLAPSE_BREAKPOINT: () => NAVBAR_COLLAPSE_BREAKPOINT,
+  NAVBAR_EXPANDED_WIDTH: () => NAVBAR_EXPANDED_WIDTH,
+  NAVBAR_MIN_PERSIST_WIDTH: () => NAVBAR_MIN_PERSIST_WIDTH,
+  Navbar: () => Navbar,
+  NavbarMenuCategory: () => NavbarMenuCategory,
+  NavbarMenuGroup: () => NavbarMenuGroup,
+  NavbarMenuItem: () => NavbarMenuItem
+});
+module.exports = __toCommonJS(navbar_exports);
+
+// src/components/navbar/Navbar.tsx
+var React = __toESM(require("react"));
+
+// ../../../../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/utils/user-preferences.ts
+var DEFAULT_CONFIG = {
+  backend: "localStorage",
+  prefix: "hellboy-ds",
+  dbName: "hellboy-ds-prefs",
+  storeName: "preferences"
+};
+var config = { ...DEFAULT_CONFIG };
+var getStorageKey = (key) => {
+  return `${config.prefix}:${key}`;
+};
+var isLocalStorageAvailable = () => {
+  try {
+    const test = "__storage_test__";
+    localStorage.setItem(test, test);
+    localStorage.removeItem(test);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var IndexedDBStore = class {
+  constructor() {
+    __publicField(this, "db", null);
+  }
+  async init() {
+    if (typeof window === "undefined" || !window.indexedDB) {
+      throw new Error("IndexedDB not available");
+    }
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(config.dbName, 1);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve();
+      };
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        if (!db.objectStoreNames.contains(config.storeName)) {
+          db.createObjectStore(config.storeName, { keyPath: "key" });
+        }
+      };
+    });
+  }
+  async get(key) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readonly");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.get(key);
+      request.onsuccess = () => resolve(request.result?.value);
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async set(key, value) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.put({ key, value });
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async remove(key) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.delete(key);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async clear() {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.clear();
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+};
+var indexedDBStore = new IndexedDBStore();
+var setPreference = (key, value) => {
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      localStorage.setItem(getStorageKey(key), JSON.stringify(value));
+    }
+  } catch (error) {
+    console.warn(`Failed to set preference "${key}":`, error);
+  }
+};
+
+// src/components/navbar/Navbar.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var NAVBAR_COLLAPSED_WIDTH = 64;
+var NAVBAR_EXPANDED_WIDTH = 226;
+var NAVBAR_COLLAPSE_BREAKPOINT = 210;
+var NAVBAR_MIN_PERSIST_WIDTH = 211;
+var Navbar = ({
+  sidebarWidth,
+  onRequestWidthChange,
+  preferredWidth,
+  className,
+  children
+}) => {
+  const isCollapsed = sidebarWidth < NAVBAR_COLLAPSE_BREAKPOINT;
+  const toggle = React.useCallback(() => {
+    const newCollapsed = !isCollapsed;
+    const newWidth = newCollapsed ? NAVBAR_COLLAPSED_WIDTH : preferredWidth || NAVBAR_EXPANDED_WIDTH;
+    setPreference("layout.leftSidebarCollapsed", newCollapsed);
+    onRequestWidthChange(newWidth);
+  }, [isCollapsed, onRequestWidthChange, preferredWidth]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "nav",
+    {
+      className: clsx_default(
+        "navbar",
+        isCollapsed && "navbar--collapsed",
+        className
+      ),
+      "data-collapsed": isCollapsed || void 0,
+      children: typeof children === "function" ? children({
+        collapsed: isCollapsed,
+        toggle,
+        width: sidebarWidth
+      }) : children
+    }
+  );
+};
+
+// src/components/navbar/NavbarMenuItem.tsx
+var React5 = __toESM(require("react"));
+
+// src/components/icons/icons.tsx
+var import_react = require("@iconify/react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Icon = ({ name, size = 24, className, loading = false, ...rest }) => {
+  const iconName = name.includes(":") ? name : `heroicons:${name}`;
+  const classes = ["icon", className].filter(Boolean).join(" ");
+  if (loading) {
+    const style = { width: size, height: size };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "span",
+      {
+        className: `${classes} icon--skeleton`,
+        style,
+        "aria-hidden": rest["aria-label"] ? "false" : "true",
+        ...rest["aria-label"] ? { "aria-label": rest["aria-label"] } : {}
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react.Icon,
+    {
+      icon: iconName,
+      width: size,
+      height: size,
+      className: classes,
+      ...rest
+    }
+  );
+};
+
+// src/components/icons/iconConstants.ts
+var NAVIGATION_ICONS = {
+  home: "home-solid",
+  dashboard: "squares-2x2-solid",
+  profile: "user-solid",
+  settings: "cog-solid",
+  logout: "arrow-right-on-rectangle-solid",
+  login: "arrow-left-on-rectangle-solid",
+  notifications: "bell-solid",
+  messages: "chat-bubble-left-solid",
+  help: "question-mark-circle-solid",
+  support: "lifebuoy-solid",
+  chevronDown: "chevron-down-solid",
+  chevronUp: "chevron-up-solid",
+  chevronLeft: "chevron-left-solid",
+  chevronRight: "chevron-right-solid"
+};
+
+// src/components/tooltip/tooltip.tsx
+var React2 = __toESM(require("react"));
+var ReactDOM = __toESM(require("react-dom"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Tooltip = ({
+  content,
+  children,
+  placement = "top",
+  delay = 0,
+  disabled = false
+}) => {
+  const [isVisible, setIsVisible] = React2.useState(false);
+  const [tooltipStyle, setTooltipStyle] = React2.useState({});
+  const [resolvedPlacement, setResolvedPlacement] = React2.useState(placement);
+  const triggerRef = React2.useRef(null);
+  const tooltipRef = React2.useRef(null);
+  const timeoutRef = React2.useRef();
+  React2.useEffect(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const updatePosition = () => {
+      if (!triggerRef.current || !tooltipRef.current) {
+        return;
+      }
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      if (tooltipRect.width === 0 || tooltipRect.height === 0) {
+        setTimeout(updatePosition, 10);
+        return;
+      }
+      const gap = 8;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+      let finalPlacement = placement;
+      if (placement === "right" && spaceRight < tooltipRect.width + gap) {
+        finalPlacement = spaceLeft >= tooltipRect.width + gap ? "left" : "bottom";
+      } else if (placement === "left" && spaceLeft < tooltipRect.width + gap) {
+        finalPlacement = spaceRight >= tooltipRect.width + gap ? "right" : "bottom";
+      } else if (placement === "bottom" && spaceBottom < tooltipRect.height + gap) {
+        finalPlacement = spaceTop >= tooltipRect.height + gap ? "top" : "bottom";
+      } else if (placement === "top" && spaceTop < tooltipRect.height + gap) {
+        finalPlacement = spaceBottom >= tooltipRect.height + gap ? "bottom" : "top";
+      }
+      setResolvedPlacement(finalPlacement);
+      const newStyle = {
+        position: "fixed",
+        zIndex: 1e4,
+        opacity: 1,
+        visibility: "visible",
+        pointerEvents: "auto"
+      };
+      switch (finalPlacement) {
+        case "right":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.right + gap;
+          break;
+        case "left":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.left - tooltipRect.width - gap;
+          break;
+        case "top":
+          newStyle.top = triggerRect.top - tooltipRect.height - gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+          break;
+        case "bottom":
+        default:
+          newStyle.top = triggerRect.bottom + gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+      }
+      if (newStyle.left < 0) {
+        newStyle.left = 0;
+      } else if (newStyle.left + tooltipRect.width > viewportWidth) {
+        newStyle.left = viewportWidth - tooltipRect.width;
+      }
+      if (newStyle.top < 0) {
+        newStyle.top = 0;
+      } else if (newStyle.top + tooltipRect.height > viewportHeight) {
+        newStyle.top = viewportHeight - tooltipRect.height;
+      }
+      setTooltipStyle(newStyle);
+    };
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isVisible, placement]);
+  const handleMouseEnter = () => {
+    if (disabled) return;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(false);
+    }, 150);
+  };
+  const handleClick = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+  const childElement = React2.Children.only(children);
+  const childWithHandlers = React2.cloneElement(childElement, {
+    ref: triggerRef,
+    onMouseEnter: (e) => {
+      childElement.props?.onMouseEnter?.(e);
+      handleMouseEnter();
+    },
+    onMouseLeave: (e) => {
+      childElement.props?.onMouseLeave?.(e);
+      handleMouseLeave();
+    },
+    onClick: (e) => {
+      childElement.props?.onClick?.(e);
+      handleClick();
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    childWithHandlers,
+    isVisible && !disabled && ReactDOM.createPortal(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          ref: tooltipRef,
+          className: `tooltip tooltip--${resolvedPlacement}`,
+          style: {
+            ...tooltipStyle,
+            // Start with opacity 0 and visibility hidden to prevent initial flash
+            opacity: tooltipStyle.top !== void 0 ? 1 : 0,
+            visibility: tooltipStyle.top !== void 0 ? "visible" : "hidden"
+          },
+          onMouseEnter: () => {
+            if (timeoutRef.current) {
+              clearTimeout(timeoutRef.current);
+            }
+          },
+          onMouseLeave: handleMouseLeave,
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tooltip__content", children: content })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+// src/components/button/button.tsx
+var import_react2 = __toESM(require("react"));
+var import_react3 = require("@ariakit/react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Button = import_react2.default.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    children,
+    isLoading = false,
+    disabled = false,
+    fullWidth = false,
+    startIcon,
+    endIcon,
+    iconOnly = false,
+    href,
+    active = false,
+    className,
+    onClick,
+    ...props
+  }, ref) => {
+    const buttonClasses = [
+      "btn",
+      `btn--${variant}`,
+      `btn--${size}`,
+      fullWidth && "btn--full-width",
+      iconOnly && "btn--icon-only",
+      active && "btn--active",
+      className
+    ].filter(Boolean).join(" ");
+    const iconSize = size === "xs" ? 14 : size === "sm" ? 16 : size === "lg" ? 24 : 20;
+    const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "btn__spinner" }),
+      startIcon && (isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "btn__icon-placeholder", style: { width: iconSize, height: iconSize } }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: startIcon, size: iconSize, className: "btn__icon" })),
+      !iconOnly && children,
+      endIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: endIcon, size: iconSize, className: "btn__icon" })
+    ] });
+    const handleClick = (e) => {
+      if (href && !isLoading && !disabled) {
+        window.location.href = href;
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_react3.Button,
+      {
+        ref,
+        disabled: disabled || isLoading,
+        className: buttonClasses,
+        onClick: handleClick,
+        ...props,
+        children: buttonContent
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/contexts/NavbarTooltipContext.tsx
+var React4 = __toESM(require("react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var NavbarTooltipContext = React4.createContext(void 0);
+var useNavbarTooltip = () => {
+  const context = React4.useContext(NavbarTooltipContext);
+  if (!context) {
+    throw new Error("useNavbarTooltip must be used within a NavbarTooltipProvider");
+  }
+  return context;
+};
+
+// src/components/navbar/NavbarMenuItem.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var NavbarMenuItem = ({
+  icon,
+  iconColor,
+  iconClassName,
+  active = false,
+  children,
+  className = "",
+  as: Component = "button",
+  isCollapsed = false,
+  showTooltipWhenCollapsed = false,
+  insidePopover = false,
+  ...props
+}) => {
+  const { hasOpenPopover } = useNavbarTooltip();
+  const classes = [
+    "navbar__menu-item",
+    active && "navbar__menu-item--active",
+    className
+  ].filter(Boolean).join(" ");
+  const renderIcon = () => {
+    if (!icon) return null;
+    const iconWrapperClasses = [
+      "navbar__menu-item-icon",
+      iconClassName
+    ].filter(Boolean).join(" ");
+    const iconStyle = iconColor ? { color: iconColor } : {};
+    if (React5.isValidElement(icon)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: iconWrapperClasses, style: iconStyle, children: React5.cloneElement(icon, {
+        size: icon.props.size || 24
+      }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: iconWrapperClasses, style: iconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: icon, size: 24 }) });
+  };
+  const menuItem = isCollapsed && !insidePopover ? (() => {
+    let iconName;
+    if (typeof icon === "string") {
+      iconName = icon;
+    } else if (React5.isValidElement(icon) && icon.props?.name) {
+      iconName = icon.props.name;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      Button,
+      {
+        variant: active ? "primary" : "ghost",
+        active,
+        iconOnly: true,
+        startIcon: iconName,
+        ...props
+      }
+    );
+  })() : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    Component,
+    {
+      className: classes,
+      type: Component === "button" ? "button" : void 0,
+      ...props,
+      children: [
+        renderIcon(),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "navbar__menu-item-label", children })
+      ]
+    }
+  );
+  if (showTooltipWhenCollapsed && isCollapsed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tooltip, { content: typeof children === "string" ? children : "", placement: "right", disabled: hasOpenPopover, children: menuItem });
+  }
+  return menuItem;
+};
+
+// src/components/navbar/NavbarMenuGroup.tsx
+var React7 = __toESM(require("react"));
+
+// src/components/popover/popover.tsx
+var React6 = __toESM(require("react"));
+var ReactDOM2 = __toESM(require("react-dom"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Popover = ({
+  trigger,
+  children,
+  isOpen,
+  onToggle,
+  placement = "bottom",
+  align = "start",
+  offset = 8,
+  flip = true,
+  closeOnEscape = true,
+  closeOnClickOutside = true
+}) => {
+  const [internalOpen, setInternalOpen] = React6.useState(false);
+  const triggerRef = React6.useRef(null);
+  const popoverRef = React6.useRef(null);
+  const [popoverStyle, setPopoverStyle] = React6.useState({});
+  const [resolvedPlacement, setResolvedPlacement] = React6.useState(placement);
+  const isControlled = isOpen !== void 0;
+  const open = isControlled ? isOpen : internalOpen;
+  const toggle = React6.useCallback(() => {
+    if (isControlled) {
+      onToggle?.();
+    } else {
+      setInternalOpen((prev) => !prev);
+    }
+  }, [isControlled, onToggle]);
+  React6.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (closeOnClickOutside && triggerRef.current && !triggerRef.current.contains(event.target) && popoverRef.current && !popoverRef.current.contains(event.target)) {
+        toggle();
+      }
+    };
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open, toggle, closeOnClickOutside]);
+  React6.useEffect(() => {
+    const handleEscapeKey = (event) => {
+      if (closeOnEscape && event.key === "Escape" && open) {
+        toggle();
+      }
+    };
+    if (open) {
+      document.addEventListener("keydown", handleEscapeKey);
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [open, toggle, closeOnEscape]);
+  React6.useEffect(() => {
+    if (!open || !triggerRef.current || !popoverRef.current) {
+      return;
+    }
+    const updatePosition = () => {
+      if (!triggerRef.current || !popoverRef.current) {
+        return;
+      }
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const popoverRect = popoverRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+      let finalPlacement = placement;
+      if (flip) {
+        if (placement === "right" && spaceRight < popoverRect.width + offset) {
+          finalPlacement = spaceLeft >= popoverRect.width + offset ? "left" : "bottom";
+        } else if (placement === "left" && spaceLeft < popoverRect.width + offset) {
+          finalPlacement = spaceRight >= popoverRect.width + offset ? "right" : "bottom";
+        } else if (placement === "bottom" && spaceBottom < popoverRect.height + offset) {
+          finalPlacement = spaceTop >= popoverRect.height + offset ? "top" : "bottom";
+        } else if (placement === "top" && spaceTop < popoverRect.height + offset) {
+          finalPlacement = spaceBottom >= popoverRect.height + offset ? "bottom" : "top";
+        }
+      }
+      setResolvedPlacement(finalPlacement);
+      const newStyle = {
+        position: "fixed",
+        zIndex: "var(--z-popover)",
+        opacity: 1,
+        visibility: "visible",
+        pointerEvents: "auto"
+      };
+      const getAlignmentOffset = () => {
+        let alignmentOffset = 0;
+        if (finalPlacement === "left" || finalPlacement === "right") {
+          switch (align) {
+            case "center":
+              alignmentOffset = (triggerRect.height - popoverRect.height) / 2;
+              break;
+            case "end":
+              alignmentOffset = triggerRect.height - popoverRect.height;
+              break;
+            case "start":
+            default:
+              alignmentOffset = 0;
+          }
+        } else {
+          switch (align) {
+            case "center":
+              alignmentOffset = (triggerRect.width - popoverRect.width) / 2;
+              break;
+            case "end":
+              alignmentOffset = triggerRect.width - popoverRect.width;
+              break;
+            case "start":
+            default:
+              alignmentOffset = 0;
+          }
+        }
+        return alignmentOffset;
+      };
+      switch (finalPlacement) {
+        case "right":
+          newStyle.top = triggerRect.top + getAlignmentOffset();
+          newStyle.left = triggerRect.right + offset;
+          break;
+        case "left":
+          newStyle.top = triggerRect.top + getAlignmentOffset();
+          newStyle.left = triggerRect.left - popoverRect.width - offset;
+          break;
+        case "top":
+          newStyle.top = triggerRect.top - popoverRect.height - offset;
+          newStyle.left = triggerRect.left + getAlignmentOffset();
+          break;
+        case "bottom":
+        default:
+          newStyle.top = triggerRect.bottom + offset;
+          newStyle.left = triggerRect.left + getAlignmentOffset();
+      }
+      if (typeof newStyle.left === "number") {
+        if (newStyle.left + popoverRect.width > viewportWidth - offset) {
+          newStyle.left = viewportWidth - popoverRect.width - offset;
+        }
+        if (newStyle.left < offset) {
+          newStyle.left = offset;
+        }
+      }
+      if (typeof newStyle.top === "number") {
+        if (newStyle.top + popoverRect.height > viewportHeight - offset) {
+          newStyle.top = viewportHeight - popoverRect.height - offset;
+        }
+        if (newStyle.top < offset) {
+          newStyle.top = offset;
+        }
+      }
+      setPopoverStyle(newStyle);
+    };
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [open, placement, align, offset, flip]);
+  const handleTriggerClick = React6.useCallback(() => {
+    toggle();
+  }, [toggle]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleTriggerClick,
+        style: { display: "inline-block", position: "relative" },
+        children: React6.isValidElement(trigger) ? React6.cloneElement(trigger, {
+          onClick: (e) => {
+            e.stopPropagation();
+            handleTriggerClick();
+            trigger.props?.onClick?.(e);
+          }
+        }) : trigger
+      }
+    ),
+    open && ReactDOM2.createPortal(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        {
+          ref: popoverRef,
+          className: `popover popover--${resolvedPlacement}`,
+          style: {
+            ...popoverStyle,
+            // Start with opacity 0 and visibility hidden to prevent initial flash
+            opacity: popoverStyle.top !== void 0 ? 1 : 0,
+            visibility: popoverStyle.top !== void 0 ? "visible" : "hidden"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "popover__content", children })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+// src/components/navbar/NavbarMenuGroup.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var NavbarMenuGroup = ({
+  title,
+  icon,
+  children,
+  defaultExpanded = false,
+  autoExpand = false,
+  expandable = true,
+  isCollapsed = false,
+  maxItemsPerColumn = 8
+}) => {
+  const [expanded, setExpanded] = React7.useState(defaultExpanded);
+  const [userInteracted, setUserInteracted] = React7.useState(false);
+  const { openPopover, closePopover, activePopoverId } = useNavbarTooltip();
+  const groupId = React7.useMemo(() => `menu-group-${title.replace(/\s+/g, "-").toLowerCase()}`, [title]);
+  const popoverOpen = activePopoverId === groupId;
+  const triggerRef = React7.useRef(null);
+  const popoverContentRef = React7.useRef(null);
+  React7.useEffect(() => {
+    if (popoverOpen && popoverContentRef.current) {
+      setTimeout(() => {
+        const firstFocusable = popoverContentRef.current?.querySelector(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        firstFocusable?.focus();
+      }, 10);
+    }
+  }, [popoverOpen]);
+  const findNextFocusableElement = React7.useCallback((currentElement) => {
+    const navbar = currentElement.closest(".navbar");
+    if (!navbar) return null;
+    const focusableElements = navbar.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    const rootFocusableElements = Array.from(focusableElements).filter((el) => {
+      return !el.closest(".popover");
+    });
+    const currentIndex = rootFocusableElements.indexOf(currentElement);
+    if (currentIndex >= 0 && currentIndex < rootFocusableElements.length - 1) {
+      return rootFocusableElements[currentIndex + 1];
+    }
+    return null;
+  }, []);
+  const handleKeyDown = React7.useCallback((event) => {
+    if (event.key === "Tab" && !event.shiftKey) {
+      if (popoverContentRef.current) {
+        const focusableElements = popoverContentRef.current.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        const currentElement = event.target;
+        const currentIndex = Array.from(focusableElements).indexOf(currentElement);
+        if (currentIndex >= 0 && currentIndex === focusableElements.length - 1) {
+          event.preventDefault();
+          const nextElement = findNextFocusableElement(currentElement);
+          if (nextElement) {
+            nextElement.focus();
+          } else {
+            closePopover(groupId);
+            triggerRef.current?.focus();
+          }
+        }
+      }
+    } else if (event.key === "Tab" && event.shiftKey) {
+      if (popoverContentRef.current) {
+        const focusableElements = popoverContentRef.current.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        const currentElement = event.target;
+        const currentIndex = Array.from(focusableElements).indexOf(currentElement);
+        if (currentIndex === 0) {
+          event.preventDefault();
+          triggerRef.current?.focus();
+        }
+      }
+    } else if (event.key === "Escape") {
+      closePopover(groupId);
+      setTimeout(() => {
+        triggerRef.current?.focus();
+      }, 10);
+    }
+  }, [closePopover, groupId, findNextFocusableElement]);
+  const hasActiveItem = React7.useMemo(() => {
+    const checkForActiveItems = (children2) => {
+      return React7.Children.toArray(children2).some((child) => {
+        if (React7.isValidElement(child)) {
+          if (child.props && child.props.active === true) {
+            return true;
+          }
+          if (child.props && child.props.children) {
+            return checkForActiveItems(child.props.children);
+          }
+        }
+        return false;
+      });
+    };
+    return checkForActiveItems(children);
+  }, [children]);
+  React7.useEffect(() => {
+    if (autoExpand && hasActiveItem && !userInteracted) {
+      setExpanded(true);
+    }
+  }, [autoExpand, hasActiveItem, userInteracted]);
+  const toggleExpanded = () => {
+    setUserInteracted(true);
+    setExpanded(!expanded);
+  };
+  const childrenArray = React7.Children.toArray(children);
+  const columns = [];
+  for (let i = 0; i < childrenArray.length; i += maxItemsPerColumn) {
+    columns.push(childrenArray.slice(i, i + maxItemsPerColumn));
+  }
+  const popoverContent = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "navbar__menu-group-popover", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "navbar__menu-group-popover-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        className: "navbar__menu-group-popover-content",
+        ref: popoverContentRef,
+        onKeyDown: handleKeyDown,
+        onClick: () => {
+          setTimeout(() => {
+            closePopover(groupId);
+          }, 0);
+        },
+        children: columns.map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "navbar__menu-group-popover-column", children: column.map((child, itemIndex) => {
+          if (React7.isValidElement(child)) {
+            return React7.cloneElement(child, {
+              key: itemIndex,
+              insidePopover: true,
+              onKeyDown: (e) => {
+                child.props.onKeyDown?.(e);
+                handleKeyDown(e);
+              }
+            });
+          }
+          return child;
+        }) }, columnIndex))
+      }
+    )
+  ] });
+  const expandedHeader = !expandable ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "navbar__menu-group-header navbar__menu-group-header--static", children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "navbar__menu-group-icon", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: icon, size: 16 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "navbar__menu-group-title", children: title })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "button",
+    {
+      className: `navbar__menu-group-header ${!expanded && hasActiveItem ? "navbar__menu-group-header--active" : ""}`,
+      onClick: toggleExpanded,
+      "aria-expanded": expanded,
+      "aria-controls": `menu-group-${title.replace(/\s+/g, "-").toLowerCase()}`,
+      type: "button",
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "navbar__menu-group-icon", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: icon, size: 24 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "navbar__menu-group-title", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `navbar__menu-group-chevron ${expanded ? "navbar__menu-group-chevron--expanded" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: NAVIGATION_ICONS.chevronDown, size: 16 }) })
+      ]
+    }
+  );
+  const collapsedHeader = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Popover,
+    {
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip, { content: title, placement: "right", disabled: popoverOpen, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        Button,
+        {
+          ref: triggerRef,
+          variant: popoverOpen ? "secondary" : hasActiveItem ? "primary" : "ghost",
+          active: hasActiveItem && !popoverOpen,
+          iconOnly: true,
+          startIcon: icon,
+          "aria-label": title,
+          "aria-haspopup": "menu",
+          "aria-expanded": popoverOpen,
+          onMouseEnter: () => {
+            if (activePopoverId && activePopoverId !== groupId) {
+              openPopover(groupId);
+            }
+          },
+          onKeyDown: (event) => {
+            if (event.key === "Tab" && !event.shiftKey && popoverOpen) {
+              event.preventDefault();
+              const firstFocusable = popoverContentRef.current?.querySelector(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+              );
+              firstFocusable?.focus();
+            }
+          }
+        }
+      ) }),
+      isOpen: popoverOpen,
+      onToggle: () => {
+        if (popoverOpen) {
+          closePopover(groupId);
+        } else {
+          openPopover(groupId);
+        }
+      },
+      placement: "right",
+      children: popoverContent
+    }
+  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "navbar__menu-group", children: [
+    isCollapsed ? collapsedHeader : expandedHeader,
+    !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        className: `navbar__menu-group-content ${expandable && expanded ? "navbar__menu-group-content--expanded" : ""}`,
+        id: `menu-group-${title.replace(/\s+/g, "-").toLowerCase()}`,
+        "aria-hidden": !expandable || !expanded,
+        children
+      }
+    )
+  ] });
+};
+
+// src/components/navbar/NavbarMenuCategory.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var NavbarMenuCategory = ({
+  title,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "navbar__menu-category", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "navbar__menu-category-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "navbar__menu-category-content", children })
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NAVBAR_COLLAPSED_WIDTH,
+  NAVBAR_COLLAPSE_BREAKPOINT,
+  NAVBAR_EXPANDED_WIDTH,
+  NAVBAR_MIN_PERSIST_WIDTH,
+  Navbar,
+  NavbarMenuCategory,
+  NavbarMenuGroup,
+  NavbarMenuItem
+});