@opengovsg/oui 0.0.54 → 0.0.55

package/AGENTS.md

@@ -0,0 +1,63 @@
+# @opengovsg/oui — Agent guide
+
+This is the React component package of the OUI design system from Open Government Products Singapore. Components are built on [react-aria-components](https://react-aria.adobe.com/).
+
+## Install
+
+```bash
+# pnpm
+pnpm add @opengovsg/oui @opengovsg/oui-theme tailwindcss react-aria-components motion
+
+# yarn
+yarn add @opengovsg/oui @opengovsg/oui-theme tailwindcss react-aria-components motion
+
+# npm
+npm install @opengovsg/oui @opengovsg/oui-theme tailwindcss react-aria-components motion
+
+# bun
+bun add @opengovsg/oui @opengovsg/oui-theme tailwindcss react-aria-components motion
+```
+
+Then add `@import "@opengovsg/oui-theme/tailwind.css"` to your Tailwind entrypoint. Full setup: https://oui.open.gov.sg/docs/getting-started/installation
+
+## Or install as local source via the shadcn CLI
+
+Each component is also distributed as a shadcn-CLI-compatible registry entry, so callers who need to customize beyond what props expose can take local ownership:
+
+```bash
+npx shadcn@latest add https://oui.open.gov.sg/r/<name>.json
+```
+
+Component files land in `components/oui/`, shared utilities in `lib/oui/`. From that point on, the file is yours — we don't push updates to it. Full guide: https://oui.open.gov.sg/llm/getting-started/registry.md
+
+## Import
+
+```tsx
+import { Button, Accordion, TextField } from "@opengovsg/oui"
+```
+
+Subpath imports also work (e.g., `import { Button } from "@opengovsg/oui/button"`).
+
+## Agent-friendly docs
+
+Structured markdown is available at predictable URLs:
+
+- **Index**: https://oui.open.gov.sg/llms.txt — list of every component with one-line descriptions
+- **Single-file dump**: https://oui.open.gov.sg/llms-full.txt — all docs concatenated
+- **Per-component**: `https://oui.open.gov.sg/llm/components/<name>.md` — e.g. `/llm/components/button.md`
+- **Setup guides**: `https://oui.open.gov.sg/llm/getting-started/<name>.md` — e.g. `/llm/getting-started/next.md`
+- **Topical guides**: `https://oui.open.gov.sg/llm/guides/<name>.md`
+
+Each component doc inlines runnable example source and links to the underlying React Aria primitive — consult those upstream docs for behavioral details (keyboard handling, ARIA semantics, advanced state) not covered by OUI's own docs.
+
+## Cross-cutting guides
+
+- **Forms**: https://oui.open.gov.sg/llm/guides/forms.md — composition with `<Form>`, validation patterns, React Hook Form + Zod integration, server errors, layout conventions.
+
+## Contributing to docs
+
+If you're editing component docs, follow the rubric: https://oui.open.gov.sg/llm/contributing/doc-quality-rubric.md
+
+## Types
+
+Prop types ship as `.d.ts` files in `dist/types/`. TypeScript-aware tooling resolves them automatically.

package/dist/cjs/avatar/avatar.cjs

@@ -9,7 +9,7 @@ var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
 var avatarContext = require('./avatar-context.cjs');
 var avatarGroupContext = require('./avatar-group-context.cjs');
-var useImgLoadingStatus = require('./hooks/use-img-loading-status.cjs');
+var useImgLoadingStatus = require('./use-img-loading-status.cjs');
 var utils$1 = require('./utils.cjs');
 var refs = require('../system/react-utils/refs.cjs');
 var user = require('../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.cjs');

package/dist/cjs/calendar/calendar-month-day-selector.cjs

@@ -11,8 +11,8 @@ var select = require('../select/select.cjs');
 var selectItem = require('../select/select-item.cjs');
 var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
 var calendarStyleContext = require('./calendar-style-context.cjs');
+var useCalendarSelectors = require('./use-calendar-selectors.cjs');
 var i18n = require('./i18n.cjs');
-var useCalendarSelectors = require('./hooks/use-calendar-selectors.cjs');
 
 const CalendarMonthDaySelector = () => {
   const { slots, size, classNames } = calendarStyleContext.useCalendarStyleContext();

package/dist/cjs/calendar/index.cjs

@@ -1,15 +1,24 @@
 "use strict";
 'use strict';
 
+var agnosticCalendarStateContext = require('./agnostic-calendar-state-context.cjs');
 var calendar = require('./calendar.cjs');
+var calendarBottomContent = require('./calendar-bottom-content.cjs');
+var calendarGridHeader = require('./calendar-grid-header.cjs');
+var calendarHeader = require('./calendar-header.cjs');
 var calendarStyleContext = require('./calendar-style-context.cjs');
 var utils = require('./utils.cjs');
 var date = require('@internationalized/date');
 
 
 
+exports.AgnosticCalendarStateContext = agnosticCalendarStateContext.AgnosticCalendarStateContext;
+exports.useAgnosticCalendarStateContext = agnosticCalendarStateContext.useAgnosticCalendarStateContext;
 exports.Calendar = calendar.Calendar;
 exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
+exports.CalendarBottomContent = calendarBottomContent.CalendarBottomContent;
+exports.CalendarGridHeader = calendarGridHeader.CalendarGridHeader;
+exports.CalendarHeader = calendarHeader.CalendarHeader;
 exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
 exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
 exports.getEraFormat = utils.getEraFormat;

package/dist/cjs/calendar/{hooks/use-calendar-selectors.cjs → use-calendar-selectors.cjs}

@@ -4,7 +4,7 @@
 
 var $670gB$react = require('react');
 var reactAria = require('react-aria');
-var utils = require('../utils.cjs');
+var utils = require('./utils.cjs');
 
 const useCalendarSelectors = (state) => {
   const yearRange = $670gB$react.useMemo(() => {

package/dist/cjs/combo-box/combo-box-item.cjs

@@ -3,9 +3,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var $670gB$react = require('react');
 var reactAriaComponents = require('react-aria-components');
-var ouiTheme = require('@opengovsg/oui-theme');
+var listBox = require('../list-box/list-box.cjs');
 var utils = require('../system/utils.cjs');
 var comboBoxVariantContext = require('./combo-box-variant-context.cjs');
 
@@ -15,56 +14,7 @@ const ComboBoxItem = utils.forwardRef(function ComboBoxItem2(originalProps, ref)
     ref,
     comboBoxVariantContext.ComboBoxVariantContext
   );
-  const [
-    { className, description, children, classNames, ...props },
-    variantProps
-  ] = utils.mapPropsVariants(originalProps, ouiTheme.listBoxItemStyles.variantKeys);
-  const styles = ouiTheme.listBoxItemStyles(variantProps);
-  const defaultTextValue = $670gB$react.useMemo(() => {
-    if (props.textValue) {
-      return props.textValue;
-    }
-    if (typeof children === "string") {
-      return children;
-    }
-    return void 0;
-  }, [children, props.textValue]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactAriaComponents.ListBoxItem,
-    {
-      textValue: defaultTextValue,
-      ...props,
-      className: reactAriaComponents.composeRenderProps(
-        className ?? classNames?.container,
-        (className2, renderProps) => styles.container({ ...renderProps, className: className2 })
-      ),
-      children: (renderProps) => {
-        if (typeof children === "function") {
-          return children(renderProps);
-        }
-        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactAriaComponents.Text,
-            {
-              className: styles.label({ className: classNames?.label }),
-              slot: "label",
-              children
-            }
-          ),
-          description && /* @__PURE__ */ jsxRuntime.jsx(
-            reactAriaComponents.Text,
-            {
-              className: styles.description({
-                className: classNames?.description
-              }),
-              slot: "description",
-              children: description
-            }
-          )
-        ] });
-      }
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(listBox.ListBoxItem, { ref, ...originalProps });
 });
 
 exports.ComboBoxItem = ComboBoxItem;

package/dist/cjs/index.cjs

@@ -9,7 +9,7 @@ var ripple = require('./ripple/ripple.cjs');
 var useRipple = require('./ripple/use-ripple.cjs');
 var spinner = require('./spinner/spinner.cjs');
 var useSpinner = require('./spinner/use-spinner.cjs');
-var toggle$1 = require('./toggle/toggle.cjs');
+var toggle = require('./toggle/toggle.cjs');
 var skipNavLink = require('./skip-nav-link/skip-nav-link.cjs');
 var input = require('./input/input.cjs');
 var textField = require('./text-field/text-field.cjs');
@@ -27,11 +27,16 @@ var select = require('./select/select.cjs');
 var selectItem = require('./select/select-item.cjs');
 var selectVariantContext = require('./select/select-variant-context.cjs');
 var badge = require('./badge/badge.cjs');
+var agnosticCalendarStateContext = require('./calendar/agnostic-calendar-state-context.cjs');
 var calendar = require('./calendar/calendar.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 calendarStyleContext = require('./calendar/calendar-style-context.cjs');
 var utils$1 = require('./calendar/utils.cjs');
 var date = require('@internationalized/date');
 var rangeCalendar = require('./range-calendar/range-calendar.cjs');
+var listBox = require('./list-box/list-box.cjs');
 var menu = require('./menu/menu.cjs');
 var popover = require('./popover/popover.cjs');
 var tabs = require('./tabs/tabs.cjs');
@@ -43,7 +48,7 @@ var checkboxGroupStyleContext = require('./checkbox/checkbox-group-style-context
 var pagination = require('./pagination/pagination.cjs');
 var paginationCursor = require('./pagination/pagination-cursor.cjs');
 var paginationItem = require('./pagination/pagination-item.cjs');
-var usePagination$1 = require('./pagination/hooks/use-pagination.cjs');
+var usePaginationBase = require('./pagination/use-pagination-base.cjs');
 var usePagination = require('./pagination/use-pagination.cjs');
 var fileDropzone = require('./file-dropzone/file-dropzone.cjs');
 var fileInfo = require('./file-dropzone/file-info.cjs');
@@ -59,9 +64,9 @@ var toast = require('./toast/toast.cjs');
 var navbar = require('./navbar/navbar.cjs');
 var navbarBrand = require('./navbar/navbar-brand.cjs');
 var navbarContent = require('./navbar/navbar-content.cjs');
-var menu$1 = require('./navbar/navbar-menu/menu.cjs');
-var item = require('./navbar/navbar-menu/item.cjs');
-var toggle = require('./navbar/navbar-menu/toggle.cjs');
+var navbarMenu = require('./navbar/navbar-menu.cjs');
+var navbarMenuItem = require('./navbar/navbar-menu-item.cjs');
+var navbarMenuToggle = require('./navbar/navbar-menu-toggle.cjs');
 var navbarItem = require('./navbar/navbar-item.cjs');
 var useNavbar = require('./navbar/use-navbar.cjs');
 var navbarContext = require('./navbar/navbar-context.cjs');
@@ -97,7 +102,7 @@ exports.Ripple = ripple.Ripple;
 exports.useRipple = useRipple.useRipple;
 exports.Spinner = spinner.Spinner;
 exports.useSpinner = useSpinner.useSpinner;
-exports.Toggle = toggle$1.Toggle;
+exports.Toggle = toggle.Toggle;
 exports.SkipNavLink = skipNavLink.SkipNavLink;
 exports.Input = input.Input;
 exports.TextField = textField.TextField;
@@ -122,8 +127,13 @@ exports.SelectItem = selectItem.SelectItem;
 exports.SelectVariantContext = selectVariantContext.SelectVariantContext;
 exports.useSelectVariantContext = selectVariantContext.useSelectVariantContext;
 exports.Badge = badge.Badge;
+exports.AgnosticCalendarStateContext = agnosticCalendarStateContext.AgnosticCalendarStateContext;
+exports.useAgnosticCalendarStateContext = agnosticCalendarStateContext.useAgnosticCalendarStateContext;
 exports.Calendar = calendar.Calendar;
 exports.CalendarStateWrapper = calendar.CalendarStateWrapper;
+exports.CalendarBottomContent = calendarBottomContent.CalendarBottomContent;
+exports.CalendarGridHeader = calendarGridHeader.CalendarGridHeader;
+exports.CalendarHeader = calendarHeader.CalendarHeader;
 exports.CalendarStyleContext = calendarStyleContext.CalendarStyleContext;
 exports.useCalendarStyleContext = calendarStyleContext.useCalendarStyleContext;
 exports.getEraFormat = utils$1.getEraFormat;
@@ -137,6 +147,7 @@ Object.defineProperty(exports, "CalendarDate", {
 exports.RangeCalendar = rangeCalendar.RangeCalendar;
 exports.RangeCalendarCell = rangeCalendar.RangeCalendarCell;
 exports.RangeCalendarStateWrapper = rangeCalendar.RangeCalendarStateWrapper;
+exports.ListBoxItem = listBox.ListBoxItem;
 exports.Menu = menu.Menu;
 exports.MenuItem = menu.MenuItem;
 exports.MenuSection = menu.MenuSection;
@@ -164,7 +175,7 @@ exports.useCheckboxGroupStyleContext = checkboxGroupStyleContext.useCheckboxGrou
 exports.Pagination = pagination.Pagination;
 exports.PaginationCursor = paginationCursor.PaginationCursor;
 exports.PaginationItem = paginationItem.PaginationItem;
-exports.PaginationItemType = usePagination$1.PaginationItemType;
+exports.PaginationItemType = usePaginationBase.PaginationItemType;
 exports.CURSOR_TRANSITION_TIMEOUT = usePagination.CURSOR_TRANSITION_TIMEOUT;
 exports.usePagination = usePagination.usePagination;
 exports.FileDropzone = fileDropzone.FileDropzone;
@@ -183,9 +194,9 @@ exports.Toaster = toast.Toaster;
 exports.Navbar = navbar.Navbar;
 exports.NavbarBrand = navbarBrand.NavbarBrand;
 exports.NavbarContent = navbarContent.NavbarContent;
-exports.NavbarMenu = menu$1.NavbarMenu;
-exports.NavbarMenuItem = item.NavbarMenuItem;
-exports.NavbarMenuToggle = toggle.NavbarMenuToggle;
+exports.NavbarMenu = navbarMenu.NavbarMenu;
+exports.NavbarMenuItem = navbarMenuItem.NavbarMenuItem;
+exports.NavbarMenuToggle = navbarMenuToggle.NavbarMenuToggle;
 exports.NavbarItem = navbarItem.NavbarItem;
 exports.useNavbar = useNavbar.useNavbar;
 exports.NavbarProvider = navbarContext.NavbarProvider;

package/dist/cjs/list-box/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+'use strict';
+
+var listBox = require('./list-box.cjs');
+
+
+
+exports.ListBoxItem = listBox.ListBoxItem;

package/dist/cjs/list-box/list-box.cjs

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

package/dist/cjs/navbar/index.cjs

@@ -4,9 +4,9 @@
 var navbar = require('./navbar.cjs');
 var navbarBrand = require('./navbar-brand.cjs');
 var navbarContent = require('./navbar-content.cjs');
-var menu = require('./navbar-menu/menu.cjs');
-var item = require('./navbar-menu/item.cjs');
-var toggle = require('./navbar-menu/toggle.cjs');
+var navbarMenu = require('./navbar-menu.cjs');
+var navbarMenuItem = require('./navbar-menu-item.cjs');
+var navbarMenuToggle = require('./navbar-menu-toggle.cjs');
 var navbarItem = require('./navbar-item.cjs');
 var useNavbar = require('./use-navbar.cjs');
 var navbarContext = require('./navbar-context.cjs');
@@ -16,9 +16,9 @@ var navbarContext = require('./navbar-context.cjs');
 exports.Navbar = navbar.Navbar;
 exports.NavbarBrand = navbarBrand.NavbarBrand;
 exports.NavbarContent = navbarContent.NavbarContent;
-exports.NavbarMenu = menu.NavbarMenu;
-exports.NavbarMenuItem = item.NavbarMenuItem;
-exports.NavbarMenuToggle = toggle.NavbarMenuToggle;
+exports.NavbarMenu = navbarMenu.NavbarMenu;
+exports.NavbarMenuItem = navbarMenuItem.NavbarMenuItem;
+exports.NavbarMenuToggle = navbarMenuToggle.NavbarMenuToggle;
 exports.NavbarItem = navbarItem.NavbarItem;
 exports.useNavbar = useNavbar.useNavbar;
 exports.NavbarProvider = navbarContext.NavbarProvider;

package/dist/cjs/navbar/{navbar-menu/item.cjs → navbar-menu-item.cjs}

@@ -5,9 +5,9 @@
 var jsxRuntime = require('react/jsx-runtime');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var utils = require('../../system/utils.cjs');
-var navbarContext = require('../navbar-context.cjs');
-var refs = require('../../system/react-utils/refs.cjs');
+var utils = require('../system/utils.cjs');
+var navbarContext = require('./navbar-context.cjs');
+var refs = require('../system/react-utils/refs.cjs');
 
 const NavbarMenuItem = utils.forwardRef(
   (props, ref) => {

package/dist/cjs/navbar/{navbar-menu/toggle.cjs → navbar-menu-toggle.cjs}

@@ -7,8 +7,8 @@ var $670gB$react = require('react');
 var reactAria = require('react-aria');
 var reactAriaComponents = require('react-aria-components');
 var ouiTheme = require('@opengovsg/oui-theme');
-var navbarContext = require('../navbar-context.cjs');
-var i18n = require('./i18n.cjs');
+var navbarContext = require('./navbar-context.cjs');
+var navbarMenuI18n = require('./navbar-menu-i18n.cjs');
 
 const NavbarMenuToggle = ({
   icon,
@@ -35,7 +35,7 @@ const NavbarMenuToggle = ({
     }
     window.scrollTo({ top: menuTopOffset, behavior: "instant" });
   };
-  const stringFormatter = reactAria.useLocalizedStringFormatter(i18n.i18nStrings);
+  const stringFormatter = reactAria.useLocalizedStringFormatter(navbarMenuI18n.i18nStrings);
   const toggleStyles = $670gB$react.useMemo(() => {
     return ouiTheme.buttonStyles({
       variant: "unstyled",

package/dist/cjs/navbar/{navbar-menu/menu.cjs → navbar-menu.cjs}

@@ -3,12 +3,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var Overlay = require('../../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.cjs');
+var Overlay = require('../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.cjs');
 var reactAria = require('react-aria');
 var ouiTheme = require('@opengovsg/oui-theme');
-var utils = require('../../system/utils.cjs');
-var navbarContext = require('../navbar-context.cjs');
-var refs = require('../../system/react-utils/refs.cjs');
+var utils = require('../system/utils.cjs');
+var navbarContext = require('./navbar-context.cjs');
+var refs = require('../system/react-utils/refs.cjs');
 
 const NavbarMenu = utils.forwardRef(
   ({ className, children, portalContainer, style, onKeyDown, ...props }, ref) => {

package/dist/cjs/navbar/navbar.cjs

@@ -8,7 +8,7 @@ var reactAria = require('react-aria');
 var children = require('../system/react-utils/children.cjs');
 var utils = require('../system/utils.cjs');
 var navbarContext = require('./navbar-context.cjs');
-var menu = require('./navbar-menu/menu.cjs');
+var navbarMenu = require('./navbar-menu.cjs');
 var useNavbar = require('./use-navbar.cjs');
 
 const showOnScrollUpVariants = {
@@ -29,10 +29,10 @@ const Navbar = utils.forwardRef((props, ref) => {
   const { children: children$1, ...otherProps } = props;
   const context = useNavbar.useNavbar({ ...otherProps, ref });
   const Component = context.Component;
-  const [childrenWithoutMenu, menu$1] = children.pickChildren(children$1, menu.NavbarMenu);
+  const [childrenWithoutMenu, menu] = children.pickChildren(children$1, navbarMenu.NavbarMenu);
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("header", { ...context.getWrapperProps(), children: childrenWithoutMenu }),
-    menu$1
+    menu
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(navbarContext.NavbarProvider, { value: context, children: /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusScope, { contain: context.isMenuOpen, children: context.shouldShowOnScrollUp ? /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domAnimation, children: /* @__PURE__ */ jsxRuntime.jsx(
     react.m.nav,

package/dist/cjs/pagination/index.cjs

@@ -4,7 +4,7 @@
 var pagination = require('./pagination.cjs');
 var paginationCursor = require('./pagination-cursor.cjs');
 var paginationItem = require('./pagination-item.cjs');
-var usePagination$1 = require('./hooks/use-pagination.cjs');
+var usePaginationBase = require('./use-pagination-base.cjs');
 var usePagination = require('./use-pagination.cjs');
 
 
@@ -12,6 +12,6 @@ var usePagination = require('./use-pagination.cjs');
 exports.Pagination = pagination.Pagination;
 exports.PaginationCursor = paginationCursor.PaginationCursor;
 exports.PaginationItem = paginationItem.PaginationItem;
-exports.PaginationItemType = usePagination$1.PaginationItemType;
+exports.PaginationItemType = usePaginationBase.PaginationItemType;
 exports.CURSOR_TRANSITION_TIMEOUT = usePagination.CURSOR_TRANSITION_TIMEOUT;
 exports.usePagination = usePagination.usePagination;

package/dist/cjs/pagination/pagination.cjs

@@ -7,7 +7,7 @@ var $670gB$react = require('react');
 var i18n = require('@react-aria/i18n');
 var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
-var usePagination$1 = require('./hooks/use-pagination.cjs');
+var usePaginationBase = require('./use-pagination-base.cjs');
 var paginationCursor = require('./pagination-cursor.cjs');
 var paginationItem = require('./pagination-item.cjs');
 var usePagination = require('./use-pagination.cjs');
@@ -42,7 +42,7 @@ const Pagination = utils.forwardRef((props, ref) => {
   const isRTL = direction === "rtl";
   const renderChevronIcon = $670gB$react.useCallback(
     (key) => {
-      if (key === usePagination$1.PaginationItemType.PREV && !isRTL || key === usePagination$1.PaginationItemType.NEXT && isRTL) {
+      if (key === usePaginationBase.PaginationItemType.PREV && !isRTL || key === usePaginationBase.PaginationItemType.NEXT && isRTL) {
         return /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.default, {});
       }
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -66,11 +66,11 @@ const Pagination = utils.forwardRef((props, ref) => {
         "data-slot": "prev",
         getAriaLabel: getItemAriaLabel,
         isDisabled: props.isDisabled || !loop && activePage === 1,
-        value: usePagination$1.PaginationItemType.PREV,
+        value: usePaginationBase.PaginationItemType.PREV,
         onPress: onPrevious,
-        children: renderChevronIcon(usePagination$1.PaginationItemType.PREV)
+        children: renderChevronIcon(usePaginationBase.PaginationItemType.PREV)
       },
-      usePagination$1.PaginationItemType.PREV
+      usePaginationBase.PaginationItemType.PREV
     );
   }, [
     slots,
@@ -92,11 +92,11 @@ const Pagination = utils.forwardRef((props, ref) => {
         "data-slot": "next",
         getAriaLabel: getItemAriaLabel,
         isDisabled: props.isDisabled || !loop && activePage === total,
-        value: usePagination$1.PaginationItemType.NEXT,
+        value: usePaginationBase.PaginationItemType.NEXT,
         onPress: onNext,
-        children: renderChevronIcon(usePagination$1.PaginationItemType.NEXT)
+        children: renderChevronIcon(usePaginationBase.PaginationItemType.NEXT)
       },
-      usePagination$1.PaginationItemType.NEXT
+      usePaginationBase.PaginationItemType.NEXT
     );
   }, [
     slots,
@@ -114,19 +114,19 @@ const Pagination = utils.forwardRef((props, ref) => {
       const isBefore = index < range.indexOf(activePage);
       if (renderItemProp && typeof renderItemProp === "function") {
         let page = typeof value == "number" ? value : index;
-        if (value === usePagination$1.PaginationItemType.NEXT) {
+        if (value === usePaginationBase.PaginationItemType.NEXT) {
           page = activePage + 1;
         }
-        if (value === usePagination$1.PaginationItemType.PREV) {
+        if (value === usePaginationBase.PaginationItemType.PREV) {
           page = activePage - 1;
         }
-        if (value === usePagination$1.PaginationItemType.DOTS) {
+        if (value === usePaginationBase.PaginationItemType.DOTS) {
           page = isBefore ? activePage - dotsJump >= 1 ? activePage - dotsJump : 1 : activePage + dotsJump <= total ? activePage + dotsJump : total;
         }
         const itemChildren = {
-          [usePagination$1.PaginationItemType.PREV]: renderChevronIcon(usePagination$1.PaginationItemType.PREV),
-          [usePagination$1.PaginationItemType.NEXT]: renderChevronIcon(usePagination$1.PaginationItemType.NEXT),
-          [usePagination$1.PaginationItemType.DOTS]: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          [usePaginationBase.PaginationItemType.PREV]: renderChevronIcon(usePaginationBase.PaginationItemType.PREV),
+          [usePaginationBase.PaginationItemType.NEXT]: renderChevronIcon(usePaginationBase.PaginationItemType.NEXT),
+          [usePaginationBase.PaginationItemType.DOTS]: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               ellipsis.default,
               {
@@ -168,13 +168,13 @@ const Pagination = utils.forwardRef((props, ref) => {
           getAriaLabel: getItemAriaLabel
         });
       }
-      if (value === usePagination$1.PaginationItemType.PREV) {
+      if (value === usePaginationBase.PaginationItemType.PREV) {
         return renderPrevItem();
       }
-      if (value === usePagination$1.PaginationItemType.NEXT) {
+      if (value === usePaginationBase.PaginationItemType.NEXT) {
         return renderNextItem();
       }
-      if (value === usePagination$1.PaginationItemType.DOTS) {
+      if (value === usePaginationBase.PaginationItemType.DOTS) {
         return /* @__PURE__ */ jsxRuntime.jsxs(
           paginationItem.PaginationItem,
           {
@@ -206,7 +206,7 @@ const Pagination = utils.forwardRef((props, ref) => {
               )
             ]
           },
-          usePagination$1.PaginationItemType.DOTS + isBefore
+          usePaginationBase.PaginationItemType.DOTS + isBefore
         );
       }
       return /* @__PURE__ */ $670gB$react.createElement(

package/dist/cjs/pagination/use-pagination.cjs

@@ -8,7 +8,7 @@ var useDeepCompare = require('use-deep-compare');
 var usehooksTs = require('usehooks-ts');
 var ouiTheme = require('@opengovsg/oui-theme');
 var utils = require('../system/utils.cjs');
-var usePagination$1 = require('./hooks/use-pagination.cjs');
+var usePaginationBase = require('./use-pagination-base.cjs');
 var refs = require('../system/react-utils/refs.cjs');
 
 const CURSOR_TRANSITION_TIMEOUT = 300;
@@ -93,7 +93,7 @@ function usePagination(originalProps) {
     },
     [domRef]
   );
-  const { range, activePage, setPage, previous, next, first, last } = usePagination$1.usePagination({
+  const { range, activePage, setPage, previous, next, first, last } = usePaginationBase.usePagination({
     page,
     total,
     initialPage,
@@ -179,11 +179,11 @@ function usePagination(originalProps) {
       return getItemAriaLabelProp(page2);
     }
     switch (page2) {
-      case usePagination$1.PaginationItemType.DOTS:
+      case usePaginationBase.PaginationItemType.DOTS:
         return "dots element";
-      case usePagination$1.PaginationItemType.PREV:
+      case usePaginationBase.PaginationItemType.PREV:
         return "previous page button";
-      case usePagination$1.PaginationItemType.NEXT:
+      case usePaginationBase.PaginationItemType.NEXT:
         return "next page button";
       case "first":
         return "first page button";

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

@@ -8,11 +8,11 @@ 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 calendarStyleContext = require('../calendar/calendar-style-context.cjs');
 var utils = require('../system/utils.cjs');
 
 const RangeCalendar = utils.forwardRefGeneric(function RangeCalendar2(originalProps, ref) {

package/dist/esm/avatar/avatar.js

@@ -7,7 +7,7 @@ import { avatarStyles, dataAttr } from '@opengovsg/oui-theme';
 import { forwardRef, mapPropsVariants } from '../system/utils.js';
 import { AvatarContext, useAvatarContext } from './avatar-context.js';
 import { useAvatarGroupContext } from './avatar-group-context.js';
-import { useImageLoadingStatus } from './hooks/use-img-loading-status.js';
+import { useImageLoadingStatus } from './use-img-loading-status.js';
 import { getInitialsFromText } from './utils.js';
 import { useDomRef } from '../system/react-utils/refs.js';
 import User from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.2.3/node_modules/lucide-react/dist/esm/icons/user.js';