@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/page/parts/PageHeader.d.ts

@@ -0,0 +1,152 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren, ReactNode } from 'react';
+export declare const pageHeader: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    headingActionsWrapper: string;
+    titles: string;
+    actions: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            headingActionsWrapper?: import('tailwind-merge').ClassNameValue;
+            titles?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    headingActionsWrapper: string;
+    titles: string;
+    actions: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    headingActionsWrapper: string;
+    titles: string;
+    actions: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface BreadcrumbItem {
+    href: string;
+    label: string;
+}
+export interface PageHeaderProps extends PropsWithChildren<VariantProps<typeof pageHeader>> {
+    /**
+     * Array of breadcrumb items to display in the page header.
+     * @deprecated Use renderBreadcrumbs prop for router integration support. Will be removed in v2.0.
+     */
+    pagePath?: BreadcrumbItem[];
+    /**
+     * Custom render function for breadcrumbs. Receives pagePath items if provided.
+     * @param items - The breadcrumb items from pagePath prop, or undefined
+     * @default Renders Breadcrumbs with RawBreadcrumbLink components using pagePath data
+     * @example
+     * ```tsx
+     * // Custom rendering with Tanstack Router
+     * import { Breadcrumb, BreadcrumbLink, Breadcrumbs } from '@payfit/unity-components/integrations/tanstack-router'
+     *
+     * <PageHeader
+     *   renderBreadcrumbs={() => (
+     *     <Breadcrumbs wrap="nowrap">
+     *       <Breadcrumb>
+     *         <BreadcrumbLink to="/">Home</BreadcrumbLink>
+     *       </Breadcrumb>
+     *     </Breadcrumbs>
+     *   )}
+     * >
+     *   <PageHeading variant="title">My Page</PageHeading>
+     * </PageHeader>
+     * ```
+     * @example
+     * ```tsx
+     * // Using pagePath data with custom rendering
+     * <PageHeader
+     *   pagePath={[{ href: '/', label: 'Home' }]}
+     *   renderBreadcrumbs={(items) => (
+     *     <Breadcrumbs wrap="nowrap" items={items}>
+     *       {item => (
+     *         <Breadcrumb key={item.href}>
+     *           <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
+     *         </Breadcrumb>
+     *       )}
+     *     </Breadcrumbs>
+     *   )}
+     * >
+     *   <PageHeading variant="title">My Page</PageHeading>
+     * </PageHeader>
+     * ```
+     */
+    renderBreadcrumbs?: (items: BreadcrumbItem[] | undefined) => ReactNode;
+    actions?: ReactNode;
+    /**
+     * @deprecated BreadcrumbComponent is no longer supported. Use renderBreadcrumbs instead.
+     */
+    BreadcrumbComponent?: never;
+}
+/**
+ * The PageHeader component provides a consistent layout for page headers with title, subtitle, and actions support.
+ *
+ * It creates a structured header for pages with support for breadcrumbs navigation, title/subtitle content, and action buttons.
+ * The component adapts to different screen sizes, reorganizing elements for optimal display on mobile and desktop views.
+ * @param {PageHeaderProps} props - Props for the PageHeader component
+ * @example
+ * ```tsx
+ * import { PageHeader, PageHeading, Button } from '@payfit/unity-components'
+ *
+ * // Legacy API (deprecated)
+ * <PageHeader
+ *   pagePath={[
+ *     { href: '/dashboard', label: 'Dashboard' },
+ *     { href: '/employees', label: 'Employees' }
+ *   ]}
+ *   actions={<Button>Save</Button>}
+ * >
+ *   <PageHeading variant="title">Employee List</PageHeading>
+ * </PageHeader>
+ * ```
+ * @example
+ * ```tsx
+ * import { PageHeader, PageHeading, Breadcrumbs, Breadcrumb, BreadcrumbLink } from '@payfit/unity-components'
+ *
+ * // New API with custom breadcrumbs
+ * <PageHeader
+ *   renderBreadcrumbs={() => (
+ *     <Breadcrumbs wrap="nowrap">
+ *       <Breadcrumb>
+ *         <BreadcrumbLink href="/dashboard">Dashboard</BreadcrumbLink>
+ *       </Breadcrumb>
+ *       <Breadcrumb>
+ *         <BreadcrumbLink href="/employees">Employees</BreadcrumbLink>
+ *       </Breadcrumb>
+ *     </Breadcrumbs>
+ *   )}
+ *   actions={<Button>Save</Button>}
+ * >
+ *   <PageHeading variant="title">Employee List</PageHeading>
+ * </PageHeader>
+ * ```
+ * @see {@link PageHeaderProps} for all available props
+ * @remarks
+ * - The `pagePath` prop is deprecated and will be removed in v2.0. Use `renderBreadcrumbs` for router integration support.
+ * - The `BreadcrumbComponent` prop is no longer supported. Use `renderBreadcrumbs` instead.
+ * [API](https://unity-components.payfit.io/?path=/docs/layout-page-pageheader--docs) • [Design docs](https://www.payfit.design/24f360409/p/202477-page-header)
+ */
+declare const PageHeader: import('react').ForwardRefExoticComponent<PageHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { PageHeader };

