@opengovsg/oui 0.0.0-snapshot-20251203100754 → 0.0.0-snapshot-20260126025301

package/dist/esm/avatar/hooks/use-img-loading-status.js

@@ -0,0 +1,66 @@
+"use strict";
+import { useRef, useState, useLayoutEffect, useSyncExternalStore } from 'react';
+
+function useIsHydrated() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+function subscribe() {
+  return () => {
+  };
+}
+function resolveLoadingStatus(image, src) {
+  if (!image) {
+    return "idle";
+  }
+  if (!src) {
+    return "error";
+  }
+  if (image.src !== src) {
+    image.src = src;
+  }
+  return image.complete && image.naturalWidth > 0 ? "loaded" : "loading";
+}
+function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
+  const isHydrated = useIsHydrated();
+  const imageRef = useRef(null);
+  const image = (() => {
+    if (!isHydrated) return null;
+    if (!imageRef.current) {
+      imageRef.current = new window.Image();
+    }
+    return imageRef.current;
+  })();
+  const [loadingStatus, setLoadingStatus] = useState(
+    () => resolveLoadingStatus(image, src)
+  );
+  useLayoutEffect(() => {
+    setLoadingStatus(resolveLoadingStatus(image, src));
+  }, [image, src]);
+  useLayoutEffect(() => {
+    const updateStatus = (status) => () => {
+      setLoadingStatus(status);
+    };
+    if (!image) return;
+    const handleLoad = updateStatus("loaded");
+    const handleError = updateStatus("error");
+    image.addEventListener("load", handleLoad);
+    image.addEventListener("error", handleError);
+    if (referrerPolicy) {
+      image.referrerPolicy = referrerPolicy;
+    }
+    if (typeof crossOrigin === "string") {
+      image.crossOrigin = crossOrigin;
+    }
+    return () => {
+      image.removeEventListener("load", handleLoad);
+      image.removeEventListener("error", handleError);
+    };
+  }, [image, crossOrigin, referrerPolicy]);
+  return loadingStatus;
+}
+
+export { useImageLoadingStatus };

package/dist/esm/avatar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { AvatarRoot, AvatarFallback, AvatarImage } from './avatar.js';
+export { AvatarContext, useAvatarContext } from './avatar-context.js';
+export { AvatarGroup } from './avatar-group.js';
+export { AvatarGroupProvider, useAvatarGroup } from './avatar-group-context.js';
+
+const Avatar = Object.assign(AvatarRoot, {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback
+});
+
+export { Avatar, AvatarFallback, AvatarImage, AvatarRoot };

package/dist/esm/avatar/utils.js

@@ -0,0 +1,7 @@
+"use strict";
+const getInitialsFromText = (text, limit = 2) => {
+  const initials = text?.trim().split(/[\s\-_.]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase()).join("") || "";
+  return initials.slice(0, limit);
+};
+
+export { getInitialsFromText };

package/dist/esm/badge/badge.js

