@opengovsg/oui 0.0.0-snapshot-20250813090518 → 0.0.0-snapshot-20250813172831

package/dist/types/pagination/hooks/use-pagination.d.ts

@@ -0,0 +1,51 @@
+export declare enum PaginationItemType {
+    DOTS = "dots",
+    PREV = "prev",
+    NEXT = "next"
+}
+export interface UsePaginationProps {
+    /**
+     * The total number of pages.
+     */
+    total: number;
+    /**
+     * The selected page on initial render.
+     * @default 1
+     */
+    initialPage?: number;
+    /**
+     * The controlled selected page.
+     */
+    page?: number;
+    /**
+     * The number of pages to show on each side of the current page.
+     * @default 1
+     */
+    siblings?: number;
+    /**
+     * The number of pages to show at the beginning and end of the pagination.
+     * @default 1
+     */
+    boundaries?: number;
+    /**
+     * If `true`, the range will include "prev" and "next" buttons.
+     * @default false
+     */
+    showControls?: boolean;
+    /**
+     * Callback fired when the page changes.
+     */
+    onChange?: (page: number) => void;
+}
+export type PaginationItemValue = number | PaginationItemType;
+export declare function usePagination(props: UsePaginationProps): {
+    range: PaginationItemValue[];
+    activePage: number;
+    setPage: (pageNumber: number) => void;
+    next: () => void;
+    previous: () => void;
+    first: () => void;
+    last: () => void;
+};
+export type UsePaginationReturn = ReturnType<typeof usePagination>;
+//# sourceMappingURL=use-pagination.d.ts.map

package/dist/types/pagination/hooks/use-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pagination.d.ts","sourceRoot":"","sources":["../../../../src/pagination/hooks/use-pagination.ts"],"names":[],"mappings":"AAKA,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAcD,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,kBAAkB,CAAA;AAE7D,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB;;;0BA+BtC,MAAM;;;;;EAuFtB;AAED,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAA"}

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

@@ -0,0 +1,7 @@
+export * from "./pagination";
+export * from "./pagination-cursor";
+export * from "./pagination-item";
+export { PaginationItemType } from "./hooks/use-pagination";
+export type { PaginationItemValue } from "./hooks/use-pagination";
+export * from "./use-pagination";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pagination/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AAEjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAEjE,cAAc,kBAAkB,CAAA"}

package/dist/types/pagination/pagination-cursor.d.ts

@@ -0,0 +1,9 @@
+import type { HtmlUiProps } from "../system/types";
+export interface PaginationCursorProps extends HtmlUiProps<"span"> {
+    /**
+     * The current active page.
+     */
+    activePage?: number;
+}
+export declare const PaginationCursor: import("../system/utils").InternalForwardRefRenderFunction<"span", PaginationCursorProps, never>;
+//# sourceMappingURL=pagination-cursor.d.ts.map

package/dist/types/pagination/pagination-cursor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-cursor.d.ts","sourceRoot":"","sources":["../../../src/pagination/pagination-cursor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAIlD,MAAM,WAAW,qBAAsB,SAAQ,WAAW,CAAC,MAAM,CAAC;IAChE;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,gBAAgB,kGAa5B,CAAA"}

package/dist/types/pagination/pagination-item.d.ts

@@ -0,0 +1,5 @@
+import type { UsePaginationItemProps } from "./use-pagination-item";
+export interface PaginationItemProps extends UsePaginationItemProps {
+}
+export declare const PaginationItem: import("../system/utils").InternalForwardRefRenderFunction<"li", PaginationItemProps, never>;
+//# sourceMappingURL=pagination-item.d.ts.map

package/dist/types/pagination/pagination-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-item.d.ts","sourceRoot":"","sources":["../../../src/pagination/pagination-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAA;AAKnE,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB;CAAG;AAEtE,eAAO,MAAM,cAAc,8FAS1B,CAAA"}

package/dist/types/pagination/pagination.d.ts

@@ -0,0 +1,5 @@
+import type { UsePaginationProps } from "./use-pagination";
+export interface PaginationProps extends UsePaginationProps {
+}
+export declare const Pagination: import("../system/utils").InternalForwardRefRenderFunction<"nav", PaginationProps, never>;
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/pagination/pagination.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAQ1D,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;CAAG;AAE9D,eAAO,MAAM,UAAU,2FAiRrB,CAAA"}

