@opengovsg/oui 0.0.27 → 0.0.29

package/dist/cjs/tag-field/use-tag-field-state.cjs

@@ -1,14 +1,14 @@
 "use strict";
 'use strict';
 
-var react = require('react');
+var $670gB$react = require('react');
 var form = require('@react-stately/form');
 var utils = require('@react-stately/utils');
 var useControllableState = require('../hooks/use-controllable-state.cjs');
 
 function useTagFieldState(props) {
   const { itemToText, itemToKey, defaultFilter } = props;
-  const itemsByKey = react.useMemo(() => {
+  const itemsByKey = $670gB$react.useMemo(() => {
     const items = props.items ?? props.defaultItems ?? [];
     return items.reduce(
       (acc, item) => {
@@ -18,7 +18,7 @@ function useTagFieldState(props) {
       {}
     ) ?? {};
   }, [itemToKey, props.defaultItems, props.items]);
-  const getSelectedItemsByKey = react.useCallback(
+  const getSelectedItemsByKey = $670gB$react.useCallback(
     (keys) => {
       if (!keys) return;
       return [...keys].map((key) => itemsByKey[key]);
@@ -36,13 +36,13 @@ function useTagFieldState(props) {
     defaultInputValue,
     props.onInputChange
   );
-  const controlledSelectedKeys = react.useMemo(
+  const controlledSelectedKeys = $670gB$react.useMemo(
     () => new Set(selectedItems.map(itemToKey)),
     [itemToKey, selectedItems]
   );
   const validation = form.useFormValidationState({
     ...props,
-    value: react.useMemo(
+    value: $670gB$react.useMemo(
       () => ({
         inputValue,
         selectedKeys: controlledSelectedKeys
@@ -50,7 +50,7 @@ function useTagFieldState(props) {
       [controlledSelectedKeys, inputValue]
     )
   });
-  const filteredItems = react.useMemo(
+  const filteredItems = $670gB$react.useMemo(
     () => (
       // No default filter if items are controlled.
       !!props.items || !defaultFilter ? props.items ?? [] : filterItems({

package/dist/cjs/tag-field/use-tag-field.cjs

@@ -1,7 +1,7 @@
 "use strict";
 'use strict';
 
-var react = require('react');
+var $670gB$react = require('react');
 var utils = require('@react-aria/utils');
 var reactVirtual = require('@tanstack/react-virtual');
 var downshift = require('downshift');
@@ -23,7 +23,7 @@ function useTagField(props, state) {
     label,
     virtualRowHeight = 40
   } = props;
-  const backupBtnRef = react.useRef(null);
+  const backupBtnRef = $670gB$react.useRef(null);
   buttonRef = buttonRef ?? backupBtnRef;
   const {
     selectedItems,
@@ -48,14 +48,14 @@ function useTagField(props, state) {
       }
     }
   });
-  const disabledKeysSet = react.useMemo(() => {
+  const disabledKeysSet = $670gB$react.useMemo(() => {
     return new Set(disabledKeys);
   }, [disabledKeys]);
   const rowVirtualizer = reactVirtual.useVirtualizer({
     count: items.length,
     getScrollElement: () => listBoxRef.current,
     estimateSize: () => virtualRowHeight,
-    getItemKey: react.useCallback(
+    getItemKey: $670gB$react.useCallback(
       (index) => itemToKey(items[index]),
       [itemToKey, items]
     ),

package/dist/cjs/text-area/text-area.cjs

@@ -3,11 +3,11 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
 
-const TextArea = react.forwardRef(
+const TextArea = $670gB$react.forwardRef(
   ({ size, variant, isDisabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       reactAriaComponents.TextArea,

package/dist/cjs/toast/toast.cjs

@@ -18,6 +18,7 @@ function Toaster(originalProps) {
       className: styles.base({
         className: props.className ?? props.classNames?.base
       }),
+      position: "top-center",
       icons: {
         loading: /* @__PURE__ */ jsxRuntime.jsx(spinner.Spinner, { size: "xs" }),
         close: /* @__PURE__ */ jsxRuntime.jsx(x.default, {})

package/dist/cjs/toggle/toggle.cjs

@@ -3,7 +3,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
@@ -21,12 +21,12 @@ const Toggle = ({
     ouiTheme.toggleStyles.variantKeys
   );
   const slots = ouiTheme.toggleStyles(variantProps);
-  const clonedThumbIcon = react.useCallback(
+  const clonedThumbIcon = $670gB$react.useCallback(
     (renderProps) => {
       const baseProps = {
         className: slots.thumbIcon({ className: classNames?.thumbIcon })
       };
-      return typeof thumbIcon === "function" ? thumbIcon(reactAria.mergeProps(baseProps, renderProps)) : thumbIcon && react.cloneElement(thumbIcon, baseProps);
+      return typeof thumbIcon === "function" ? thumbIcon(reactAria.mergeProps(baseProps, renderProps)) : thumbIcon && $670gB$react.cloneElement(thumbIcon, baseProps);
     },
     [classNames?.thumbIcon, slots, thumbIcon]
   );

package/dist/esm/index.js

@@ -1,12 +1,14 @@
 "use strict";
 export { useControllableState } from './hooks/use-controllable-state.js';
 export { useDraggable } from './hooks/use-draggable.js';
+export { GovtBanner } from './govt-banner/govt-banner.js';
 export { Ripple } from './ripple/ripple.js';
 export { useRipple } from './ripple/use-ripple.js';
 export { Spinner } from './spinner/spinner.js';
 export { useSpinner } from './spinner/use-spinner.js';
 export { Toggle } from './toggle/toggle.js';
 export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
+export { Input } from './input/input.js';
 export { TextField } from './text-field/text-field.js';
 export { TextArea } from './text-area/text-area.js';
 export { TextAreaField } from './text-area-field/text-area-field.js';
@@ -24,6 +26,9 @@ export { PaginationCursor } from './pagination/pagination-cursor.js';
 export { PaginationItem } from './pagination/pagination-item.js';
 export { PaginationItemType } from './pagination/hooks/use-pagination.js';
 export { CURSOR_TRANSITION_TIMEOUT, usePagination } from './pagination/use-pagination.js';
+export { FileDropzone } from './file-dropzone/file-dropzone.js';
+export { FileInfo } from './file-dropzone/file-info.js';
+export { formatBytes, formatErrorMessage } from './file-dropzone/utils.js';
 export { NumberField } from './number-field/number-field.js';
 export { Modal } from './modal/modal.js';
 export { ModalContent } from './modal/modal-content.js';
@@ -32,9 +37,16 @@ export { ModalBody } from './modal/modal-body.js';
 export { ModalHeader } from './modal/modal-header.js';
 export { ModalVariantContext, useModalVariantContext } from './modal/modal-variant-context.js';
 export { Toaster } from './toast/toast.js';
+export { Navbar } from './navbar/navbar.js';
+export { NavbarBrand } from './navbar/navbar-brand.js';
+export { NavbarContent } from './navbar/navbar-content.js';
+export { NavbarMenu } from './navbar/navbar-menu/menu.js';
+export { NavbarMenuItem } from './navbar/navbar-menu/item.js';
+export { NavbarMenuToggle } from './navbar/navbar-menu/toggle.js';
+export { NavbarItem } from './navbar/navbar-item.js';
+export { useNavbar } from './navbar/use-navbar.js';
+export { NavbarProvider, useNavbarContext } from './navbar/navbar-context.js';
 export { Button } from './button/button.js';
-export { GovtBanner } from './govt-banner/govt-banner.js';
-export { Input } from './input/input.js';
 export { Description, FieldError, FieldErrorIcon, FieldGroup, Label } from './field/field.js';
 export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
 export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
@@ -51,7 +63,4 @@ export { DatePicker } from './date-picker/date-picker.js';
 export { DateRangePicker } from './date-range-picker/date-range-picker.js';
 export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
 export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
-export { FileDropzone } from './file-dropzone/file-dropzone.js';
-export { FileInfo } from './file-dropzone/file-info.js';
-export { formatBytes, formatErrorMessage } from './file-dropzone/utils.js';
 export { toast } from 'sonner';

package/dist/esm/menu/menu.js

@@ -6,9 +6,9 @@ import { useContextProps, MenuItem as MenuItem$1, composeRenderProps, Provider,
 import { listBoxItemStyles, menuItemStyles, menuStyles, menuSectionStyles, menuDividerStyles } from '@opengovsg/oui-theme';
 import { Popover } from '../popover/popover.js';
 import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
+import { createContext } from '../system/react-utils/context.js';
 import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/check.js';
 import ChevronRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-right.js';
-import { createContext } from '../system/react-utils/context.js';
 
 const [MenuVariantContext, useMenuVariantContext] = createContext({
   name: "MenuVariantContext",

package/dist/esm/navbar/index.js

@@ -0,0 +1,10 @@
+"use strict";
+export { Navbar } from './navbar.js';
+export { NavbarBrand } from './navbar-brand.js';
+export { NavbarContent } from './navbar-content.js';
+export { NavbarMenu } from './navbar-menu/menu.js';
+export { NavbarMenuItem } from './navbar-menu/item.js';
+export { NavbarMenuToggle } from './navbar-menu/toggle.js';
+export { NavbarItem } from './navbar-item.js';
+export { useNavbar } from './use-navbar.js';
+export { NavbarProvider, useNavbarContext } from './navbar-context.js';

package/dist/esm/navbar/navbar-brand.js

@@ -0,0 +1,26 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '@opengovsg/oui-theme';
+import { forwardRef } from '../system/utils.js';
+import { useNavbarContext } from './navbar-context.js';
+import { useDomRef } from '../system/react-utils/refs.js';
+
+const NavbarBrand = forwardRef((props, ref) => {
+  const { as, className, children, ...otherProps } = props;
+  const Component = as || "div";
+  const domRef = useDomRef(ref);
+  const { slots, classNames } = useNavbarContext();
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: domRef,
+      className: slots.brand?.({ className: cn(classNames?.brand, className) }),
+      ...otherProps,
+      children
+    }
+  );
+});
+NavbarBrand.displayName = "NavbarBrand";
+
+export { NavbarBrand };

package/dist/esm/navbar/navbar-content.js

@@ -0,0 +1,31 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '@opengovsg/oui-theme';
+import { forwardRef } from '../system/utils.js';
+import { useNavbarContext } from './navbar-context.js';
+import { useDomRef } from '../system/react-utils/refs.js';
+
+const NavbarContent = forwardRef(
+  (props, ref) => {
+    const { as, className, children, justify = "start", ...otherProps } = props;
+    const Component = as || "div";
+    const domRef = useDomRef(ref);
+    const { slots, classNames } = useNavbarContext();
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref: domRef,
+        className: slots.content?.({
+          className: cn(classNames?.content, className)
+        }),
+        "data-justify": justify,
+        ...otherProps,
+        children
+      }
+    );
+  }
+);
+NavbarContent.displayName = "NavbarContent";
+
+export { NavbarContent };

package/dist/esm/navbar/navbar-context.js

@@ -0,0 +1,11 @@
+"use strict";
+"use client";
+import { createContext } from '../system/react-utils/context.js';
+
+const [NavbarProvider, useNavbarContext] = createContext({
+  name: "NavbarContext",
+  strict: true,
+  errorMessage: "useNavbarContext: `context` is undefined. Seems you forgot to wrap component within <Navbar />"
+});
+
+export { NavbarProvider, useNavbarContext };

package/dist/esm/navbar/navbar-item.js

@@ -0,0 +1,27 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { dataAttr, cn } from '@opengovsg/oui-theme';
+import { forwardRef } from '../system/utils.js';
+import { useNavbarContext } from './navbar-context.js';
+import { useDomRef } from '../system/react-utils/refs.js';
+
+const NavbarItem = forwardRef((props, ref) => {
+  const { as, className, children, isActive, ...otherProps } = props;
+  const Component = as || "div";
+  const domRef = useDomRef(ref);
+  const { slots, classNames } = useNavbarContext();
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref: domRef,
+      className: slots.item({ className: cn(classNames?.item, className) }),
+      "data-active": dataAttr(isActive),
+      ...otherProps,
+      children
+    }
+  );
+});
+NavbarItem.displayName = "NavbarItem";
+
+export { NavbarItem };

package/dist/esm/navbar/navbar-menu/i18n.js

@@ -0,0 +1,21 @@
+"use strict";
+const i18nStrings = {
+  "en-SG": {
+    openMenu: "Open navigation menu",
+    closeMenu: "Close navigation menu"
+  },
+  "zh-SG": {
+    openMenu: "\u6253\u5F00\u5BFC\u822A\u83DC\u5355",
+    closeMenu: "\u5173\u95ED\u5BFC\u822A\u83DC\u5355"
+  },
+  "ms-SG": {
+    openMenu: "Buka menu navigasi",
+    closeMenu: "Tutup menu navigasi"
+  },
+  "ta-SG": {
+    openMenu: "\u0BA8\u0BC7\u0BB5\u0BBF\u0B95\u0BC7\u0BB7\u0BA9\u0BCD \u0BAE\u0BC6\u0BA9\u0BC1\u0BB5\u0BC8\u0BA4\u0BCD \u0BA4\u0BBF\u0BB1",
+    closeMenu: "\u0BA8\u0BC7\u0BB5\u0BBF\u0B95\u0BC7\u0BB7\u0BA9\u0BCD \u0BAE\u0BC6\u0BA9\u0BC1\u0BB5\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1"
+  }
+};
+
+export { i18nStrings };

package/dist/esm/navbar/navbar-menu/item.js

@@ -0,0 +1,42 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRenderProps, composeRenderProps } from 'react-aria-components';
+import { navbarMenuItemStyles, cn, dataAttr } from '@opengovsg/oui-theme';
+import { forwardRef } from '../../system/utils.js';
+import { useNavbarContext } from '../navbar-context.js';
+import { useDomRef } from '../../system/react-utils/refs.js';
+
+const NavbarMenuItem = forwardRef(
+  (props, ref) => {
+    const { className, children, isActive, ...otherProps } = props;
+    const domRef = useDomRef(ref);
+    const { isMenuOpen, classNames } = useNavbarContext();
+    const renderProps = useRenderProps({
+      className: composeRenderProps(
+        className,
+        (className2, renderProps2) => navbarMenuItemStyles({
+          className: cn(classNames?.menuItem, className2),
+          ...renderProps2
+        })
+      ),
+      values: {
+        isActive: !!isActive
+      }
+    });
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref: domRef,
+        className: renderProps.className,
+        "data-active": dataAttr(isActive),
+        "data-open": dataAttr(isMenuOpen),
+        ...otherProps,
+        children
+      }
+    );
+  }
+);
+NavbarMenuItem.displayName = "NavbarMenuItem";
+
+export { NavbarMenuItem };

package/dist/esm/navbar/navbar-menu/menu.js

@@ -0,0 +1,60 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Overlay as $337b884510726a0d$export$c6fdb837b070b4ff } from '../../node_modules/.pnpm/@react-aria_overlays@3.30.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/Overlay.js';
+import { chain } from 'react-aria';
+import { dataAttr, cn } from '@opengovsg/oui-theme';
+import { forwardRef } from '../../system/utils.js';
+import { useNavbarContext } from '../navbar-context.js';
+import { useDomRef } from '../../system/react-utils/refs.js';
+
+const NavbarMenu = forwardRef(
+  ({ className, children, portalContainer, style, onKeyDown, ...props }, ref) => {
+    const domRef = useDomRef(ref);
+    const {
+      slots,
+      isMenuOpen,
+      height,
+      classNames,
+      setIsMenuOpen,
+      domRef: parentRef,
+      menuRef
+    } = useNavbarContext();
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        setIsMenuOpen(false);
+        menuRef.current?.focus();
+      }
+    };
+    if (!isMenuOpen) return null;
+    return /* @__PURE__ */ jsx(
+      $337b884510726a0d$export$c6fdb837b070b4ff,
+      {
+        disableFocusManagement: true,
+        portalContainer: portalContainer ?? parentRef.current ?? void 0,
+        children: /* @__PURE__ */ jsx(
+          "ul",
+          {
+            ref: domRef,
+            className: slots.menu?.({
+              className: cn(classNames?.menu, className)
+            }),
+            "data-open": dataAttr(isMenuOpen),
+            style: {
+              ...style,
+              // @ts-expect-error due to not having any type declaration for CSS variables in React style prop
+              "--navbar-height": typeof height === "number" ? `${height}px` : height
+            },
+            onKeyDown: chain(handleKeyDown, onKeyDown),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+NavbarMenu.displayName = "NavbarMenu";
+
+export { NavbarMenu };

package/dist/esm/navbar/navbar-menu/toggle.js

@@ -0,0 +1,92 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { useMessageFormatter, chain } from 'react-aria';
+import { ToggleButton } from 'react-aria-components';
+import { buttonStyles, cn, dataAttr } from '@opengovsg/oui-theme';
+import { useNavbarContext } from '../navbar-context.js';
+import { i18nStrings } from './i18n.js';
+
+const NavbarMenuToggle = ({
+  icon,
+  className,
+  onChange,
+  classNames,
+  size = "sm",
+  radius,
+  isIconOnly = true,
+  ...props
+}) => {
+  const {
+    slots,
+    classNames: contextClassNames,
+    isMenuOpen,
+    setIsMenuOpen,
+    menuRef,
+    position
+  } = useNavbarContext();
+  const shouldScrollToTop = (isMenuOpen2) => {
+    if (!isMenuOpen2 || position === "sticky" || typeof window === "undefined") {
+      return;
+    }
+    window.scrollTo({ top: 0, behavior: "instant" });
+  };
+  const formatMessage = useMessageFormatter(i18nStrings);
+  const toggleStyles = useMemo(() => {
+    return buttonStyles({
+      variant: "unstyled",
+      size,
+      radius,
+      isIconOnly,
+      className: slots.toggle({
+        className: cn(
+          contextClassNames?.toggle,
+          className ?? classNames?.toggle
+        )
+      })
+    });
+  }, [
+    className,
+    classNames?.toggle,
+    contextClassNames?.toggle,
+    isIconOnly,
+    radius,
+    size,
+    slots
+  ]);
+  const child = useMemo(() => {
+    if (typeof icon === "function") {
+      return icon(isMenuOpen ?? false);
+    }
+    return icon || /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: slots.toggleIcon({
+          class: cn(contextClassNames?.toggleIcon, classNames?.toggleIcon)
+        })
+      }
+    );
+  }, [
+    icon,
+    slots,
+    classNames?.toggleIcon,
+    contextClassNames?.toggleIcon,
+    isMenuOpen
+  ]);
+  return /* @__PURE__ */ jsx(
+    ToggleButton,
+    {
+      "aria-label": isMenuOpen ? formatMessage("closeMenu") : formatMessage("openMenu"),
+      ref: menuRef,
+      "data-open": dataAttr(isMenuOpen),
+      className: toggleStyles,
+      isSelected: isMenuOpen,
+      onChange: chain(onChange, shouldScrollToTop, setIsMenuOpen),
+      ...props,
+      children: child
+    }
+  );
+};
+
+export { NavbarMenuToggle };

package/dist/esm/navbar/navbar.js

@@ -0,0 +1,24 @@
+"use strict";
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { FocusScope } from 'react-aria';
+import { pickChildren } from '../system/react-utils/children.js';
+import { forwardRef } from '../system/utils.js';
+import { NavbarProvider } from './navbar-context.js';
+import { NavbarMenu } from './navbar-menu/menu.js';
+import { useNavbar } from './use-navbar.js';
+
+const Navbar = forwardRef((props, ref) => {
+  const { children, ...otherProps } = props;
+  const context = useNavbar({ ...otherProps, ref });
+  const Component = context.Component;
+  const [childrenWithoutMenu, menu] = pickChildren(children, NavbarMenu);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("header", { ...context.getWrapperProps(), children: childrenWithoutMenu }),
+    menu
+  ] });
+  return /* @__PURE__ */ jsx(NavbarProvider, { value: context, children: /* @__PURE__ */ jsx(FocusScope, { contain: context.isMenuOpen, children: /* @__PURE__ */ jsx(Component, { ...context.getBaseProps(), children: content }) }) });
+});
+Navbar.displayName = "Navbar";
+
+export { Navbar };

package/dist/esm/navbar/use-navbar.js

@@ -0,0 +1,114 @@
+"use strict";
+"use client";
+import { useRef, useCallback, useEffect } from 'react';
+import { usePreventScroll as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18 } from '../node_modules/.pnpm/@react-aria_overlays@3.30.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/usePreventScroll.js';
+import { useResizeObserver, mergeProps } from '@react-aria/utils';
+import { useControlledState } from '@react-stately/utils';
+import { useDeepCompareMemo } from 'use-deep-compare';
+import { navbarStyles, cn, dataAttr } from '@opengovsg/oui-theme';
+import { mapPropsVariants } from '../system/utils.js';
+import { useDomRef } from '../system/react-utils/refs.js';
+
+function useNavbar(originalProps) {
+  const [
+    {
+      ref,
+      as,
+      height = "4rem",
+      shouldBlockScroll = true,
+      isMenuOpen: isMenuOpenProp,
+      isMenuDefaultOpen,
+      onMenuOpenChange = () => {
+      },
+      className,
+      classNames,
+      ...otherProps
+    },
+    variantProps
+  ] = mapPropsVariants(originalProps, navbarStyles.variantKeys);
+  const Component = as || "nav";
+  const domRef = useDomRef(ref);
+  const menuRef = useRef(null);
+  const prevWidth = useRef(0);
+  const navHeight = useRef(0);
+  const handleMenuOpenChange = useCallback(
+    (isOpen) => {
+      onMenuOpenChange(isOpen || false);
+    },
+    [onMenuOpenChange]
+  );
+  const [isMenuOpen, setIsMenuOpen] = useControlledState(
+    isMenuOpenProp,
+    isMenuDefaultOpen ?? false,
+    handleMenuOpenChange
+  );
+  const updateWidth = useCallback(() => {
+    if (domRef.current) {
+      const width = domRef.current.offsetWidth;
+      if (width !== prevWidth.current) {
+        prevWidth.current = width;
+      }
+    }
+  }, [domRef]);
+  $49c51c25361d4cd2$export$ee0f7cc6afcd1c18({
+    isDisabled: !(shouldBlockScroll && isMenuOpen)
+  });
+  useResizeObserver({
+    ref: domRef,
+    onResize: () => {
+      const currentWidth = domRef.current?.offsetWidth;
+      const scrollWidth = window.innerWidth - document.documentElement.clientWidth;
+      if (currentWidth && currentWidth + scrollWidth == prevWidth.current) {
+        return;
+      }
+      if (currentWidth !== prevWidth.current) {
+        updateWidth();
+        setIsMenuOpen(false);
+      }
+    }
+  });
+  useEffect(() => {
+    updateWidth();
+    navHeight.current = domRef.current?.offsetHeight || 0;
+  }, [domRef, updateWidth]);
+  const slots = useDeepCompareMemo(
+    () => navbarStyles({
+      ...variantProps
+    }),
+    [variantProps]
+  );
+  const baseStyles = cn(classNames?.base, className);
+  const getBaseProps = (props = {}) => ({
+    ...mergeProps(otherProps, props),
+    "data-menu-open": dataAttr(isMenuOpen),
+    ref: domRef,
+    className: slots.base({ class: cn(baseStyles, props?.className) }),
+    style: {
+      "--navbar-height": typeof height === "number" ? `${height}px` : height,
+      ...otherProps?.style,
+      ...props?.style
+    }
+  });
+  const getWrapperProps = (props = {}) => ({
+    ...props,
+    "data-menu-open": dataAttr(isMenuOpen),
+    className: slots.wrapper({
+      class: cn(classNames?.wrapper, props?.className)
+    })
+  });
+  return {
+    Component,
+    slots,
+    domRef,
+    height,
+    isMenuOpen,
+    classNames,
+    setIsMenuOpen,
+    menuRef,
+    getBaseProps,
+    getWrapperProps,
+    position: variantProps.position ?? "sticky"
+  };
+}
+
+export { useNavbar };