@pantheon-systems/pds-toolkit-react 2.0.0-alpha.3 → 2.0.0-alpha.30

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

@@ -17,8 +17,12 @@ export interface SideNavGlobalItemProps extends NavigationItem {
         submenu: string;
         toggle: string;
     };
+    /**
+     * Callback to expand the sidebar on touch devices when collapsed.
+     */
+    onExpandSidebar?: () => 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, isSidebarCollapsed, labels, linkContent, links, onExpandSidebar, }: 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/TabMenu/TabMenu.d.ts

@@ -19,6 +19,7 @@ export interface TabMenuItemProps extends NavigationItem {
      */
     promoteActiveChildLink?: boolean;
 }
+export type TabMenuSize = 's' | 'm';
 /**
  * Prop types for TabMenu.
  */
@@ -35,9 +36,13 @@ export interface TabMenuProps extends ComponentPropsWithoutRef<'nav'> {
      * Menu items to render.
      */
     menuItems?: TabMenuItemProps[];
+    /**
+     * Size of the tab menu items.
+     */
+    size?: TabMenuSize;
 }
 /**
  * TabMenu UI component.
  */
-export declare const TabMenu: ({ ariaLabel, className, menuItems, ...props }: TabMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabMenu: ({ ariaLabel, className, menuItems, size, ...props }: TabMenuProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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,12 @@
 import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+import { BadgeColor } from '../../badges/Badge/Badge';
+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;
+declare const tierConfig: Record<string, {
+    color: BadgeColor;
+    label: string;
+}>;
+export type PlanTiers = keyof typeof tierConfig;
 export type WorkspaceSelectorItem = {
     /**
      * Name of the workspace.
@@ -87,10 +87,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 +95,5 @@ 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 declare const WorkspaceSelector: ({ ariaLabel, className, createWorkspaceLink, filterLabel, filterPlaceholder, menuHeading, minFilterItems, noResultsText, workspaceList, ...props }: WorkspaceSelectorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,14 +1,34 @@
 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 BannerType = Exclude<StatusType, 'success' | 'discovery'>;
-type Banner = {
+type BannerVariant = Exclude<StatusType, 'success'> | 'neutral';
+export interface BannerItemType {
+    /**
+     * Icon to display. Required for neutral type, ignored for other types.
+     */
+    iconName?: PDSIcon;
+    /**
+     * Unique identifier for the banner.
+     */
     id: string;
+    /**
+     * Whether the banner can be dismissed by the user.
+     */
     isDismissible?: boolean;
+    /**
+     * The message content of the banner.
+     */
     message: string | ReactNode;
+    /**
+     * Callback function called when the banner is dismissed.
+     */
     onDismiss?: () => void;
-    type?: BannerType;
-};
+    /**
+     * The type of banner, which determines icon and color.
+     */
+    type?: BannerVariant;
+}
 /**
  * Prop types for Banner
  */
@@ -16,11 +36,15 @@ export interface BannerProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Array of banner objects
      */
-    banners: Banner[];
+    banners: BannerItemType[];
     /**
      * Additional class names
      */
     className?: string;
+    /**
+     * Data context for sizing. Marketing context increases all sizes by one step.
+     */
+    dataContext?: DataContext;
     /**
      * Label for the dismiss button
      */
@@ -36,14 +60,10 @@ export interface BannerProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Type labels
      */
-    typeLabels?: {
-        critical: string;
-        info: string;
-        warning: string;
-    };
+    typeLabels?: Record<BannerVariant, string>;
 }
 /**
  * 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/NotificationsPopover/NotificationsPopover.d.ts

@@ -101,18 +101,13 @@ export interface NotificationsPopoverProps extends ComponentPropsWithoutRef<'spa
     unreadLabel?: string;
     /**
      * Text for the "View All" button
-     * @default 'View all'
+     * @default 'View all notifications'
      */
     viewAllText?: string;
-    /**
-     * If true, the component will be styled and rendered to work with the mobile version of the navbar menu
-     * @default true
-     */
-    withinNavbar?: boolean;
 }
 /**
  * NotificationsPopover UI component
  *
  * Bell icon trigger that opens a popover showing recent notifications.
  */
-export declare const NotificationsPopover: ({ ariaLabel, autoCloseOnClick, className, emptyText, loadingText, maxVisibleItems, menuHeading, notifications, onNotificationClick, onViewAllClick, showLoading, unreadCount, unreadLabel, viewAllText, withinNavbar, ...props }: NotificationsPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NotificationsPopover: ({ ariaLabel, autoCloseOnClick, className, emptyText, loadingText, maxVisibleItems, menuHeading, notifications, onNotificationClick, onViewAllClick, showLoading, unreadCount, unreadLabel, viewAllText, ...props }: NotificationsPopoverProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './toaster.css';
 declare const iconTypes: {
     readonly info: "circleInfo";
-    readonly success: "check";
+    readonly success: "circleCheck";
     readonly warning: "triangleExclamation";
     readonly critical: "diamondExclamation";
 };
@@ -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;