package/dist/types/pagination/use-pagination-item.d.ts

@@ -0,0 +1,51 @@
+import type { LinkDOMProps, PressEvent } from "@react-types/shared";
+import type { Ref } from "react";
+import type { HtmlUiProps, PropGetter } from "../system/types";
+import type { PaginationItemValue } from "./hooks/use-pagination";
+interface Props extends Omit<HtmlUiProps<"li">, "onClick"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: Ref<HTMLElement>;
+    /**
+     * Value of the item.
+     */
+    value?: PaginationItemValue;
+    /**
+     * Whether the item is active.
+     * @default false
+     */
+    isActive?: boolean;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Callback fired when the item is clicked.
+     * @param e MouseEvent
+     * @deprecated Use `onPress` instead.
+     */
+    onClick?: HtmlUiProps<"li">["onClick"];
+    /**
+     * Callback fired when the item is clicked.
+     * @param e PressEvent
+     */
+    onPress?: (e: PressEvent) => void;
+    /**
+     * Function to get the aria-label of the item.
+     */
+    getAriaLabel?: (page?: PaginationItemValue) => string | undefined;
+}
+export type UsePaginationItemProps = Props & LinkDOMProps;
+export declare function usePaginationItem(props: UsePaginationItemProps): {
+    Component: string;
+    children: import("react").ReactNode;
+    ariaLabel: string | undefined;
+    isFocused: boolean;
+    isFocusVisible: boolean;
+    getItemProps: PropGetter;
+};
+export type UsePaginationItemReturn = ReturnType<typeof usePaginationItem>;
+export {};
+//# sourceMappingURL=use-pagination-item.d.ts.map

package/dist/types/pagination/use-pagination-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pagination-item.d.ts","sourceRoot":"","sources":["../../../src/pagination/use-pagination-item.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACnE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAahC,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC9D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAGjE,UAAU,KAAM,SAAQ,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IACxD;;OAEG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAA;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAA;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;IACjC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,mBAAmB,KAAK,MAAM,GAAG,SAAS,CAAA;CAClE;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,YAAY,CAAA;AAEzD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB;;;;;;;EAwF9D;AAED,MAAM,MAAM,uBAAuB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAA"}

package/dist/types/pagination/use-pagination.d.ts