@@ -3,7 +3,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { useBadge } from './use-badge.js';
-import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.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 Badge = forwardRef((props, ref) => {
   const {

package/dist/esm/banner/banner.js

@@ -5,10 +5,10 @@ import { useMemo, useRef } from 'react';
 import { useMessageFormatter, useDisclosure } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
 import { bannerStyles } from '@opengovsg/oui-theme';
-import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
-import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/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.0.0/node_modules/lucide-react/dist/esm/icons/x.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 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 = {
   "en-SG": {

package/dist/esm/button/button.js

@@ -1,6 +1,6 @@
 "use strict";
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { chain } from '@react-aria/utils';
 import { Button as Button$1, composeRenderProps } from 'react-aria-components';
@@ -8,6 +8,7 @@ import { buttonStyles } from '@opengovsg/oui-theme';
 import { Ripple } from '../ripple/ripple.js';
 import { useRipple } from '../ripple/use-ripple.js';
 import { Spinner } from '../spinner/spinner.js';
+import { renderChildren } from '../system/react-utils/children.js';
 
 const Button = forwardRef(
   ({
@@ -21,6 +22,7 @@ const Button = forwardRef(
     size = "md",
     spinnerPlacement = "start",
     loadingText,
+    pendingElement,
     onPress,
     children,
     disableRipple,
@@ -47,7 +49,7 @@ const Button = forwardRef(
       const spinnerSize = buttonSpinnerSizeMap[size];
       return /* @__PURE__ */ jsx(Spinner, { size: spinnerSize });
     }, [size, spinnerProp]);
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(
       Button$1,
       {
         ...props,
@@ -68,15 +70,16 @@ const Button = forwardRef(
         isPending,
         onPress: chain(onPress, onPressRipple),
         ref,
-        children: [
-          startContent,
-          isPending && spinnerPlacement === "start" ? spinner : null,
-          isPending ? null : children,
+        children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderChildren(renderProps, startContent),
+          isPending && spinnerPlacement === "start" ? renderChildren(renderProps, spinner) : null,
+          isPending ? null : renderChildren(renderProps, children),
           isPending && loadingText ? loadingText : null,
-          isPending && spinnerPlacement === "end" ? spinner : null,
-          endContent,
+          isPending && pendingElement ? renderChildren(renderProps, pendingElement) : null,
+          isPending && spinnerPlacement === "end" ? renderChildren(renderProps, spinner) : null,
+          renderChildren(renderProps, endContent),
           !disableRipple && /* @__PURE__ */ jsx(Ripple, { onClear: onClearRipple, ripples })
-        ]
+        ] })
       }
     );
   }

package/dist/esm/calendar/calendar-header.js

@@ -8,8 +8,8 @@ import { AgnosticCalendarStateContext } from './agnostic-calendar-state-context.
 import { CalendarMonthDaySelector } from './calendar-month-day-selector.js';
 import { useCalendarStyleContext } from './calendar-style-context.js';
 import { useLocalizedMonthYear } from './utils.js';
-import ChevronRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.js';
-import ChevronLeft from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-left.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 ChevronLeft from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevron-left.js';
 
 function CalendarHeader({ offsetMonths = 0 }) {
   const { direction } = useLocale();

package/dist/esm/checkbox/checkbox.js

@@ -6,8 +6,8 @@ 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.0.0/node_modules/lucide-react/dist/esm/icons/minus.js';
-import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.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';
 
 const Checkbox = ({
   classNames,
@@ -18,8 +18,8 @@ const Checkbox = ({
     originalProps,
     checkboxStyles.variantKeys
   );
-  const { size } = useCheckboxGroupStyleContext();
-  const styles = checkboxStyles({ size, ...variants });
+  const context = useCheckboxGroupStyleContext();
+  const styles = checkboxStyles({ size: context?.size, ...variants });
   return /* @__PURE__ */ jsx(
     Checkbox$1,
     {

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

@@ -9,9 +9,9 @@ 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 ChevronUp from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.js';
-import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
-import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.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';
 
 const calculateEstimatedRowHeight = (size) => {
   switch (size) {

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 Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
-import { Calendar as Calendar$1 } from '../calendar/calendar.js';
-import { Button } from '../button/button.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';
 
 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.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
-import { Button } from '../button/button.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';
 
 function DateRangePicker(originalProps) {
   const [

package/dist/esm/field/field.js

@@ -4,7 +4,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { Label as Label$1, Text, FieldError as FieldError$1, Group } from 'react-aria-components';
 import { labelStyles, descriptionStyles, fieldErrorStyles, composeRenderProps, fieldGroupStyles } from '@opengovsg/oui-theme';
-import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.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';
 
 function Label({ size, className, ...props }) {
   return /* @__PURE__ */ jsx(Label$1, { ...props, className: labelStyles({ className, size }) });

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

@@ -13,7 +13,7 @@ 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.0.0/node_modules/lucide-react/dist/esm/icons/upload.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';
 
 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.0.0/node_modules/lucide-react/dist/esm/icons/trash-2.js';
-import { Button } from '../button/button.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';
 
 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/govt-banner/govt-banner.js

@@ -5,10 +5,10 @@ import { useRef } from 'react';
 import { useDisclosure, useButton, useFocusRing, mergeProps } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
 import { govtBannerStyles, dataAttr, twMerge } from '@opengovsg/oui-theme';
-import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
-import Landmark from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/landmark.js';
-import ExternalLink from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/external-link.js';
-import Lock from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/lock.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 Landmark from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/landmark.js';
+import ExternalLink from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/external-link.js';
+import Lock from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/lock.js';
 
 function GovtBanner({
   environment,

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';
@@ -17,11 +18,17 @@ 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';
@@ -46,10 +53,20 @@ export { ModalFooter } from './modal/modal-footer.js';
 export { ModalBody } from './modal/modal-body.js';
 export { ModalHeader } from './modal/modal-header.js';
 export { ModalVariantContext, useModalVariantContext } from './modal/modal-variant-context.js';
-export { Button } from './button/button.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 { 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 { Avatar } from './avatar/index.js';
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionStyleContext, useAccordionStyleContext } from './accordion/accordion.js';
+export { toast } from 'sonner';
+export { AvatarContext, useAvatarContext } from './avatar/avatar-context.js';
+export { AvatarGroup } from './avatar/avatar-group.js';
+export { AvatarGroupProvider, useAvatarGroup } from './avatar/avatar-group-context.js';
+export { AvatarFallback, AvatarImage, AvatarRoot } from './avatar/avatar.js';

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 Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
-import ChevronRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.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';
 
 const [MenuVariantContext, useMenuVariantContext] = createContext({
   name: "MenuVariantContext",

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.0.0/node_modules/lucide-react/dist/esm/icons/x.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';
 
 function ModalContent({
   closeButtonContent: closeButtonContentProp,

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 };