@pantheon-systems/pds-toolkit-react 2.0.0-alpha.4 → 2.0.0-alpha.40

package/dist/components/navigation/SideNav/SideNav.d.ts

@@ -13,6 +13,12 @@ export interface SideNavProps extends ComponentPropsWithoutRef<'nav'> {
      * Additional class names
      */
     className?: string;
+    /**
+     * When true, renders a dropdown menu in place of the standard navigation at mobile viewports.
+     * The mobile breakpoint is controlled by the `mobileBreakpoint` prop on `GlobalWrapper`.
+     * Defaults to `false` — the standard navigation is shown at all breakpoints.
+     */
+    hasMobileDropdown?: boolean;
     /**
      * Heading text. If a link is passed, it will be rendered as a link.
      */
@@ -36,4 +42,4 @@ export interface SideNavProps extends ComponentPropsWithoutRef<'nav'> {
 /**
  * SideNav UI component
  */
-export declare const SideNav: ({ ariaLabel, className, headingText, labels, menuItems, mobileMenuSelectTextFallback, ...props }: SideNavProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SideNav: ({ ariaLabel, className, hasMobileDropdown, headingText, labels, menuItems, mobileMenuSelectTextFallback, ...props }: SideNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/SideNavGlobal/SideNavGlobal.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { SideNavGlobalItemProps } from './SideNavGlobalItem';
 import './side-nav-global.css';
 /**
@@ -13,11 +13,6 @@ export interface SideNavGlobalProps extends ComponentPropsWithoutRef<'div'> {
      * Additional class names
      */
     className?: string;
-    /**
-     * Should the Pantheon logo be displayed above the menu items?
-     * It will not be displayed in the mobile view regardless of this value.
-     */
-    hasLogo?: boolean;
     /**
      * Is the sidebar collapsed?
      */
@@ -29,22 +24,17 @@ export interface SideNavGlobalProps extends ComponentPropsWithoutRef<'div'> {
         submenu: string;
         toggle: string;
     };
-    /**
-     * Where should the logo link to? A fully-formed link element.
-     * Only necessary if `hasLogo` is true.
-     * If the logo should not be a link, leave blank.
-     */
-    logoLinkContent?: ReactNode;
     /**
      * Menu items to render.
      */
     menuItems?: SideNavGlobalItemProps[];
     /**
-     * Text to display in the mobile menu trigger button when no active link is found.
+     * Callback to expand the sidebar. When provided and the sidebar is collapsed,
+     * tapping a nav item with children will expand the sidebar instead of showing a flyout.
      */
-    mobileMenuSelectTextFallback?: string;
+    onExpandSidebar?: () => void;
 }
 /**
  * SideNavGlobal UI component
  */
-export declare const SideNavGlobal: ({ ariaLabel, className, hasLogo, isSidebarCollapsed, labels, logoLinkContent, menuItems, mobileMenuSelectTextFallback, ...props }: SideNavGlobalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavGlobal: ({ ariaLabel, className, isSidebarCollapsed, labels, menuItems, onExpandSidebar, ...props }: SideNavGlobalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/SideNavGlobal/SideNavGlobalItem.d.ts

@@ -6,6 +6,12 @@ export interface SideNavGlobalItemProps extends NavigationItem {
      * Icon to display next to the link content.
      */
     icon?: PDSIcon;
+    /**
+     * Whether the item's submenu is expanded. Controlled by the parent
+     * `SideNavGlobal` so expansion state stays in React rather than being
+     * mutated on the DOM.
+     */
+    isExpanded?: boolean;
     /**
      * Flag indicating whether the sidebar is collapsed.
      */
@@ -17,8 +23,16 @@ export interface SideNavGlobalItemProps extends NavigationItem {
         submenu: string;
         toggle: string;
     };
+    /**
+     * Callback to expand the sidebar on touch devices when collapsed.
+     */
+    onExpandSidebar?: () => void;
+    /**
+     * Callback to toggle the item's submenu expansion.
+     */
+    onToggleExpand?: () => void;
 }
 /**
  * SideNavGlobalItem UI component
  */
-export declare const SideNavGlobalItem: ({ icon, isActive, isSidebarCollapsed, labels, linkContent, links, }: SideNavGlobalItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavGlobalItem: ({ icon, isActive, isExpanded, isSidebarCollapsed, labels, linkContent, links, onExpandSidebar, onToggleExpand, }: SideNavGlobalItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/{NavMenu/NavMenu.d.ts → SiteMenu/SiteMenu.d.ts}

@@ -1,10 +1,11 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { NavMenuItem } from '../../../libs/types/navigation-types';
+import '@components/Dropdown/dropdown.css';
 import './nav-menu.css';
 /**
- * Prop types for NavMenu
+ * Prop types for SiteMenu
  */
-interface NavMenuProps extends ComponentPropsWithoutRef<'nav'> {
+interface SiteMenuProps extends ComponentPropsWithoutRef<'nav'> {
     /**
      * Aria label for `nav` element.
      */
@@ -21,13 +22,9 @@ interface NavMenuProps extends ComponentPropsWithoutRef<'nav'> {
      * Menu Items.
      */
     menuItems?: NavMenuItem[];
-    /**
-     *  Mobile menu will be enabled when viewport is at or below this number in pixels.
-     */
-    mobileMenuMaxWidth?: number;
 }
 /**
- * NavMenu UI component
+ * SiteMenu UI component
  */
-export declare const NavMenu: ({ ariaLabel, className, colorType, menuItems, mobileMenuMaxWidth, ...props }: NavMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SiteMenu: ({ ariaLabel, className, colorType, menuItems, ...props }: SiteMenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/navigation/SiteMenu/SiteMenuDropdown.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { NavMenuItem } from '../../../libs/types/navigation-types';
+/**
+ * Prop types for SiteMenuDropdown
+ */
+interface SiteMenuDropdownProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Menu items. If omitted or empty, renders as a plain top-level link.
+     */
+    items?: NavMenuItem[];
+    /**
+     * Menu label shown on the trigger button.
+     */
+    label?: string;
+}
+/**
+ * SiteMenuDropdown — a sub-menu for SiteMenu items that have child links.
+ * Desktop: Floating UI dropdown (opens on hover or click).
+ * Mobile: NavAccordion inline expansion.
+ * Both are always in the DOM; CSS driven by [data-pds-mobile] shows the right one.
+ */
+export declare const SiteMenuDropdown: ({ items, label }: SiteMenuDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/navigation/TreeNav/TreeNav.d.ts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { NavigationItem } from '../../../libs/types/navigation-types';
+import './tree-nav.css';
+export type TreeNavItem = NavigationItem & {
+    /**
+     * A unique identifier for this item — typically its route or URL path (e.g. `/guides/overview`).
+     *
+     * Required on any item that has children (`links` array). The component uses this to
+     * re-find the item's DOM node after a re-render and restore its expanded/collapsed state.
+     * Without it, a user-opened nested submenu will collapse whenever the component re-renders.
+     *
+     * Leaf items (no `links`) do not need `path`.
+     */
+    path?: string;
+};
+/**
+ * Prop types for TreeNav
+ */
+export interface TreeNavProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for the navigation.
+     */
+    ariaLabel: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Heading text. If a link is passed, it will be rendered as a link.
+     */
+    headingText?: string | ReactElement;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+    /**
+     * Menu items to render.
+     */
+    menuItems: TreeNavItem[];
+}
+/**
+ * TreeNav UI component — a multi-level collapsible tree navigation for dense
+ * hierarchical content such as documentation sites.
+ */
+export declare const TreeNav: ({ ariaLabel, className, headingText, labels, menuItems, ...props }: TreeNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/UserMenu/UserMenu.d.ts

@@ -58,12 +58,8 @@ export interface UserMenuProps extends ComponentPropsWithoutRef<'span'> {
      * User display name.
      */
     userName?: string;
-    /**
-     * If true, the workspace selector will be styled and rendered to work with the mobile version of the navbar menu. Defaults to true.
-     */
-    withinNavbar?: boolean;
 }
 /**
  * UserMenu UI component
  */
-export declare const UserMenu: ({ ariaLabel, className, menuItems, userEmail, userImageSrc, userName, withinNavbar, ...props }: UserMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UserMenu: ({ ariaLabel, className, menuItems, userEmail, userImageSrc, userName, ...props }: UserMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/WorkspaceSelector/WorkspaceSelector.d.ts

@@ -1,12 +1,6 @@
 import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+import '@components/Dropdown/dropdown.css';
 import './workspace-selector.css';
-declare const tierLabels: {
-    silver: string;
-    gold: string;
-    platinum: string;
-    diamond: string;
-};
-export type PlanTiers = keyof typeof tierLabels;
 export type WorkspaceSelectorItem = {
     /**
      * Name of the workspace.
@@ -33,10 +27,6 @@ export type WorkspaceSelectorItem = {
      * Only used when isRestricted is true.
      */
     onRestrictedSelection?: () => void;
-    /**
-     * Account plan tier.
-     */
-    planTier?: PlanTiers;
     /**
      * Visually-hidden label to indicate restricted access.
      * @default 'Restricted'
@@ -87,10 +77,6 @@ export interface WorkspaceSelectorProps extends ComponentPropsWithoutRef<'span'>
      * Text to display when no results are found.
      */
     noResultsText?: string;
-    /**
-     * Is this component located in the top nav? Only applies when using the Navbar component from this toolkit. Defaults to true per design.
-     */
-    withinNavbar?: boolean;
     /**
      * List of all workspaces for a user.
      */
@@ -99,5 +85,4 @@ export interface WorkspaceSelectorProps extends ComponentPropsWithoutRef<'span'>
 /**
  * WorkspaceSelector UI component
  */
-export declare const WorkspaceSelector: ({ ariaLabel, className, createWorkspaceLink, filterLabel, filterPlaceholder, menuHeading, minFilterItems, noResultsText, withinNavbar, workspaceList, ...props }: WorkspaceSelectorProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const WorkspaceSelector: ({ ariaLabel, className, createWorkspaceLink, filterLabel, filterPlaceholder, menuHeading, minFilterItems, noResultsText, workspaceList, ...props }: WorkspaceSelectorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/navigation-utilities.d.ts

@@ -39,6 +39,18 @@ export declare const isActiveItem: (item: NavigationItem) => boolean;
  * const inActiveTrail = isActiveTrail(parentItem); // True if parent or any child is active
  */
 export declare const isActiveTrail: (item: NavigationItem) => boolean;
+/**
+ * Serializes the active state of an entire menu tree into a string signature.
+ * The signature changes on any route change — including navigation between two
+ * routes under the same top-level item — not just when a different top-level
+ * item enters the active trail. Used to reset user-driven expansion overrides
+ * so submenu expansion follows the active trail again after navigation.
+ * @param items - Array of navigation items to serialize
+ * @returns A string signature representing the tree's active state
+ * @example
+ * const signature = buildActiveSignature(menuItems);
+ */
+export declare const buildActiveSignature: (items: NavigationItem[]) => string;
 /**
  * Checks if the provided content is an interactive element (link, button, etc.)
  * @param content - The React content to examine

package/dist/components/notifications/Banner/Banner.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { StatusType } from '../../../libs/types/custom-types';
+import { DataContext, StatusType } from '../../../libs/types/custom-types';
 import { PDSIcon } from '../../icons/Icon/Icon';
 import './banner.css';
 type BannerVariant = Exclude<StatusType, 'success'> | 'neutral';
@@ -41,6 +41,10 @@ export interface BannerProps extends ComponentPropsWithoutRef<'div'> {
      * Additional class names
      */
     className?: string;
+    /**
+     * Data context for sizing. Marketing context increases all sizes by one step.
+     */
+    dataContext?: DataContext;
     /**
      * Label for the dismiss button
      */
@@ -61,5 +65,5 @@ export interface BannerProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Banner UI component
  */
-export declare const Banner: ({ banners, className, dismissLabel, labelNext, labelPrevious, typeLabels, ...props }: BannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Banner: ({ banners, className, dataContext, dismissLabel, labelNext, labelPrevious, typeLabels, ...props }: BannerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/notifications/SectionMessage/SectionMessage.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
-import { StatusType } from '../../../libs/types/custom-types';
+import { DataContext, StatusType } from '../../../libs/types/custom-types';
 import { Button } from '../../buttons/Button/Button';
 import './section-message.css';
 export type SectionMessageType = StatusType;
@@ -14,6 +14,10 @@ export interface SectionMessageProps extends ComponentPropsWithoutRef<'div'> {
      * Can include any Button props except for size and variant.
      */
     ctaButton?: ComponentPropsWithoutRef<typeof Button>;
+    /**
+     * Data context for sizing. Marketing context increases all sizes by one step.
+     */
+    dataContext?: DataContext;
     /**
      * Label for dismiss button. Provide a translation string if needed.
      */
@@ -50,5 +54,5 @@ export interface SectionMessageProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * SectionMessage UI component
  */
-export declare const SectionMessage: ({ className, ctaButton, dismissLabel, id, isDismissible, message, onDismiss, title, type, typeLabels, ...props }: SectionMessageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SectionMessage: ({ className, ctaButton, dataContext, dismissLabel, id, isDismissible, message, onDismiss, title, type, typeLabels, ...props }: SectionMessageProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/notifications/Toaster/Toast.d.ts

@@ -18,6 +18,12 @@ declare const defaultTypeLabels: {
  * Prop types for Toast
  */
 interface ToastProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Duration in milliseconds before the toast auto-dismisses. When set, shows
+     * a progress bar and pause button. Populated automatically by useToast —
+     * consumers do not need to set this.
+     */
+    autoCloseDuration?: number;
     /**
      * Toast message content.
      */
@@ -30,6 +36,11 @@ interface ToastProps extends ComponentPropsWithoutRef<'div'> {
      * ID of individual toast.
      */
     id?: string;
+    /**
+     * React-Toastify toast ID, used to control the pause/resume timer.
+     * Populated automatically by useToast — consumers do not need to set this.
+     */
+    toastId?: string | number;
     /**
      * Type of toast to show.
      */
@@ -42,5 +53,5 @@ interface ToastProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Toast UI component
  */
-export declare const Toast: ({ children, className, id, type, typeLabels, }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toast: ({ autoCloseDuration, children, className, id, toastId, type, typeLabels, }: ToastProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/notifications/Toaster/Toaster.d.ts

@@ -1,18 +1,27 @@
-import { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import 'react-toastify/dist/ReactToastify.css';
 import './toaster.css';
+export declare const MIN_AUTO_CLOSE_DURATION = 30000;
+type PauseResumeLabels = {
+    pause: string;
+    resume: string;
+};
+export interface ToasterContextValue {
+    labelStrings: PauseResumeLabels;
+}
+export declare const ToasterContext: React.Context<ToasterContextValue>;
 /**
- * Prop types for Toast
+ * Prop types for Toaster
  */
 interface ToasterProps extends ComponentPropsWithoutRef<'div'> {
-    /**
-     * Duration in milliseconds before the toast will auto-close.
-     */
-    autoCloseDuration?: number;
     /**
      * Additional class names
      */
     className?: string;
+    /**
+     * Label strings for the pause and resume buttons. Provide translation strings if needed.
+     */
+    labelStrings?: PauseResumeLabels;
     /**
      * Maximum number of toasts that can be displayed at once.
      */
@@ -25,5 +34,5 @@ interface ToasterProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Toaster UI component
  */
-export declare const Toaster: ({ autoCloseDuration, className, limit, position, }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toaster: ({ className, labelStrings, limit, position, }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/notifications/Toaster/useToast.d.ts

@@ -1,5 +1,7 @@
 import { ReactElement } from 'react';
 import { cssTransition, toast as toastApi, ToastOptions } from 'react-toastify';
+import { MIN_AUTO_CLOSE_DURATION } from './Toaster';
+export { MIN_AUTO_CLOSE_DURATION };
 export declare enum ToastType {
     Critical = "critical",
     Info = "info",

package/dist/components/overlays/Drawer/Drawer.d.ts

@@ -0,0 +1,58 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './drawer.css';
+export type DrawerPlacement = 'left' | 'right';
+export type DrawerSize = 's' | 'm' | 'l';
+export interface DrawerProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
+    /**
+     * Aria label that describes the drawer. Will default to the title if not provided.
+     */
+    ariaLabel?: string;
+    /**
+     * Main content for the drawer.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Text for close button aria-label attribute.
+     */
+    closeButtonLabel?: string;
+    /**
+     * If true, clicking outside the drawer will not close it.
+     */
+    disableOutsideClick?: boolean;
+    /**
+     * Indicates if the built-in close button will be shown.
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Is the drawer open?
+     */
+    isOpen?: boolean;
+    /**
+     * Which edge of the screen the drawer slides in from.
+     */
+    placement?: DrawerPlacement;
+    /**
+     * Function to set the drawer open state.
+     */
+    setIsOpen?: (isOpen: boolean) => void;
+    /**
+     * Preset width of the drawer. Overridden by the `width` prop if provided.
+     */
+    size?: DrawerSize;
+    /**
+     * Title for the drawer. Accepts a string or ReactNode (e.g., a logo). Leave empty for no title.
+     */
+    title?: ReactNode;
+    /**
+     * Custom width for the drawer. Accepts any valid CSS value (e.g. '50vw', '800px', '40rem'). Overrides the `size` prop.
+     */
+    width?: string;
+}
+/**
+ * Drawer UI component
+ */
+export declare const Drawer: ({ ariaLabel, children, className, closeButtonLabel, disableOutsideClick, hasCloseButton, isOpen: isOpenProp, placement, setIsOpen: setIsOpenProp, size, title, width, ...props }: DrawerProps) => any;

package/dist/components/overlays/FullScreenOverlay/FullScreenOverlay.d.ts

@@ -0,0 +1,45 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PDSIcon } from '../../icons/Icon/Icon';
+import './full-screen-overlay.css';
+export interface FullScreenOverlayProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Accessible label for the overlay.
+     */
+    ariaLabel: string;
+    /**
+     * Background color of the overlay surface.
+     * - 'default': white / dark-mode dark (default)
+     * - 'default-secondary': slightly off-white / dark-mode slightly lighter dark
+     */
+    background?: 'default' | 'default-secondary';
+    /**
+     * Content rendered inside the overlay.
+     */
+    children: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Accessible label for the close button.
+     */
+    closeButtonLabel?: string;
+    /**
+     * Icon to use for the close button. Defaults to 'compress'.
+     */
+    closeIconName?: PDSIcon;
+    /**
+     * Whether to show the built-in close button. Set to false when providing
+     * your own close control (e.g. in a UtilityBar).
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Whether the overlay is currently open.
+     */
+    isOpen: boolean;
+    /**
+     * Callback when the overlay should close.
+     */
+    onClose: () => void;
+}
+export declare const FullScreenOverlay: ({ ariaLabel, background, children, className, closeButtonLabel, closeIconName, hasCloseButton, isOpen, onClose, ...props }: FullScreenOverlayProps) => any;

package/dist/components/{Modal → overlays/Modal}/Modal.d.ts

@@ -42,7 +42,7 @@ export interface ModalProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * The width of the modal.
      */
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    size?: 's' | 'm' | 'l' | 'xl';
     /**
      * Text for modal title
      */

package/dist/components/{Pagination → pagination/Pagination}/Pagination.d.ts

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { HeadingLevelCommon } from '../../libs/types/custom-types';
+import { HeadingLevelCommon } from '../../../libs/types/custom-types';
 import './pagination.css';
+export type PaginationSize = 's' | 'm';
 /**
  * Prop types for Pagination
  */
@@ -43,6 +44,10 @@ export interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {
      * For example: `onPageChange={(page) => setCurrentPage(page)}`
      */
     onPageChange?: (page: number) => void;
+    /**
+     * Size of the pagination items.
+     */
+    size?: PaginationSize;
     /**
      * Total number of items to paginate.
      */
@@ -51,4 +56,4 @@ export interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {
 /**
  * Pagination UI component
  */
-export declare const Pagination: ({ bufferCount, className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, totalItemCount, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ bufferCount, className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, size, totalItemCount, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/PaginationCompact/PaginationCompact.d.ts

@@ -0,0 +1,49 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { HeadingLevelCommon } from '../../../libs/types/custom-types';
+import './pagination-compact.css';
+/**
+ * Prop types for PaginationCompact
+ */
+export interface PaginationCompactProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Current page number.
+     */
+    currentPage: number;
+    /**
+     * Heading level. Defaults to `h2`.
+     */
+    headingLevel?: HeadingLevelCommon;
+    /**
+     * Heading text for the pagination component. Will only be accessible to screen readers.
+     */
+    headingText?: string;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * Translatable label strings.
+     */
+    labelStrings?: {
+        next: string;
+        of: string;
+        pageSelect: string;
+        previous: string;
+    };
+    /**
+     * Callback to handle page change.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Total number of items to paginate.
+     */
+    totalItemCount: number;
+}
+/**
+ * PaginationCompact UI component — page selector dropdown with previous/next controls.
+ */
+export declare const PaginationCompact: ({ className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, totalItemCount, ...props }: PaginationCompactProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/PaginationMini/PaginationMini.d.ts

@@ -0,0 +1,55 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { HeadingLevelCommon } from '../../../libs/types/custom-types';
+import './pagination-mini.css';
+/**
+ * Prop types for PaginationMini
+ */
+export interface PaginationMiniProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Current page number.
+     */
+    currentPage: number;
+    /**
+     * Heading level. Defaults to `h2`.
+     */
+    headingLevel?: HeadingLevelCommon;
+    /**
+     * Heading text for the pagination component. Will only be accessible to screen readers.
+     */
+    headingText?: string;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * Translatable label strings.
+     */
+    labelStrings?: {
+        next: string;
+        previous: string;
+    };
+    /**
+     * Title of the next page. Displayed as the clickable label on the next button.
+     */
+    nextPage?: string;
+    /**
+     * Callback to handle page change.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Title of the previous page. Displayed as the clickable label on the previous button.
+     */
+    previousPage?: string;
+    /**
+     * Total number of items to paginate.
+     */
+    totalItemCount: number;
+}
+/**
+ * PaginationMini UI component — previous/next navigation with page labels.
+ */
+export declare const PaginationMini: ({ className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, nextPage, onPageChange, previousPage, totalItemCount, ...props }: PaginationMiniProps) => import("react/jsx-runtime").JSX.Element;