package/dist/esm/components/page/parts/PageHeader.js

@@ -0,0 +1,36 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { uyTv as p } from "@payfit/unity-themes";
+import { Breadcrumbs as y } from "../../breadcrumbs/Breadcrumbs.js";
+import { Breadcrumb as b } from "../../breadcrumbs/parts/Breadcrumb.js";
+import { RawBreadcrumbLink as x } from "../../breadcrumbs/parts/RawBreadcrumbLink.js";
+const h = p({
+  slots: {
+    base: "uy:flex uy:flex-col uy:gap-400",
+    headingActionsWrapper: "uy:flex uy:flex-col uy:gap-400 uy:md:flex-row",
+    titles: "uy:flex uy:flex-col uy:gap-100 uy:flex-1",
+    actions: "uy:flex uy:flex-row uy:gap-100"
+  }
+}), g = (a) => a ? /* @__PURE__ */ r(y, { items: a, wrap: "nowrap", children: (e) => /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(x, { href: e.href, children: e.label }) }) }) : null, w = f(
+  // eslint-disable-next-line @typescript-eslint/no-deprecated -- Internal usage for backward compatibility
+  ({ children: a, actions: e, pagePath: o, renderBreadcrumbs: d, ...c }, n) => {
+    const {
+      base: s,
+      titles: t,
+      headingActionsWrapper: u,
+      actions: i
+    } = h(), m = (d ?? g)(o);
+    return /* @__PURE__ */ l("header", { "data-dd-privacy": "allow", ...c, ref: n, className: s(), children: [
+      m,
+      /* @__PURE__ */ l("div", { className: u(), children: [
+        /* @__PURE__ */ r("div", { className: t(), children: a }),
+        e && /* @__PURE__ */ r("div", { className: i(), children: e })
+      ] })
+    ] });
+  }
+);
+w.displayName = "PageHeader";
+export {
+  w as PageHeader,
+  h as pageHeader
+};

package/dist/esm/components/page/parts/PageHeading.d.ts