@@ -0,0 +1,353 @@
+import type { PressEvent } from "@react-types/shared";
+import type { Key, ReactNode, Ref } from "react";
+import type { PaginationSlots, PaginationVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
+import type { HtmlUiProps, PropGetter } from "../system/types";
+import type { PaginationItemValue, UsePaginationProps as UseBasePaginationProps } from "./hooks/use-pagination";
+export type PaginationItemRenderProps = {
+    /**
+     * The pagination item ref.
+     */
+    ref?: Ref<any>;
+    /**
+     * React key.
+     */
+    key?: Key;
+    /**
+     * The pagination item value.
+     */
+    children?: ReactNode;
+    /**
+     * The pagination item value.
+     */
+    value: PaginationItemValue;
+    /**
+     * The pagination item index.
+     */
+    index: number;
+    /**
+     * Calculated pagination item position. This includes the dots.
+     */
+    page: number;
+    /**
+     * The pagination total number of pages.
+     */
+    total: number;
+    /**
+     * The active page number.
+     */
+    activePage: number;
+    /**
+     * Whether the pagination item is active.
+     */
+    isActive: boolean;
+    /**
+     * Whether the item is before the active page.
+     */
+    isBefore: boolean;
+    /**
+     * Whether the pagination item is the first item in the pagination.
+     */
+    isFirst: boolean;
+    /**
+     * Whether the pagination item is the last item in the pagination.
+     */
+    isLast: boolean;
+    /**
+     * Whether the pagination item is the next item in the pagination.
+     */
+    isNext: boolean;
+    /**
+     * Number of pages that are added or subtracted on the '...' button.
+     * @default 5
+     */
+    dotsJump: number;
+    /**
+     * Whether the pagination item is the previous item in the pagination.
+     */
+    isPrevious: boolean;
+    /**
+     * The pagination item className.
+     */
+    className: string;
+    /**
+     * Callback to go to the next page.
+     */
+    onNext: () => void;
+    /**
+     * Callback to go to the previous page.
+     */
+    onPrevious: () => void;
+    /**
+     * Callback to go to the page.
+     */
+    setPage: (page: number) => void;
+    /**
+     * Callback fired when the item is clicked.
+     * @param e PressEvent
+     */
+    onPress?: (e: PressEvent) => void;
+    /**
+     * Function to get the aria-label of the item.
+     */
+    getAriaLabel?: (page?: PaginationItemValue) => string | undefined;
+};
+interface Props extends Omit<HtmlUiProps<"nav">, "onChange"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: Ref<HTMLElement>;
+    /**
+     * Number of pages that are added or subtracted on the '...' button.
+     * @default 5
+     */
+    dotsJump?: number;
+    /**
+     * Non disable next/previous controls
+     * @default false
+     */
+    loop?: boolean;
+    /**
+     * Whether the pagination should display controls (left/right arrows).
+     * @default true
+     */
+    showControls?: boolean;
+    /**
+     * Render a custom pagination item.
+     * @param props Pagination item props
+     * @returns ReactNode
+     */
+    renderItem?: (props: PaginationItemRenderProps) => ReactNode;
+    /**
+     * Function to get the aria-label of the item. If not provided, pagination will use the default one.
+     */
+    getItemAriaLabel?: (page?: string | PaginationItemValue) => string;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Pagination classNames={{
+     *    base:"base-classes",
+     *    prev: "prev-classes", // prev button classes
+     *    item: "item-classes",
+     *    next: "next-classes", // next button classes
+     *    cursor: "cursor-classes", // this is the one that moves when an item is selected
+     *    forwardIcon: "forward-icon-classes", // forward icon
+     *    ellipsis: "ellipsis-classes", // ellipsis icon
+     *    chevronNext: "chevron-next-classes", // chevron next icon
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<PaginationSlots>;
+}
+export type UsePaginationProps = Props & UseBasePaginationProps & PaginationVariantProps;
+export declare const CURSOR_TRANSITION_TIMEOUT = 300;
+export declare function usePagination(originalProps: UsePaginationProps): {
+    Component: import("../system/types").As<any>;
+    showControls: boolean;
+    dotsJump: number;
+    slots: {
+        base: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        wrapper: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        item: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        prev: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        next: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        cursor: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        forwardIcon: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        ellipsis: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        chevronNext: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+    } & {
+        base: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        wrapper: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        item: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        prev: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        next: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        cursor: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        forwardIcon: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        ellipsis: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        chevronNext: (slotProps?: ({
+            size?: "lg" | "md" | "sm" | undefined;
+            color?: "main" | "neutral" | "critical" | "warning" | "success" | undefined;
+            radius?: "lg" | "md" | "sm" | "none" | "full" | undefined;
+            variant?: "light" | undefined;
+            isDisabled?: boolean | undefined;
+            isCompact?: boolean | undefined;
+            disableCursorAnimation?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+    } & {};
+    classNames: SlotsToClasses<"cursor" | "base" | "wrapper" | "prev" | "next" | "ellipsis" | "chevronNext" | "item" | "forwardIcon"> | undefined;
+    loop: boolean;
+    total: number;
+    range: PaginationItemValue[];
+    activePage: number;
+    getItemRef: (node: HTMLElement | null, value: number) => void;
+    disableAnimation: boolean;
+    disableCursorAnimation: boolean;
+    setPage: (pageNumber: number) => void;
+    onPrevious: () => void;
+    onNext: () => void;
+    renderItem: ((props: PaginationItemRenderProps) => ReactNode) | undefined;
+    getBaseProps: PropGetter;
+    getWrapperProps: PropGetter;
+    getItemProps: PropGetter;
+    getCursorProps: PropGetter;
+    getItemAriaLabel: (page?: string | PaginationItemValue) => string | undefined;
+};
+export type UsePaginationReturn = ReturnType<typeof usePagination>;
+export {};
+//# sourceMappingURL=use-pagination.d.ts.map

package/dist/types/pagination/use-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pagination.d.ts","sourceRoot":"","sources":["../../../src/pagination/use-pagination.ts"],"names":[],"mappings":"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"}

package/dist/types/system/react-utils/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/context.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,GAAG;IAC3C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,YAAY,CAAC,EAAE,CAAC,CAAA;CACjB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAA;AAEhE;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,WAAW,EACvC,OAAO,GAAE,oBAAoB,CAAC,WAAW,CAAM,GAC9C,mBAAmB,CAAC,WAAW,CAAC,CA2BlC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/context.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,GAAG;IAC3C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,YAAY,CAAC,EAAE,CAAC,CAAA;CACjB;AAED,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAA;AAEhE;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,WAAW,EACvC,OAAO,GAAE,oBAAoB,CAAC,WAAW,CAAM,GAC9C,mBAAmB,CAAC,WAAW,CAAC,CA2BlC"}

package/dist/types/system/react-utils/dom-props.d.ts

@@ -0,0 +1,3 @@
+export declare const DOMPropNames: Set<string>;
+export declare const DOMEventNames: Set<string>;
+//# sourceMappingURL=dom-props.d.ts.map

package/dist/types/system/react-utils/dom-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-props.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/dom-props.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,aAgIvB,CAAA;AAEF,eAAO,MAAM,aAAa,aAkDxB,CAAA"}

package/dist/types/system/react-utils/filter-dom-props.d.ts

@@ -0,0 +1,39 @@
+import type { AriaLabelingProps, DOMProps } from "@react-types/shared";
+interface Options {
+    /**
+     * If the filter should be enabled.
+     */
+    enabled?: boolean;
+    /**
+     * If labelling associated aria properties should be included in the filter.
+     */
+    labelable?: boolean;
+    /**
+     * A Set of other property names that should be included in the filter.
+     */
+    propNames?: Set<string>;
+    /**
+     * A Set of other property names that should be removed from the filter.
+     */
+    omitPropNames?: Set<string>;
+    /**
+     * A Set of event names that should be excluded from the filter.
+     */
+    omitEventNames?: Set<string>;
+    /**
+     * Whether to omit data-* props.
+     */
+    omitDataProps?: boolean;
+    /**
+     * Whether to omit event props.
+     */
+    omitEventProps?: boolean;
+}
+/**
+ * Filters out all props that aren't valid DOM props or defined via override prop obj.
+ * @param props - The component props to be filtered.
+ * @param opts - Props to override.
+ */
+export declare function filterDOMProps(props: DOMProps & AriaLabelingProps, opts?: Options): DOMProps & AriaLabelingProps;
+export {};
+//# sourceMappingURL=filter-dom-props.d.ts.map

package/dist/types/system/react-utils/filter-dom-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-dom-props.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/filter-dom-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAItE,UAAU,OAAO;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAMD;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,QAAQ,GAAG,iBAAiB,EACnC,IAAI,GAAE,OAAY,GACjB,QAAQ,GAAG,iBAAiB,CAiD9B"}

package/dist/types/system/react-utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./context";
 export * from "./refs";
+export * from "./filter-dom-props";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/system/react-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/oui",
-  "version": "0.0.0-snapshot-20250813090518",
+  "version": "0.0.0-snapshot-20250813172831",
   "sideEffects": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",
@@ -47,7 +47,7 @@
     "storybook": "9.1.1",
     "tsx": "^4.20.3",
     "typescript": "5.7.3",
-    "@opengovsg/oui-theme": "0.0.0-snapshot-20250813090518",
+    "@opengovsg/oui-theme": "0.0.0-snapshot-20250813172831",
     "@oui/chromatic": "0.0.0",
     "@oui/eslint-config": "0.0.0",
     "@oui/prettier-config": "0.0.0",
@@ -73,14 +73,16 @@
     "react-aria": "^3.41.1",
     "react-aria-components": "^1.10.1",
     "react-stately": "^3.39.0",
+    "scroll-into-view-if-needed": "^3.1.0",
     "type-fest": "^4.41.0",
-    "use-deep-compare": "^1.3.0"
+    "use-deep-compare": "^1.3.0",
+    "usehooks-ts": "^3.1.1"
   },
   "prettier": "@oui/prettier-config",
   "peerDependencies": {
     "motion": ">=11.12.0 || >=12.0.0-alpha.1",
     "react-aria-components": "^1.10.1",
-    "@opengovsg/oui-theme": "0.0.0-snapshot-20250813090518"
+    "@opengovsg/oui-theme": "0.0.0-snapshot-20250813172831"
   },
   "scripts": {
     "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",