@opengovsg/oui 0.0.29 → 0.0.30

package/dist/cjs/navbar/use-navbar.cjs

@@ -6,24 +6,30 @@ var $670gB$react = require('react');
 var usePreventScroll = require('../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.cjs');
 var utils$2 = require('@react-aria/utils');
 var utils$1 = require('@react-stately/utils');
-var useDeepCompare = require('use-deep-compare');
 var ouiTheme = require('@opengovsg/oui-theme');
+var useScrollPosition = require('../hooks/use-scroll-position.cjs');
 var utils = require('../system/utils.cjs');
 var refs = require('../system/react-utils/refs.cjs');
 
+const NAVBAR_PRESENCE_BUFFER = 10;
 function useNavbar(originalProps) {
   const [
     {
       ref,
       as,
+      parentRef,
       height = "4rem",
       shouldBlockScroll = true,
+      shouldShowOnScrollUp = false,
+      disableScrollHandler = false,
+      onScrollPositionChange,
       isMenuOpen: isMenuOpenProp,
       isMenuDefaultOpen,
       onMenuOpenChange = () => {
       },
       className,
       classNames,
+      motionProps,
       ...otherProps
     },
     variantProps
@@ -31,62 +37,62 @@ function useNavbar(originalProps) {
   const Component = as || "nav";
   const domRef = refs.useDomRef(ref);
   const menuRef = $670gB$react.useRef(null);
-  const prevWidth = $670gB$react.useRef(0);
-  const navHeight = $670gB$react.useRef(0);
   const handleMenuOpenChange = $670gB$react.useCallback(
     (isOpen) => {
       onMenuOpenChange(isOpen || false);
     },
     [onMenuOpenChange]
   );
+  const [menuTopOffset, setMenuOffset] = $670gB$react.useState(0);
+  const [isNavbarHidden, setIsNavbarHidden] = $670gB$react.useState(false);
   const [isMenuOpen, setIsMenuOpen] = utils$1.useControlledState(
     isMenuOpenProp,
     isMenuDefaultOpen ?? false,
     handleMenuOpenChange
   );
-  const updateWidth = $670gB$react.useCallback(() => {
-    if (domRef.current) {
-      const width = domRef.current.offsetWidth;
-      if (width !== prevWidth.current) {
-        prevWidth.current = width;
-      }
-    }
-  }, [domRef]);
   usePreventScroll.usePreventScroll({
     isDisabled: !(shouldBlockScroll && isMenuOpen)
   });
   utils$2.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);
-      }
+      setMenuOffset(domRef.current?.getBoundingClientRect().top || 0);
     }
   });