@@ -0,0 +1,30 @@
+import { TextProps } from '../../text/Text.js';
+export interface PageHeadingProps extends Omit<TextProps, 'variant' | 'color'> {
+    /**
+     * The variant of the page heading.
+     * @default 'title'
+     */
+    variant: 'title' | 'subtitle';
+}
+/**
+ * The PageHeading component provides typography for page titles and subtitles with consistent styling.
+ *
+ * You can create properly styled page titles and subtitles using this component, which ensures correct
+ * font sizes, weights and colors according to the design system.
+ * @param {PageHeadingProps} props - Props for the PageHeading component
+ * @example
+ * ```tsx
+ * import { PageHeading } from '@payfit/unity-components'
+ *
+ * // For main page title
+ * <PageHeading variant="title">Employee Management</PageHeading>
+ *
+ * // For page subtitle
+ * <PageHeading variant="subtitle">View and manage employee information</PageHeading>
+ * ```
+ * @see {@link PageHeadingProps} for all available props
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/layout-page-pageheading--docs) • [Design docs](https://www.payfit.design/24f360409/p/202477-page-header)
+ */
+declare const PageHeading: import('react').ForwardRefExoticComponent<PageHeadingProps & import('react').RefAttributes<HTMLHeadingElement>>;
+export { PageHeading };

package/dist/esm/components/page/parts/PageHeading.js

@@ -0,0 +1,19 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { Text as n } from "../../text/Text.js";
+const i = a(
+  ({ variant: t, ...e }, o) => /* @__PURE__ */ r(
+    n,
+    {
+      "data-dd-privacy": "mask",
+      ...e,
+      ref: o,
+      variant: t === "title" ? "h1" : "subtitle",
+      color: t === "title" ? "content.neutral" : "content.neutral.low"
+    }
+  )
+);
+i.displayName = "PageHeading";
+export {
+  i as PageHeading
+};

package/dist/esm/components/pagination/Pagination.d.ts

@@ -0,0 +1,71 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export declare const pagination: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface PaginationProps extends VariantProps<typeof pagination>, ComponentPropsWithoutRef<'nav'> {
+    children: ReactNode;
+    /**
+     * The total number of pages.
+     * Use -1 to indicate an unknown page count (e.g., for server-paginated data where total pages are not known upfront).
+     * When -1, the End key is disabled and forward navigation has no upper limit.
+     */
+    pageCount: number;
+    /**
+     * The current page (1-based)
+     */
+    currentPage: number;
+    /**
+     * Callback fired when the page changes
+     * @param page - The new page number
+     * @param previous - The previous page number
+     * @param direction - The direction of navigation (1 for forward, -1 for backward)
+     */
+    onPageChange: (page: number, previous: number, direction: -1 | 1) => void;
+}
+/**
+ * The Pagination component provides a container for pagination controls with proper navigation semantics.
+ * This is the root component for composition-based pagination patterns.
+ * @example
+ * ```tsx
+ * import { Pagination, PaginationContent, PaginationItem, RawPaginationLink } from '@payfit/unity-components'
+ *
+ * function MyPagination() {
+ *   return (
+ *     <Pagination>
+ *       <PaginationContent>
+ *         <PaginationItem>
+ *           <RawPaginationLink href="/page/1" isActive>
+ *             1
+ *           </RawPaginationLink>
+ *         </PaginationItem>
+ *       </PaginationContent>
+ *     </Pagination>
+ *   )
+ * }
+ * ```
+ */
+declare const Pagination: import('react').ForwardRefExoticComponent<PaginationProps & import('react').RefAttributes<HTMLElement>>;
+export { Pagination };

package/dist/esm/components/pagination/Pagination.js

