@opengovsg/oui 0.0.54 → 0.0.56

package/dist/esm/govt-banner/govt-banner.js

@@ -4,7 +4,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 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 { govtBannerStyles, dataAttr } from '@opengovsg/oui-theme';
 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';
@@ -44,7 +44,7 @@ function GovtBanner({
               /* @__PURE__ */ jsxs(
                 "svg",
                 {
-                  className: slots.crest({ className: classNames?.crest }),
+                  className: slots.crest(),
                   version: "1.1",
                   viewBox: "0 0 32 32",
                   xmlns: "http://www.w3.org/2000/svg",
@@ -58,163 +58,83 @@ function GovtBanner({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: slots.mainContent({ className: classNames?.mainContent }),
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: "A Singapore Government Agency Website" }),
-                    environment ? /* @__PURE__ */ jsxs("b", { children: [
-                      "[NOTE: THIS IS A ",
-                      environment.toUpperCase(),
-                      " WEBSITE]"
-                    ] }) : null,
-                    /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        className: slots.identifyButton({
-                          className: classNames?.identifyButton
-                        }),
-                        "data-focus-visible": dataAttr(isFocusVisible),
-                        ref: triggerRef,
-                        type: "button",
-                        ...mergeProps(buttonProps, focusProps),
-                        children: [
-                          /* @__PURE__ */ jsx("span", { className: slots.link({ className: classNames?.link }), children: "How to identify" }),
-                          /* @__PURE__ */ jsx(
-                            ChevronDown,
-                            {
-                              className: slots.chevron({ className: classNames?.chevron })
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { ref: panelRef, ...panelProps, children: /* @__PURE__ */ jsxs("div", { className: slots.panel({ className: classNames?.panel }), children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: slots.panelGroup({
-                className: classNames?.panelGroup
-              }),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Landmark,
-                  {
-                    className: slots.panelIcon({ className: classNames?.panelIcon })
-                  }
-                ),
+              /* @__PURE__ */ jsxs("div", { className: slots.mainContent(), children: [
+                /* @__PURE__ */ jsx("span", { children: "A Singapore Government Agency Website" }),
+                environment ? /* @__PURE__ */ jsxs("b", { children: [
+                  "[NOTE: THIS IS A ",
+                  environment.toUpperCase(),
+                  " WEBSITE]"
+                ] }) : null,
                 /* @__PURE__ */ jsxs(
-                  "div",
+                  "button",
                   {
-                    className: slots.panelSection({
-                      className: classNames?.panelSection
-                    }),
+                    className: slots.identifyButton(),
+                    "data-focus-visible": dataAttr(isFocusVisible),
+                    ref: triggerRef,
+                    type: "button",
+                    ...mergeProps(buttonProps, focusProps),
                     children: [
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: slots.panelHeader({
-                            className: classNames?.panelHeader
-                          }),
-                          children: "Official website links end with .gov.sg"
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs("article", { children: [
-                        "Government agencies communicate via ",
-                        /* @__PURE__ */ jsx("b", { children: ".gov.sg" }),
-                        " websites (e.g. go.gov.sg/open).",
-                        " ",
-                        /* @__PURE__ */ jsxs(
-                          "a",
-                          {
-                            className: slots.link({ className: classNames?.link }),
-                            href: "https://www.gov.sg/trusted-sites#govsites",
-                            rel: "noreferrer",
-                            target: "_blank",
-                            children: [
-                              "Trusted websites",
-                              /* @__PURE__ */ jsx(
-                                ExternalLink,
-                                {
-                                  "aria-hidden": true,
-                                  className: slots.inlineIcon({
-                                    className: twMerge("ml-0.5", classNames?.inlineIcon)
-                                  })
-                                }
-                              )
-                            ]
-                          }
-                        )
-                      ] })
+                      /* @__PURE__ */ jsx("span", { className: slots.link(), children: "How to identify" }),
+                      /* @__PURE__ */ jsx(ChevronDown, { className: slots.chevron() })
                     ]
                   }
                 )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: slots.panelGroup({
-                className: classNames?.panelGroup
-              }),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Lock,
-                  {
-                    className: slots.panelIcon({ className: classNames?.panelIcon })
-                  }
-                ),
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { ref: panelRef, ...panelProps, children: /* @__PURE__ */ jsxs("div", { className: slots.panel(), children: [
+          /* @__PURE__ */ jsxs("div", { className: slots.panelGroup(), children: [
+            /* @__PURE__ */ jsx(Landmark, { className: slots.panelIcon() }),
+            /* @__PURE__ */ jsxs("div", { className: slots.panelSection(), children: [
+              /* @__PURE__ */ jsx("div", { className: slots.panelHeader(), children: "Official website links end with .gov.sg" }),
+              /* @__PURE__ */ jsxs("article", { children: [
+                "Government agencies communicate via ",
+                /* @__PURE__ */ jsx("b", { children: ".gov.sg" }),
+                " websites (e.g. go.gov.sg/open).",
+                " ",
                 /* @__PURE__ */ jsxs(
-                  "div",
+                  "a",
                   {
-                    className: slots.panelSection({
-                      className: classNames?.panelSection
-                    }),
+                    className: slots.link(),
+                    href: "https://www.gov.sg/trusted-sites#govsites",
+                    rel: "noreferrer",
+                    target: "_blank",
                     children: [
+                      "Trusted websites",
                       /* @__PURE__ */ jsx(
-                        "p",
+                        ExternalLink,
                         {
-                          className: slots.panelHeader({
-                            className: classNames?.panelHeader
-                          }),
-                          children: "Secure websites use HTTPS"
+                          "aria-hidden": true,
+                          className: slots.inlineIcon({ className: "ml-0.5" })
                         }
-                      ),
-                      /* @__PURE__ */ jsxs("article", { children: [
-                        "Look for a ",
-                        /* @__PURE__ */ jsx("b", { children: "lock" }),
-                        " ",
-                        /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
-                          "(",
-                          /* @__PURE__ */ jsx(
-                            Lock,
-                            {
-                              className: slots.inlineIcon({
-                                className: classNames?.inlineIcon
-                              })
-                            }
-                          ),
-                          ")"
-                        ] }),
-                        " ",
-                        "or ",
-                        /* @__PURE__ */ jsx("b", { children: "https://" }),
-                        " as an added precaution. Share sensitive information only on official, secure websites."
-                      ] })
+                      )
                     ]
                   }
                 )
-              ]
-            }
-          )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: slots.panelGroup(), children: [
+            /* @__PURE__ */ jsx(Lock, { className: slots.panelIcon() }),
+            /* @__PURE__ */ jsxs("div", { className: slots.panelSection(), children: [
+              /* @__PURE__ */ jsx("p", { className: slots.panelHeader(), children: "Secure websites use HTTPS" }),
+              /* @__PURE__ */ jsxs("article", { children: [
+                "Look for a ",
+                /* @__PURE__ */ jsx("b", { children: "lock" }),
+                " ",
+                /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
+                  "(",
+                  /* @__PURE__ */ jsx(Lock, { className: slots.inlineIcon() }),
+                  ")"
+                ] }),
+                " ",
+                "or ",
+                /* @__PURE__ */ jsx("b", { children: "https://" }),
+                " as an added precaution. Share sensitive information only on official, secure websites."
+              ] })
+            ] })
+          ] })
         ] }) })
       ]
     }

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

@@ -10,19 +10,19 @@ function getScrollPosition(element) {
   return { x: element.scrollLeft, y: element.scrollTop };
 }
 const useScrollPosition = (props) => {
-  const { elementRef, delay = 30, callback, isEnabled } = props;
+  const { element, delay = 30, callback, isEnabled } = props;
   const position = useRef(
-    isEnabled ? getScrollPosition(elementRef?.current) : { x: 0, y: 0 }
+    isEnabled ? getScrollPosition(element) : { x: 0, y: 0 }
   );
   const throttleTimeout = useRef(null);
   const handler = useCallback(() => {
-    const currPos = getScrollPosition(elementRef?.current);
+    const currPos = getScrollPosition(element);
     if (typeof callback === "function") {
       callback({ prevPos: position.current, currPos });
     }
     position.current = currPos;
     throttleTimeout.current = null;
-  }, [callback, elementRef]);
+  }, [callback, element]);
   useEffect(() => {
     if (!isEnabled) return;
     const handleScroll = () => {
@@ -35,7 +35,7 @@ const useScrollPosition = (props) => {
         handler();
       }
     };
-    const target = elementRef?.current || window;
+    const target = element || window;
     target.addEventListener("scroll", handleScroll);
     return () => {
       target.removeEventListener("scroll", handleScroll);
@@ -44,7 +44,7 @@ const useScrollPosition = (props) => {
         throttleTimeout.current = null;
       }
     };
-  }, [elementRef?.current, delay, handler, isEnabled]);
+  }, [element, delay, handler, isEnabled]);
   return position.current;
 };
 

package/dist/esm/index.js

@@ -25,11 +25,16 @@ 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 { AgnosticCalendarStateContext, useAgnosticCalendarStateContext } from './calendar/agnostic-calendar-state-context.js';
 export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
+export { CalendarBottomContent } from './calendar/calendar-bottom-content.js';
+export { CalendarGridHeader } from './calendar/calendar-grid-header.js';
+export { CalendarHeader } from './calendar/calendar-header.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 { ListBoxItem } from './list-box/list-box.js';
 export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
 export { Popover } from './popover/popover.js';
 export { Tab, TabList, TabPanel, TabPanels, Tabs, TabsVariantContext, useTabsVariantContext } from './tabs/tabs.js';
@@ -41,7 +46,7 @@ export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './check
 export { Pagination } from './pagination/pagination.js';
 export { PaginationCursor } from './pagination/pagination-cursor.js';
 export { PaginationItem } from './pagination/pagination-item.js';
-export { PaginationItemType } from './pagination/hooks/use-pagination.js';
+export { PaginationItemType } from './pagination/use-pagination-base.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';
@@ -57,9 +62,9 @@ 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 { NavbarMenu } from './navbar/navbar-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';

package/dist/esm/list-box/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { ListBoxItem } from './list-box.js';

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

@@ -0,0 +1,63 @@
+"use strict";
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { ListBoxItem as ListBoxItem$1, Text, composeRenderProps } from 'react-aria-components';
+import { listBoxItemStyles } from '@opengovsg/oui-theme';
+import { forwardRef, mapPropsVariants } from '../system/utils.js';
+
+const ListBoxItem = forwardRef(function ListBoxItem2(originalProps, ref) {
+  const [
+    { className, description, children, classNames, ...props },
+    variantProps
+  ] = mapPropsVariants(originalProps, listBoxItemStyles.variantKeys);
+  const styles = listBoxItemStyles(variantProps);
+  const defaultTextValue = useMemo(() => {
+    if (props.textValue) {
+      return props.textValue;
+    }
+    if (typeof children === "string") {
+      return children;
+    }
+    return void 0;
+  }, [children, props.textValue]);
+  return /* @__PURE__ */ jsx(
+    ListBoxItem$1,
+    {
+      ref,
+      textValue: defaultTextValue,
+      ...props,
+      className: composeRenderProps(
+        className ?? classNames?.container,
+        (className2, renderProps) => styles.container({ ...renderProps, className: className2 })
+      ),
+      children: (renderProps) => {
+        if (typeof children === "function") {
+          return children(renderProps);
+        }
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: styles.label({ className: classNames?.label }),
+              slot: "label",
+              children
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: styles.description({
+                className: classNames?.description
+              }),
+              slot: "description",
+              children: description
+            }
+          )
+        ] });
+      }
+    }
+  );
+});
+
+export { ListBoxItem };