+  const truePosition = variantProps.position ?? "sticky";
+  const positionVariantProp = shouldShowOnScrollUp ? "sticky" : truePosition;
+  const slots = ouiTheme.navbarStyles({
+    ...variantProps,
+    position: positionVariantProp
+  });
+  const baseStyles = ouiTheme.cn(classNames?.base, className);
+  const navHeight = $670gB$react.useRef(0);
   $670gB$react.useEffect(() => {
-    updateWidth();
     navHeight.current = domRef.current?.offsetHeight || 0;
-  }, [domRef, updateWidth]);
-  const slots = useDeepCompare.useDeepCompareMemo(
-    () => ouiTheme.navbarStyles({
-      ...variantProps
-    }),
-    [variantProps]
-  );
-  const baseStyles = ouiTheme.cn(classNames?.base, className);
+  }, [domRef]);
+  useScrollPosition.useScrollPosition({
+    elementRef: parentRef,
+    isEnabled: shouldShowOnScrollUp || !disableScrollHandler,
+    callback: ({ prevPos, currPos }) => {
+      onScrollPositionChange?.(currPos.y);
+      if (shouldShowOnScrollUp) {
+        setIsNavbarHidden((prev) => {
+          const next = currPos.y > prevPos.y + NAVBAR_PRESENCE_BUFFER && currPos.y > navHeight.current;
+          return next !== prev ? next : prev;
+        });
+      }
+    }
+  });
+  const heightPx = typeof height === "number" ? `${height}px` : height;
+  const menuTopOffsetPx = `calc(${heightPx} + ${menuTopOffset}px)`;
   const getBaseProps = (props = {}) => ({
     ...utils$2.mergeProps(otherProps, props),
+    "data-hidden": ouiTheme.dataAttr(isNavbarHidden),
     "data-menu-open": ouiTheme.dataAttr(isMenuOpen),
     ref: domRef,
     className: slots.base({ class: ouiTheme.cn(baseStyles, props?.className) }),
     style: {
-      "--navbar-height": typeof height === "number" ? `${height}px` : height,
+      "--navbar-height": heightPx,
       ...otherProps?.style,
       ...props?.style
     }
@@ -102,14 +108,18 @@ function useNavbar(originalProps) {
     Component,
     slots,
     domRef,
-    height,
+    menuTopOffset,
+    menuTopOffsetPx,
+    isNavbarHidden,
+    shouldShowOnScrollUp: shouldShowOnScrollUp && truePosition === "static",
     isMenuOpen,
     classNames,
     setIsMenuOpen,
     menuRef,
     getBaseProps,
     getWrapperProps,
-    position: variantProps.position ?? "sticky"
+    position: positionVariantProp,
+    motionProps
   };
 }
 

package/dist/cjs/number-field/number-field.cjs

@@ -5,12 +5,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
+var field = require('../field/field.cjs');
 var input = require('../input/input.cjs');
 var utils = require('../system/utils.cjs');
 var minus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minus.cjs');
 var plus = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/plus.cjs');
-var field = require('../field/field.cjs');
-var button = require('../button/button.cjs');
 
 function NumberField(originalProps) {
   const [

package/dist/cjs/range-calendar/range-calendar.cjs

@@ -8,12 +8,12 @@ var date = require('@internationalized/date');
 var reactAriaComponents = require('react-aria-components');
 var useDeepCompare = require('use-deep-compare');
 var ouiTheme = require('@opengovsg/oui-theme');
+var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
 var agnosticCalendarStateContext = require('../calendar/agnostic-calendar-state-context.cjs');
 var calendarBottomContent = require('../calendar/calendar-bottom-content.cjs');
 var calendarGridHeader = require('../calendar/calendar-grid-header.cjs');
 var calendarHeader = require('../calendar/calendar-header.cjs');
 var utils = require('../system/utils.cjs');
-var calendarStyleContext = require('../calendar/calendar-style-context.cjs');
 
 const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalProps, ref) {
   const [props, variantProps] = utils.mapPropsVariants(

package/dist/cjs/select/select.cjs

@@ -6,12 +6,12 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var button = require('../button/button.cjs');
+var field = require('../field/field.cjs');
 var popover = require('../popover/popover.cjs');
 var utils = require('../system/utils.cjs');
 var selectVariantContext = require('./select-variant-context.cjs');
-var field = require('../field/field.cjs');
 var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
-var button = require('../button/button.cjs');
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {

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

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
+var field = require('../field/field.cjs');
 var input = require('../input/input.cjs');
 var popover = require('../popover/popover.cjs');
 var tagFieldItem = require('./tag-field-item.cjs');
@@ -14,7 +15,6 @@ var tagFieldRoot = require('./tag-field-root.cjs');
 var tagFieldTagList = require('./tag-field-tag-list.cjs');
 var tagFieldTrigger = require('./tag-field-trigger.cjs');
 var chevronDown = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
-var field = require('../field/field.cjs');
 
 function TagField({
   classNames,

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

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var textArea = require('../text-area/text-area.cjs');
 var field = require('../field/field.cjs');
+var textArea = require('../text-area/text-area.cjs');
 
 function TextAreaField({
   label,

package/dist/cjs/text-field/text-field.cjs

@@ -5,8 +5,8 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var input = require('../input/input.cjs');
 var field = require('../field/field.cjs');
+var input = require('../input/input.cjs');
 
 function TextField({
   label,

package/dist/esm/banner/banner.js

@@ -5,9 +5,9 @@ import { useMemo, useRef } from 'react';
 import { useMessageFormatter, useDisclosure } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
 import { bannerStyles } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
 import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
 import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/info.js';
-import { Button } from '../button/button.js';
 import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js';
 
 const i18nStrings = {

package/dist/esm/checkbox/checkbox.js

@@ -3,11 +3,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Checkbox as Checkbox$1, composeRenderProps, Provider, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
 import { checkboxStyles, checkboxGroupStyles } from '@opengovsg/oui-theme';
+import { Label, Description, FieldError } from '../field/field.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { useCheckboxGroupStyleContext, CheckboxGroupStyleContext } from './checkbox-group-style-context.js';
 import Minus from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/minus.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 { Label, Description, FieldError } from '../field/field.js';
 
 const Checkbox = ({
   classNames,

package/dist/esm/combo-box/combo-box.js

@@ -5,10 +5,10 @@ import { useMemo, useCallback } from 'react';
 import { useMessageFormatter } from 'react-aria';
 import { ListLayout, Provider, ComboBox as ComboBox$1, Input, Button, Virtualizer, ListBox } from 'react-aria-components';
 import { listBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { ComboBoxVariantContext } from './combo-box-variant-context.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import ChevronUp from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-up.js';
 import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
 import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js';

package/dist/esm/date-field/date-field.js

@@ -4,8 +4,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { DateField as DateField$1, DateInput as DateInput$1, DateSegment } from 'react-aria-components';
 import { dateFieldStyles, composeTailwindRenderProps, dateInputStyles, composeRenderProps } from '@opengovsg/oui-theme';
-import { mapPropsVariants } from '../system/utils.js';
 import { Label, Description, FieldError } from '../field/field.js';
+import { mapPropsVariants } from '../system/utils.js';
 
 function DateField(originalProps) {
   const [

package/dist/esm/date-picker/date-picker.js

@@ -4,13 +4,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { DatePicker as DatePicker$1, Dialog } from 'react-aria-components';
 import { datePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
+import { Calendar as Calendar$1 } from '../calendar/calendar.js';
+import '@internationalized/date';
+import { DateInput } from '../date-field/date-field.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
 import { mapPropsVariants } from '../system/utils.js';
-import { DateInput } from '../date-field/date-field.js';
 import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/calendar.js';
-import { Calendar as Calendar$1 } from '../calendar/calendar.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { Button } from '../button/button.js';
 
 function DatePicker(originalProps) {
   const [

package/dist/esm/date-range-picker/date-range-picker.js

@@ -5,13 +5,13 @@ import { useMemo } from 'react';
 import { CalendarDate } from '@internationalized/date';
 import { DateRangePicker as DateRangePicker$1, Dialog } from 'react-aria-components';
 import { dateRangePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
+import { DateInput } from '../date-field/date-field.js';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
 import { Popover } from '../popover/popover.js';
 import { RangeCalendar } from '../range-calendar/range-calendar.js';
 import { mapPropsVariants } from '../system/utils.js';
 import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/calendar.js';
-import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
-import { DateInput } from '../date-field/date-field.js';
-import { Button } from '../button/button.js';
 
 function DateRangePicker(originalProps) {
   const [

package/dist/esm/file-dropzone/file-dropzone.js

@@ -7,13 +7,13 @@ import { useField, useId } from 'react-aria';
 import { Provider, LabelContext, GroupContext, TextContext, FieldErrorContext, Group } from 'react-aria-components';
 import { useDropzone } from 'react-dropzone';
 import { fileDropzoneStyles, dataAttr } from '@opengovsg/oui-theme';
+import { Label, Description, FieldError } from '../field/field.js';
 import { useControllableState } from '../hooks/use-controllable-state.js';
 import { mapPropsVariants } from '../system/utils.js';
 import { FileDropzoneStyleContext, FileDropzoneStateContext, useFileDropzoneStateContext, useFileDropzoneStyleContext } from './contexts.js';
 import { FileInfo } from './file-info.js';
 import { formatErrorMessage, formatBytes } from './utils.js';
 import Upload from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/upload.js';
-import { Label, Description, FieldError } from '../field/field.js';
 
 const FileDropzone = (originalProps) => {
   const [props, variantProps] = mapPropsVariants(
@@ -23,6 +23,7 @@ const FileDropzone = (originalProps) => {
   const {
     name,
     allowedMimeTypes = [],
+    fileSizeBase = "binary",
     maxFileSize = Number.POSITIVE_INFINITY,
     minFileSize = 0,
     showFileSizeText = true,
@@ -67,9 +68,10 @@ const FileDropzone = (originalProps) => {
     (error) => formatErrorMessage(error, {
       maxFileSize,
       minFileSize,
-      maxFiles
+      maxFiles,
+      fileSizeBase
     }),
-    [maxFileSize, maxFiles, minFileSize]
+    [fileSizeBase, maxFileSize, maxFiles, minFileSize]
   );
   const onDrop = useCallback(
     (acceptedFiles, fileRejections) => {
@@ -127,19 +129,20 @@ const FileDropzone = (originalProps) => {
     const shouldShow = showFileSizeText && (notDefaultMaxFileSize || notDefaultMinFileSize);
     if (!shouldShow) return null;
     if (notDefaultMaxFileSize && notDefaultMinFileSize) {
-      return `File size must be between ${formatBytes(minFileSize, 2)} and ${formatBytes(
+      return `File size must be between ${formatBytes(minFileSize, 2, fileSizeBase)} and ${formatBytes(
         maxFileSize,
-        2
+        2,
+        fileSizeBase
       )}`;
     }
     if (notDefaultMaxFileSize) {
-      return `Maximum file size: ${formatBytes(maxFileSize, 2)}`;
+      return `Maximum file size: ${formatBytes(maxFileSize, 2, fileSizeBase)}`;
     }
     if (notDefaultMinFileSize) {
-      return `Minimum file size: ${formatBytes(minFileSize, 2)}`;
+      return `Minimum file size: ${formatBytes(minFileSize, 2, fileSizeBase)}`;
     }
     return null;
-  }, [maxFileSize, minFileSize, showFileSizeText]);
+  }, [maxFileSize, minFileSize, showFileSizeText, fileSizeBase]);
   const triggerFileSelector = useCallback(() => {
     if (isDisabled || isReadOnly) return;
     dropzoneState.inputRef.current?.click();
@@ -185,6 +188,7 @@ const FileDropzone = (originalProps) => {
           {
             isDisabled,
             isReadOnly,
+            fileSizeBase,
             maxFiles,
             maxFileSize,
             showDropzone,

package/dist/esm/file-dropzone/file-info.js

@@ -3,10 +3,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { fileInfoDropzoneStyles, cn } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
 import { useFileDropzoneStateContext, useFileDropzoneStyleContext } from './contexts.js';
 import { formatBytes } from './utils.js';
 import Trash2 from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/trash-2.js';
-import { Button } from '../button/button.js';
 
 const FileInfo = ({ file, imagePreview, classNames }) => {
   const {
@@ -17,7 +17,8 @@ const FileInfo = ({ file, imagePreview, classNames }) => {
     isReadOnly
   } = useFileDropzoneStateContext();
   const { size, variant, itemClassNames } = useFileDropzoneStyleContext();
-  const readableFileSize = formatBytes(file.size, 2);
+  const { fileSizeBase } = useFileDropzoneStateContext();
+  const readableFileSize = formatBytes(file.size, 2, fileSizeBase);
   const styles = fileInfoDropzoneStyles({
     size,
     variant,

package/dist/esm/file-dropzone/utils.js

@@ -1,8 +1,8 @@
 "use strict";
 import { ErrorCode } from 'react-dropzone';
 
-const formatBytes = (bytes, decimals = 2, size) => {
-  const k = 1e3;
+const formatBytes = (bytes, decimals = 2, base = "binary", size) => {
+  const k = base === "binary" ? 1024 : 1e3;
   const dm = decimals < 0 ? 0 : decimals;
   const sizes = ["bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
   if (bytes === 0 || bytes === void 0)
@@ -14,9 +14,9 @@ const formatErrorMessage = (error, config) => {
   const { maxFileSize, minFileSize, maxFiles } = config;
   switch (error.code) {
     case ErrorCode.FileTooLarge:
-      return `You have exceeded the size limit, please upload a file below ${formatBytes(maxFileSize, 2)}`;
+      return `You have exceeded the size limit, please upload a file below ${formatBytes(maxFileSize, 2, config.fileSizeBase)}`;
     case ErrorCode.FileTooSmall:
-      return `Please upload a file above ${formatBytes(minFileSize, 2)}`;
+      return `Please upload a file above ${formatBytes(minFileSize, 2, config.fileSizeBase)}`;
     case ErrorCode.TooManyFiles:
       return `Maximum number of files allowed is ${maxFiles}.`;
     default: {

package/dist/esm/hooks/use-scroll-position.js

@@ -0,0 +1,51 @@
+"use strict";
+import { useRef, useCallback, useEffect } from 'react';
+
+const isBrowser = typeof window !== "undefined";
+function getScrollPosition(element) {
+  if (!isBrowser) return { x: 0, y: 0 };
+  if (!element) {
+    return { x: window.scrollX, y: window.scrollY };
+  }
+  return { x: element.scrollLeft, y: element.scrollTop };
+}
+const useScrollPosition = (props) => {
+  const { elementRef, delay = 30, callback, isEnabled } = props;
+  const position = useRef(
+    isEnabled ? getScrollPosition(elementRef?.current) : { x: 0, y: 0 }
+  );
+  const throttleTimeout = useRef(null);
+  const handler = useCallback(() => {
+    const currPos = getScrollPosition(elementRef?.current);
+    if (typeof callback === "function") {
+      callback({ prevPos: position.current, currPos });
+    }
+    position.current = currPos;
+    throttleTimeout.current = null;
+  }, [callback, elementRef]);
+  useEffect(() => {
+    if (!isEnabled) return;
+    const handleScroll = () => {
+      if (delay) {
+        if (throttleTimeout.current) {
+          clearTimeout(throttleTimeout.current);
+        }
+        throttleTimeout.current = setTimeout(handler, delay);
+      } else {
+        handler();
+      }
+    };
+    const target = elementRef?.current || window;
+    target.addEventListener("scroll", handleScroll);
+    return () => {
+      target.removeEventListener("scroll", handleScroll);
+      if (throttleTimeout.current) {
+        clearTimeout(throttleTimeout.current);
+        throttleTimeout.current = null;
+      }
+    };
+  }, [elementRef?.current, delay, handler, isEnabled]);
+  return position.current;
+};
+
+export { useScrollPosition };

package/dist/esm/index.js

@@ -1,6 +1,7 @@
 "use strict";
 export { useControllableState } from './hooks/use-controllable-state.js';
 export { useDraggable } from './hooks/use-draggable.js';
+export { Button } from './button/button.js';
 export { GovtBanner } from './govt-banner/govt-banner.js';
 export { Ripple } from './ripple/ripple.js';
 export { useRipple } from './ripple/use-ripple.js';
@@ -10,17 +11,33 @@ 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 { Description, FieldError, FieldErrorIcon, FieldGroup, Label } from './field/field.js';
 export { TextArea } from './text-area/text-area.js';
 export { TextAreaField } from './text-area-field/text-area-field.js';
+export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
+export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
+export { ComboBoxItem } from './combo-box/combo-box-item.js';
+export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
+export { Banner } from './banner/banner.js';
 export { TagField } from './tag-field/tag-field.js';
 export { TagFieldItem } from './tag-field/tag-field-item.js';
 export { Select } from './select/select.js';
 export { SelectItem } from './select/select-item.js';
 export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
+export { Badge } from './badge/badge.js';
+export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
+export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
+export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
+export { CalendarDate } from '@internationalized/date';
 export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
 export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
 export { Popover } from './popover/popover.js';
 export { Tab, TabList, TabPanel, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
+export { DateField, DateInput } from './date-field/date-field.js';
+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 { Pagination } from './pagination/pagination.js';
 export { PaginationCursor } from './pagination/pagination-cursor.js';
 export { PaginationItem } from './pagination/pagination-item.js';
@@ -46,21 +63,4 @@ 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 { 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';
-export { ComboBoxItem } from './combo-box/combo-box-item.js';
-export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
-export { Banner } from './banner/banner.js';
-export { Badge } from './badge/badge.js';
-export { CalendarDate } from '@internationalized/date';
-export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
-export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
-export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
-export { DateField, DateInput } from './date-field/date-field.js';
-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 { toast } from 'sonner';

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

@@ -5,10 +5,10 @@ import { useContext, isValidElement } from 'react';
 import { useMessageFormatter } from 'react-aria';
 import { Dialog } from 'react-aria-components';
 import { cn } from '@opengovsg/oui-theme';
+import { Button } from '../button/button.js';
 import { i18nStrings } from './i18n.js';
 import { ModalVariantContext } from './modal-variant-context.js';
 import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/x.js';
-import { Button } from '../button/button.js';
 
 function ModalContent({
   closeButtonContent: closeButtonContentProp,

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

@@ -14,7 +14,7 @@ const NavbarMenu = forwardRef(
     const {
       slots,
       isMenuOpen,
-      height,
+      menuTopOffsetPx,
       classNames,
       setIsMenuOpen,
       domRef: parentRef,
@@ -44,7 +44,7 @@ const NavbarMenu = forwardRef(
             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
+              "--menu-offset": menuTopOffsetPx
             },
             onKeyDown: chain(handleKeyDown, onKeyDown),
             ...props,

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

@@ -24,13 +24,14 @@ const NavbarMenuToggle = ({
     isMenuOpen,
     setIsMenuOpen,
     menuRef,
-    position
+    position,
+    menuTopOffset
   } = useNavbarContext();
   const shouldScrollToTop = (isMenuOpen2) => {
     if (!isMenuOpen2 || position === "sticky" || typeof window === "undefined") {
       return;
     }
-    window.scrollTo({ top: 0, behavior: "instant" });
+    window.scrollTo({ top: menuTopOffset, behavior: "instant" });
   };
   const formatMessage = useMessageFormatter(i18nStrings);
   const toggleStyles = useMemo(() => {

package/dist/esm/navbar/navbar.js

@@ -1,13 +1,28 @@
 "use strict";
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { FocusScope } from 'react-aria';
+import { LazyMotion, domAnimation, m } from 'motion/react';
+import { FocusScope, mergeProps } 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 showOnScrollUpVariants = {
+  visible: {
+    y: 0,
+    transition: {
+      ease: [0, 0, 0.2, 1]
+    }
+  },
+  hidden: {
+    y: "-100%",
+    transition: {
+      ease: [0, 0, 0.2, 1]
+    }
+  }
+};
 const Navbar = forwardRef((props, ref) => {
   const { children, ...otherProps } = props;
   const context = useNavbar({ ...otherProps, ref });
@@ -17,7 +32,16 @@ const Navbar = forwardRef((props, ref) => {
     /* @__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 }) }) });
+  return /* @__PURE__ */ jsx(NavbarProvider, { value: context, children: /* @__PURE__ */ jsx(FocusScope, { contain: context.isMenuOpen, children: context.shouldShowOnScrollUp ? /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(
+    m.nav,
+    {
+      animate: context.isNavbarHidden ? "hidden" : "visible",
+      initial: "visible",
+      variants: showOnScrollUpVariants,
+      ...mergeProps(context.getBaseProps(), context.motionProps),
+      children: content
+    }
+  ) }) : /* @__PURE__ */ jsx(Component, { ...context.getBaseProps(), children: content }) }) });
 });
 Navbar.displayName = "Navbar";