@@ -0,0 +1,102 @@
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as k, useRef as x, useCallback as f } from "react";
+import { uyTv as D } from "@payfit/unity-themes";
+import { useId as L } from "react-aria/useId";
+import { useIntl as A } from "react-intl";
+import { useOverlayTriggerState as I } from "react-stately/useOverlayTriggerState";
+import { PaginationJumpDialog as T } from "../client-side-pagination/parts/PaginationJumpDialog.js";
+import { PaginationContext as R } from "./PaginationContext.js";
+const g = D({
+  slots: {
+    base: "uy:flex uy:gap-100 uy:relative"
+  }
+}), j = k(
+  ({ children: c, pageCount: o, currentPage: i, onPageChange: s, ...p }, d) => {
+    const y = L(), b = A(), n = I({}), e = x(/* @__PURE__ */ new Map()), w = {
+      paginationLabel: b.formatMessage({
+        id: "unity:component:pagination:label",
+        defaultMessage: "Pagination"
+      })
+    }, l = {
+      paginationListId: `uy:pagination-${y}__list`
+    }, u = f(
+      (t) => {
+        s(t, i, Math.sign(t - i)), n.close(), requestAnimationFrame(() => {
+          const a = e.current.get(t);
+          a && a.focus();
+        });
+      },
+      [s, n, e, i]
+    ), v = f(
+      (t) => {
+        t.preventDefault();
+        let a = i;
+        switch (t.key) {
+          case "ArrowLeft":
+          case "ArrowDown":
+            a = Math.max(1, i - 1);
+            break;
+          case "ArrowRight":
+          case "ArrowUp":
+            a = o === -1 ? i + 1 : Math.min(i + 1, o);
+            break;
+          case "Home":
+            a = 1;
+            break;
+          case "End":
+            o !== -1 && (a = o);
+            break;
+        }
+        a !== i && (s(
+          a,
+          i,
+          Math.sign(a - i)
+        ), setTimeout(() => {
+          const m = e.current.get(a);
+          m && m.focus();
+        }, 0));
+      },
+      [o, i, s]
+    ), { base: M } = g();
+    return /* @__PURE__ */ r(
+      R.Provider,
+      {
+        value: {
+          pageCount: o,
+          currentPage: i,
+          onPageChange: s,
+          a11yIds: l,
+          pageRefs: e,
+          onKeyDown: v
+        },
+        children: /* @__PURE__ */ h(
+          "nav",
+          {
+            "data-dd-privacy": "allow",
+            ...p,
+            ref: d,
+            className: M(),
+            "aria-label": w.paginationLabel,
+            "aria-describedby": l.paginationListId,
+            children: [
+              /* @__PURE__ */ r(
+                T,
+                {
+                  pageCount: o,
+                  onJumpToPage: u,
+                  state: n
+                }
+              ),
+              c
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+j.displayName = "Pagination";
+export {
+  j as Pagination,
+  g as pagination
+};

package/dist/esm/components/pagination/PaginationContext.d.ts

@@ -0,0 +1,11 @@
+import { MutableRefObject } from 'react';
+export interface PaginationContextValue {
+    pageCount: number;
+    currentPage: number;
+    onPageChange: (page: number, previous: number, direction: -1 | 1) => void;
+    onKeyDown: (event: React.KeyboardEvent) => void;
+    a11yIds: Record<string, string>;
+    pageRefs: MutableRefObject<Map<number, HTMLElement | null>>;
+}
+export declare const PaginationContext: import('react').Context<PaginationContextValue | null>;
+export declare const usePaginationContext: () => PaginationContextValue;

package/dist/esm/components/pagination/PaginationContext.js

@@ -0,0 +1,15 @@
+import { createContext as n, useContext as o } from "react";
+const e = n(
+  null
+), a = () => {
+  const t = o(e);
+  if (!t)
+    throw new Error(
+      "usePaginationContext must be used within a Pagination component"
+    );
+  return t;
+};
+export {
+  e as PaginationContext,
+  a as usePaginationContext
+};

package/dist/esm/components/pagination/hooks/use-pagination-state.d.ts

@@ -0,0 +1,63 @@
+export interface UsePaginationStateOptions {
+    /**
+     * The total number of pages.
+     * Use -1 to indicate an unknown page count (e.g., for server-paginated data where total pages are not known upfront).
+     */
+    pageCount: number;
+    /**
+     * The initial page to start at (1-based)
+     * @default 1
+     */
+    initialPage?: number;
+    /**
+     * Callback fired when the page changes
+     * @param page - The new page number
+     * @param previous - The previous page number
+     * @param direction - The direction of navigation (1 for forward, -1 for backward)
+     */
+    onPageChange?: (page: number, previous: number, direction: -1 | 1) => void;
+}
+/**
+ * Hook that manages pagination state for client-side pagination.
+ * This hook provides state management and navigation helpers for pagination components.
+ * @param options - Configuration options for pagination state
+ * @param options.pageCount - The total number of pages.
+ * @param options.initialPage - The initial page to start at (1-based)
+ * @param options.onPageChange - Callback fired when the page changes
+ * @returns Object containing current pagination state and navigation functions: currentPage (current active page), previousPage (page before current), nextPage (page after current), and goToPage (navigation function accepting page number or 'next'/'previous')
+ * @example
+ * ```tsx
+ * import { usePaginationState, Pagination, PaginationContent, PaginationItem, RawPaginationLink } from '@payfit/unity-components'
+ *
+ * function MyPagination() {
+ *   const { currentPage, goToPage } = usePaginationState({
+ *     pageCount: 10,
+ *     initialPage: 1,
+ *   })
+ *
+ *   return (
+ *     <Pagination
+ *       pageCount={10}
+ *       currentPage={currentPage}
+ *       onPageChange={goToPage}
+ *     >
+ *       <PaginationContent>
+ *         {Array.from({ length: 10 }, (_, i) => i + 1).map(page => (
+ *           <PaginationItem key={page}>
+ *             <RawPaginationLink value={page}>
+ *               {page}
+ *             </RawPaginationLink>
+ *           </PaginationItem>
+ *         ))}
+ *       </PaginationContent>
+ *     </Pagination>
+ *   )
+ * }
+ * ```
+ */
+export declare function usePaginationState({ pageCount, initialPage, onPageChange, }: UsePaginationStateOptions): {
+    currentPage: number;
+    previousPage: number;
+    nextPage: number;
+    goToPage: (page: "previous" | "next" | number) => void;
+};

package/dist/esm/components/pagination/hooks/use-pagination-state.js

@@ -0,0 +1,27 @@
+import { useState as l, useCallback as o } from "react";
+function m({
+  pageCount: i,
+  initialPage: r = 1,
+  onPageChange: n
+}) {
+  const [t, a] = l(r), c = t - 1, u = t + 1, s = o(
+    (e) => {
+      n && n(e, t, Math.sign(e - t)), a(Math.max(1, Math.min(i, e)));
+    },
+    [t, i, n]
+  ), f = o(
+    (e) => {
+      s(e === "previous" ? t - 1 : e === "next" ? t + 1 : e);
+    },
+    [t, s]
+  );
+  return {
+    currentPage: t,
+    previousPage: c,
+    nextPage: u,
+    goToPage: f
+  };
+}
+export {
+  m as usePaginationState
+};

package/dist/esm/components/pagination/hooks/use-pagination-window.d.ts

@@ -0,0 +1,64 @@
+export type PaginationWindowItem = {
+    type: 'page';
+    value: number;
+} | {
+    type: 'ellipsis';
+    value: [number, number];
+};
+export interface UsePaginationWindowOptions {
+    /**
+     * The total number of pages.
+     * Use -1 to indicate an unknown page count (e.g., for infinite scroll or server-paginated data).
+     * When -1, the hook will show pages from 1 to currentPage + offset, ending with an ellipsis indicating unknown pages beyond.
+     */
+    pageCount: number;
+    /**
+     * The current page (1-based)
+     */
+    currentPage: number;
+    /**
+     * The maximum number of pages to show in the window
+     * @default 7
+     */
+    windowSize?: number;
+}
+/**
+ * Hook that generates a pagination window with ellipsis for large page counts.
+ * This hook provides the logic for determining which pages to show in a pagination component.
+ * @param options - Configuration options for the pagination window
+ * @param options.pageCount - The total number of pages.
+ * @param options.currentPage - The current page (1-based).
+ * @param options.windowSize - The maximum number of pages to show in the window.
+ * @returns Array of pagination items (pages and ellipsis)
+ * @example
+ * ```tsx
+ * import { usePaginationWindow } from '@payfit/unity-components'
+ *
+ * function MyPagination() {
+ *   const pages = usePaginationWindow({
+ *     pageCount: 20,
+ *     currentPage: 5,
+ *     windowSize: 7
+ *   })
+ *
+ *   return (
+ *     <Pagination>
+ *       <PaginationContent>
+ *         {pages.map((page, index) => (
+ *           <PaginationItem key={index}>
+ *             {page.type === 'page' ? (
+ *               <RawPaginationLink href={`/page/${page.value}`}>
+ *                 {page.value}
+ *               </RawPaginationLink>
+ *             ) : (
+ *               <PaginationEllipsis />
+ *             )}
+ *           </PaginationItem>
+ *         ))}
+ *       </PaginationContent>
+ *     </Pagination>
+ *   )
+ * }
+ * ```
+ */
+export declare function usePaginationWindow({ pageCount, currentPage, windowSize, }: UsePaginationWindowOptions): PaginationWindowItem[];

package/dist/esm/components/pagination/hooks/use-pagination-window.js

@@ -0,0 +1,15 @@
+import { useMemo as t } from "react";
+import { generatePaginationWithWindow as r } from "../utils/pagination-window.js";
+function a({
+  pageCount: o,
+  currentPage: i,
+  windowSize: n = 7
+}) {
+  return t(
+    () => r(o, i, n),
+    [o, i, n]
+  );
+}
+export {
+  a as usePaginationWindow
+};

package/dist/esm/components/pagination/parts/PaginationContent.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export declare const paginationContent: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0", unknown, unknown, undefined>>;
+export interface PaginationContentProps extends VariantProps<typeof paginationContent>, ComponentPropsWithoutRef<'ul'> {
+    children: ReactNode;
+}
+/**
+ * The PaginationContent component provides a list container for pagination items.
+ * This component renders as a ul element with proper list semantics.
+ * @param props.children - The children to render.
+ * @example
+ * ```tsx
+ * import { PaginationContent, PaginationItem, RawPaginationLink } from '@payfit/unity-components'
+ *
+ * function MyPaginationContent() {
+ *   return (
+ *     <PaginationContent>
+ *       <PaginationItem>
+ *         <RawPaginationLink href="/page/1">1</RawPaginationLink>
+ *       </PaginationItem>
+ *       <PaginationItem>
+ *         <RawPaginationLink href="/page/2">2</RawPaginationLink>
+ *       </PaginationItem>
+ *     </PaginationContent>
+ *   )
+ * }
+ * ```
+ */
+declare const PaginationContent: import('react').ForwardRefExoticComponent<PaginationContentProps & import('react').RefAttributes<HTMLUListElement>>;
+export { PaginationContent };

package/dist/esm/components/pagination/parts/PaginationContent.js

@@ -0,0 +1,37 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as m, useMemo as p } from "react";
+import { uyTv as g } from "@payfit/unity-themes";
+import { useIntl as c } from "react-intl";
+import { usePaginationContext as f } from "../PaginationContext.js";
+const y = g({
+  base: "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0"
+}), d = m(
+  ({ children: t, ...o }, a) => {
+    const n = c(), { pageCount: e, currentPage: i, a11yIds: r } = f(), s = n.formatMessage(
+      {
+        id: "unity:component:pagination:page-list:label",
+        defaultMessage: "Page {current} of {total}"
+      },
+      {
+        current: i,
+        total: e
+      }
+    ), u = p(() => y(), []);
+    return /* @__PURE__ */ l(
+      "ul",
+      {
+        ...o,
+        ref: a,
+        id: r.pagesList,
+        className: u,
+        "aria-label": s,
+        children: t
+      }
+    );
+  }
+);
+d.displayName = "PaginationContent";
+export {
+  d as PaginationContent,
+  y as paginationContent
+};