package/dist/esm/navbar/index.js

@@ -2,9 +2,9 @@
 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 { NavbarMenu } from './navbar-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-menu/item.js → navbar-menu-item.js}

@@ -3,9 +3,9 @@
 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';
+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) => {

package/dist/esm/navbar/{navbar-menu/toggle.js → navbar-menu-toggle.js}

@@ -5,8 +5,8 @@ import { useMemo } from 'react';
 import { useLocalizedStringFormatter, 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';
+import { useNavbarContext } from './navbar-context.js';
+import { i18nStrings } from './navbar-menu-i18n.js';
 
 const NavbarMenuToggle = ({
   icon,

package/dist/esm/navbar/{navbar-menu/menu.js → navbar-menu.js}

@@ -1,12 +1,12 @@
 "use strict";
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Overlay as $337b884510726a0d$export$c6fdb837b070b4ff } from '../../node_modules/.pnpm/@react-aria_overlays@3.31.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@react-aria/overlays/dist/Overlay.js';
+import { Overlay as $337b884510726a0d$export$c6fdb837b070b4ff } from '../node_modules/.pnpm/@react-aria_overlays@3.31.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';
+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) => {

package/dist/esm/navbar/navbar.js

@@ -6,7 +6,7 @@ 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 { NavbarMenu } from './navbar-menu.js';
 import { useNavbar } from './use-navbar.js';
 
 const showOnScrollUpVariants = {

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

@@ -1,6 +1,6 @@
 "use strict";
 "use client";
-import { useRef, useCallback, useState, useEffect } from 'react';
+import { useRef, useCallback, useState, useEffect, useLayoutEffect } from 'react';
 import { usePreventScroll as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18 } from '../node_modules/.pnpm/@react-aria_overlays@3.31.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';
@@ -68,8 +68,12 @@ function useNavbar(originalProps) {
   useEffect(() => {
     navHeight.current = domRef.current?.offsetHeight || 0;
   }, [domRef]);
+  const [scrollElement, setScrollElement] = useState(null);
+  useLayoutEffect(() => {
+    setScrollElement(parentRef?.current ?? null);
+  }, [parentRef]);
   useScrollPosition({
-    elementRef: parentRef,
+    element: scrollElement,
     isEnabled: shouldShowOnScrollUp || !disableScrollHandler,
     callback: ({ prevPos, currPos }) => {
       onScrollPositionChange?.(currPos.y);

package/dist/esm/pagination/index.js

@@ -2,5 +2,5 @@
 export { Pagination } from './pagination.js';
 export { PaginationCursor } from './pagination-cursor.js';
 export { PaginationItem } from './pagination-item.js';
-export { PaginationItemType } from './hooks/use-pagination.js';
+export { PaginationItemType } from './use-pagination-base.js';
 export { CURSOR_TRANSITION_TIMEOUT, usePagination } from './use-pagination.js';

package/dist/esm/pagination/pagination.js

@@ -5,10 +5,10 @@ import { useCallback, createElement } from 'react';
 import { useLocale } from '@react-aria/i18n';
 import { cn, dataAttr } from '@opengovsg/oui-theme';
 import { forwardRef } from '../system/utils.js';
-import { PaginationItemType } from './hooks/use-pagination.js';
 import { PaginationCursor } from './pagination-cursor.js';
 import { PaginationItem } from './pagination-item.js';
 import { usePagination } from './use-pagination.js';
+import { PaginationItemType } from './use-pagination-base.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';
 import Ellipsis from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/ellipsis.js';
 import ChevronsRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/chevrons-right.js';

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

@@ -6,7 +6,7 @@ import { useDeepCompareMemo } from 'use-deep-compare';
 import { useIntersectionObserver } from 'usehooks-ts';
 import { paginationStyles, cn, dataAttr } from '@opengovsg/oui-theme';
 import { mapPropsVariants } from '../system/utils.js';
-import { usePagination as usePagination$1, PaginationItemType } from './hooks/use-pagination.js';
+import { usePagination as usePagination$1, PaginationItemType } from './use-pagination-base.js';
 import { useDomRef } from '../system/react-utils/refs.js';
 
 const CURSOR_TRANSITION_TIMEOUT = 300;

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

@@ -6,11 +6,11 @@ import { CalendarDate, today, getLocalTimeZone, getDayOfWeek } from '@internatio
 import { RangeCalendar as RangeCalendar$1, Provider, CalendarGrid, CalendarGridBody, Text, RangeCalendarStateContext, useLocale, CalendarCell } from 'react-aria-components';
 import { useDeepCompareMemo } from 'use-deep-compare';
 import { calendarStyles, composeRenderProps, cn, dataAttr } from '@opengovsg/oui-theme';
-import { CalendarStyleContext, useCalendarStyleContext } from '../calendar/calendar-style-context.js';
 import { AgnosticCalendarStateContext } from '../calendar/agnostic-calendar-state-context.js';
 import { CalendarBottomContent } from '../calendar/calendar-bottom-content.js';
 import { CalendarGridHeader } from '../calendar/calendar-grid-header.js';
 import { CalendarHeader } from '../calendar/calendar-header.js';
+import { CalendarStyleContext, useCalendarStyleContext } from '../calendar/calendar-style-context.js';
 import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
 
 const RangeCalendar = forwardRefGeneric(function RangeCalendar2(originalProps, ref) {

package/dist/esm/tag-field/tag-field-list.js

@@ -65,14 +65,7 @@ const TagFieldListInner = (props, ref) => {
     if (typeof props.children === "function") {
       return props.children({ ...childProps, itemProps });
     }
-    return /* @__PURE__ */ createElement(
-      TagFieldItem,
-      {
-        ...childProps,
-        ...itemProps,
-        key
-      }
-    );
+    return /* @__PURE__ */ createElement(TagFieldItem, { ...childProps, ...itemProps, key });
   }) });
 };
 const TagFieldList = forwardRefGeneric(TagFieldListInner);

package/dist/types/avatar/avatar-context.d.ts

@@ -1,5 +1,5 @@
 import type { AvatarSlots, avatarStyles, SlotsToClasses } from "@opengovsg/oui-theme";
-import type { ImageLoadingStatus } from "./hooks/use-img-loading-status";
+import type { ImageLoadingStatus } from "./use-img-loading-status";
 export interface UseAvatarContextReturn {
     imageLoadingStatus: ImageLoadingStatus;
     setImageLoadingStatus: React.Dispatch<React.SetStateAction<ImageLoadingStatus>>;

package/dist/types/avatar/avatar-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-context.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAGxE,MAAM,WAAW,sBAAsB;IACrC,kBAAkB,EAAE,kBAAkB,CAAA;IACtC,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CACnC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CACzC,CAAA;IACD,KAAK,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAA;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CACtC;AACD,eAAO,MAAO,aAAa,mDAAE,gBAAgB,8BAIzC,CAAA"}
+{"version":3,"file":"avatar-context.d.ts","sourceRoot":"","sources":["../../../src/avatar/avatar-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EACZ,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAGlE,MAAM,WAAW,sBAAsB;IACrC,kBAAkB,EAAE,kBAAkB,CAAA;IACtC,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CACnC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,CACzC,CAAA;IACD,KAAK,EAAE,UAAU,CAAC,OAAO,YAAY,CAAC,CAAA;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CACtC;AACD,eAAO,MAAO,aAAa,mDAAE,gBAAgB,8BAIzC,CAAA"}

package/dist/types/avatar/use-img-loading-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-img-loading-status.d.ts","sourceRoot":"","sources":["../../../src/avatar/use-img-loading-status.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAA;AAGrD,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAiCxE,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE,wBAAwB,CAAC,KAAK,CAAC,sBA6CjE"}

package/dist/types/button/button.d.ts

@@ -41,6 +41,16 @@ export interface ButtonProps extends AriaButtonProps, ButtonVariantProps {
      * If true, you must provide an `aria-label` for accessibility.
      */
     isIconOnly?: boolean;
+    /**
+     * Whether to preserve the button's width while pending to prevent layout
+     * shift. When enabled, the children are kept in the layout (hidden via
+     * `opacity-0` and `aria-hidden`) and the spinner is overlaid on top.
+     *
+     * Only applies when no `loadingText` or `pendingElement` is provided, since
+     * those replace the children with content of a different width.
+     * @defaultValue false
+     */
+    preserveWidth?: boolean;
 }
 /**
  * You probably do not want to use this component if you are rendering a link.

package/dist/types/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,WAAW,EACZ,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAQ9D,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,kBAAkB;IACtE;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IACnD;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IAE9C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IAErD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAElC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GAyFlB,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,WAAW,IAAI,eAAe,EAC9B,WAAW,EACZ,MAAM,uBAAuB,CAAA;AAK9B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAQ9D,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,kBAAkB;IACtE;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IACnD;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IACjD;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IAE9C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAA;IAErD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAElC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,2GA2GlB,CAAA"}

package/dist/types/calendar/index.d.ts

@@ -1,4 +1,8 @@
+export * from "./agnostic-calendar-state-context";
 export * from "./calendar";
+export * from "./calendar-bottom-content";
+export * from "./calendar-grid-header";
+export * from "./calendar-header";
 export * from "./calendar-style-context";
 export * from "./utils";
 export type * from "./types";

package/dist/types/calendar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/calendar/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,0BAA0B,CAAA;AACxC,cAAc,SAAS,CAAA;AAEvB,mBAAmB,SAAS,CAAA;AAE5B,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/calendar/index.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAA;AACjD,cAAc,YAAY,CAAA;AAC1B,cAAc,2BAA2B,CAAA;AACzC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,SAAS,CAAA;AAEvB,mBAAmB,SAAS,CAAA;AAE5B,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/types/calendar/use-calendar-selectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-calendar-selectors.d.ts","sourceRoot":"","sources":["../../../src/calendar/use-calendar-selectors.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAMtE,eAAO,MAAM,oBAAoB,UACxB,aAAa,GAAG,kBAAkB;;;;;;;;;;CAmC1C,CAAA"}

package/dist/types/combo-box/combo-box-item.d.ts

@@ -1,11 +1,4 @@
-import type { ListBoxItemProps } from "react-aria-components";
-import type { ListBoxItemSlots, ListBoxItemVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
-export interface ComboBoxItemProps extends ListBoxItemProps, ListBoxItemVariantProps {
-    /**
-     * Description for the item, if any
-     */
-    description?: React.ReactNode;
-    classNames?: SlotsToClasses<ListBoxItemSlots>;
-}
-export declare const ComboBoxItem: import("../system/utils").InternalForwardRefRenderFunction<import("../system/types").As, ComboBoxItemProps, never>;
+import type { ListBoxItemProps } from "../list-box";
+export type ComboBoxItemProps = ListBoxItemProps;
+export declare const ComboBoxItem: import("../system/utils").InternalForwardRefRenderFunction<import("../system/types").As, ListBoxItemProps, never>;
 //# sourceMappingURL=combo-box-item.d.ts.map

package/dist/types/combo-box/combo-box-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combo-box-item.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box-item.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAS7D,OAAO,KAAK,EACV,gBAAgB,EAChB,uBAAuB,EACvB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAM7B,MAAM,WAAW,iBACf,SAAQ,gBAAgB,EACtB,uBAAuB;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;CAC9C;AAED,eAAO,MAAM,YAAY,oHAgEvB,CAAA"}
+{"version":3,"file":"combo-box-item.d.ts","sourceRoot":"","sources":["../../../src/combo-box/combo-box-item.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAKnD,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAA;AAEhD,eAAO,MAAM,YAAY,mHAWvB,CAAA"}