@payfit/unity-components 1.2.0 → 2.0.0

package/dist/esm/components/nav/parts/RawNavItem.js

@@ -0,0 +1,106 @@
+import { jsx as u, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as C, useMemo as I } from "react";
+import { uyTv as i, uyMerge as j } from "@payfit/unity-themes";
+import { Link as R, Button as A } from "react-aria-components";
+import { useRouter as k } from "../../../providers/router/RouterProvider.js";
+const B = i({
+  slots: {
+    base: [
+      "uy:group uy:cursor-pointer uy:grid uy:w-full uy:grid-cols-[auto_1fr_auto] uy:items-center uy:py-100 uy:px-150 uy:gap-100 uy:rounded-75 uy:outline-0 uy:transition-all",
+      "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-active uy:data-[pressed]:bg-surface-neutral-pressed",
+      "uy:focus:outline-0 uy:data-[focus-visible]:outline-none uy:data-[focus-visible]:ring-2 uy:data-[focus-visible]:ring-utility-focus-ring uy:data-[focus-visible]:ring-offset-2"
+    ],
+    prefix: "uy:p-25 uy:empty:hidden uy:text-content-neutral-low",
+    suffix: "uy:flex uy:gap-100 uy:items-center uy:text-content-neutral-low uy:justify-self-end uy:text-right uy:empty:hidden",
+    label: [
+      "uy:flex-1 uy:basis-full uy:text-left uy:truncate uy:overflow-hidden uy:whitespace-break-spaces uy:typography-body uy:text-content-neutral"
+    ]
+  },
+  variants: {
+    level: {
+      0: "uy:pl-150",
+      1: "uy:pl-600"
+    },
+    isDisabled: {
+      true: {
+        base: "uy:pointer-events-none",
+        label: "uy:text-content-neutral-disabled"
+      },
+      false: ""
+    }
+  }
+}), M = i({
+  extend: B,
+  variants: {
+    isActive: {
+      true: {
+        base: "uy:bg-surface-neutral-active",
+        prefix: "uy:text-content-neutral",
+        label: "uy:typography-body-strong"
+      },
+      false: {
+        base: "",
+        prefix: "uy:text-content-neutral-low",
+        label: "uy:typography-body"
+      }
+    }
+  }
+}), _ = C(
+  ({
+    children: y,
+    level: r = 0,
+    prefix: n,
+    suffix: l,
+    onPress: c,
+    href: t,
+    isCurrent: f,
+    isDisabled: s = !1,
+    isExact: p = !1,
+    ...m
+  }, d) => {
+    const o = k(), b = t ? R : A, e = o && t ? o.isActive(t, p) : f, {
+      rawNavItemClassName: v,
+      labelClassName: x,
+      prefixClassName: g,
+      suffixClassName: N
+    } = I(() => {
+      const a = M({ level: r, isActive: e, isDisabled: s });
+      return {
+        rawNavItemClassName: j(a.base(), a.label()),
+        prefixClassName: a.prefix(),
+        suffixClassName: a.suffix(),
+        labelClassName: a.label()
+      };
+    }, [e, s, r]), w = Object.assign(
+      {},
+      e !== void 0 && {
+        "data-current": e,
+        "aria-current": e ? "page" : void 0
+      },
+      !t && { tabIndex: s ? -1 : void 0 }
+    );
+    return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ h(
+      b,
+      {
+        ...w,
+        ...m,
+        ref: d,
+        className: v,
+        href: t,
+        onPress: c,
+        isDisabled: s,
+        "data-level": r,
+        children: [
+          n && /* @__PURE__ */ u("span", { className: g, children: n({ isCurrent: e ?? !1 }) }),
+          /* @__PURE__ */ u("span", { className: x, children: y }),
+          l && /* @__PURE__ */ u("span", { className: N, children: l })
+        ]
+      }
+    ) });
+  }
+);
+_.displayName = "RawNavItem";
+export {
+  _ as RawNavItem,
+  B as navItemBase
+};

package/dist/esm/components/page/Page.js

@@ -6,7 +6,7 @@ const o = t({
   variants: {
     variant: {
       default: [
-        "uy:px-200 uy:py-300 uy:md:p-300 uy:lg:p-400",
+        "uy:px-200 uy:py-300 uy:md:p-300 uy:lg:p-500",
         // a tiny margin left so the shadow is visible
         "uy:md:ml-100",
         "uy:bg-surface-neutral uy:md:border uy:md:border-solid uy:md:border-border-neutral uy:border-r-0 uy:md:rounded-tl-400 uy:md:rounded-bl-400 uy:md:shadow-raising"

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

@@ -1,6 +1,5 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren, ReactNode } from 'react';
-import { BreadcrumbProps } from '../../breadcrumbs/parts/Breadcrumb.js';
 export declare const pageHeader: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
@@ -44,9 +43,62 @@ export declare const pageHeader: import('tailwind-variants').TVReturnType<{
     titles: string;
     actions: string;
 }, undefined, unknown, unknown, undefined>>;
+export interface BreadcrumbItem {
+    href: string;
+    label: string;
+}
 export interface PageHeaderProps extends PropsWithChildren<VariantProps<typeof pageHeader>> {
-    pagePath?: BreadcrumbProps[];
+    /**
+     * 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.
@@ -58,24 +110,42 @@ export interface PageHeaderProps extends PropsWithChildren<VariantProps<typeof p
  * ```tsx
  * import { PageHeader, PageHeading, Button } from '@payfit/unity-components'
  *
+ * // Legacy API (deprecated)
  * <PageHeader
  *   pagePath={[
  *     { href: '/dashboard', label: 'Dashboard' },
  *     { href: '/employees', label: 'Employees' }
  *   ]}
- *   actions={
- *     <>
- *       <Button variant="secondary">Cancel</Button>
- *       <Button variant="primary">Save</Button>
- *     </>
- *   }
+ *   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>
- *   <PageHeading variant="subtitle">View and manage your employees</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>>;

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

@@ -1,34 +1,36 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { uyTv as u } from "@payfit/unity-themes";
-import { Breadcrumbs as n } from "../../breadcrumbs/Breadcrumbs.js";
-import { Breadcrumb as y } from "../../breadcrumbs/parts/Breadcrumb.js";
-const x = u({
+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 = p(
-  ({ children: s, actions: a, pagePath: r, ...i }, c) => {
+}), 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: d,
+      base: s,
       titles: t,
-      headingActionsWrapper: f,
-      actions: m
-    } = x();
-    return /* @__PURE__ */ o("header", { "data-dd-privacy": "allow", ...i, ref: c, className: d(), children: [
-      r && /* @__PURE__ */ e(n, { items: r, wrap: "nowrap", children: (l) => /* @__PURE__ */ e(y, { href: l.href, label: l.label }) }),
-      /* @__PURE__ */ o("div", { className: f(), children: [
-        /* @__PURE__ */ e("div", { className: t(), children: s }),
-        a && /* @__PURE__ */ e("div", { className: m(), children: a })
+      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 })
       ] })
     ] });
   }
 );
-g.displayName = "PageHeader";
+w.displayName = "PageHeader";
 export {
-  g as PageHeader,
-  x as pageHeader
+  w as PageHeader,
+  h as pageHeader
 };

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

@@ -1,92 +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;
-            pagesList?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import('tailwind-merge').ClassNameValue | {
             base?: import('tailwind-merge').ClassNameValue;
-            pagesList?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
     base: string;
-    pagesList: string;
 }, undefined, {
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {
             base?: import('tailwind-merge').ClassNameValue;
-            pagesList?: import('tailwind-merge').ClassNameValue;
         };
     };
 } | {}, {
     base: string;
-    pagesList: string;
 }, import('tailwind-variants').TVReturnType<unknown, {
     base: string;
-    pagesList: string;
 }, undefined, unknown, unknown, undefined>>;
-export interface PaginationProps extends VariantProps<typeof pagination> {
+export interface PaginationProps extends VariantProps<typeof pagination>, ComponentPropsWithoutRef<'nav'> {
+    children: ReactNode;
     /**
-     * The total number of pages to display
+     * 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 for controlled mode usage
+     * The current page (1-based)
      */
-    currentPage?: number;
-    /**
-     * The initial page to display when in uncontrolled mode
-     */
-    defaultPage?: number;
-    /**
-     * Optional callback function that is triggered when a page hover event occurs.
-     * Can be used to handle logic or effects related to the hover action over a specific page.
-     * @param {number} page - The number of the page that is being hovered over.
-     */
-    onPageHover?: (page: number) => void;
+    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;
-    /**
-     * Optional callback for the "next" button's press
-     */
-    onNextPress?: () => void;
-    /**
-     * Optional callback for previous button press
-     */
-    onPreviousPress?: () => void;
+    onPageChange: (page: number, previous: number, direction: -1 | 1) => void;
 }
 /**
- * The Pagination component helps users navigate through multiple pages of content by providing intuitive controls for moving between pages.
- *
- * Pagination offers both controlled and uncontrolled usage, support for keyboard navigation, and automatic handling of page ranges with ellipsis for large numbers of pages.
- * @param {PaginationProps} props - Regular HTML div attributes plus pagination-specific properties
- * @see {@link PaginationProps} for all available props
+ * 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 } from '@payfit/unity-components'
+ * import { Pagination, PaginationContent, PaginationItem, RawPaginationLink } from '@payfit/unity-components'
  *
- * function Example() {
+ * function MyPagination() {
  *   return (
- *     <Pagination
- *       pageCount={10}
- *       defaultPage={1}
- *       onPageChange={(page) => console.log(`Navigated to page ${page}`)}
- *     />
+ *     <Pagination>
+ *       <PaginationContent>
+ *         <PaginationItem>
+ *           <RawPaginationLink href="/page/1" isActive>
+ *             1
+ *           </RawPaginationLink>
+ *         </PaginationItem>
+ *       </PaginationContent>
+ *     </Pagination>
  *   )
  * }
  * ```
- * @remarks
- * [API](https://unity-components.payfit.io/?path=/docs/navigation-pagination--docs) • [Demo](https://unity-components.payfit.io/?path=/docs/navigation-pagination--docs)
  */
-declare const Pagination: import('react').ForwardRefExoticComponent<PaginationProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const Pagination: import('react').ForwardRefExoticComponent<PaginationProps & import('react').RefAttributes<HTMLElement>>;
 export { Pagination };

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

@@ -1,176 +1,102 @@
-import { jsxs as I, jsx as n } from "react/jsx-runtime";
-import { forwardRef as x, useRef as M, useMemo as T } from "react";
-import { uyTv as q } from "@payfit/unity-themes";
-import { useId as E } from "react-aria";
-import { useIntl as R } from "react-intl";
-import { useOverlayTriggerState as W } from "react-stately";
-import { usePagination as $ } from "./hooks/use-pagination.js";
-import { PaginationEllipsis as j } from "./parts/PaginationEllipsis.js";
-import { PaginationJumpDialog as J } from "./parts/PaginationJumpDialog.js";
-import { PaginationLink as K } from "./parts/PaginationLink.js";
-import { PaginationNavButton as y } from "./parts/PaginationNavButton.js";
-import { generatePaginationWithWindow as O } from "./utils/pagination-window.js";
-const S = q({
+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";
+import { useIntl as A } from "react-intl";
+import { useOverlayTriggerState as I } from "react-stately";
+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",
-    pagesList: "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0"
+    base: "uy:flex uy:gap-100 uy:relative"
   }
-}), H = 7, _ = x(
-  ({
-    pageCount: t,
-    defaultPage: c,
-    currentPage: u,
-    onPageHover: b,
-    onPageChange: f,
-    onNextPress: P,
-    onPreviousPress: w,
-    ...D
-  }, A) => {
-    const p = E(), l = R(), v = u !== void 0 && f !== void 0 && c === void 0, { currentPage: s, goToPage: i } = $({
-      pageCount: t,
-      initialPage: v ? u : c,
-      onPageChange: f,
-      isControlled: v
-    }), m = W({}), r = M(/* @__PURE__ */ new Map()), L = T(
-      () => O(
-        t,
-        s,
-        H
-      ),
-      [t, s]
-    ), h = new Intl.NumberFormat(l.locale, {
-      notation: "standard"
-    }), k = (e) => {
-      i(e), m.close(), requestAnimationFrame(() => {
-        const a = r.current.get(e);
-        a && a.focus();
-      });
-    }, d = (e, a) => {
-      switch (e.key) {
-        case "ArrowLeft":
-        case "ArrowUp":
-          e.preventDefault(), a > 1 && (i(a - 1), requestAnimationFrame(() => {
-            r.current.get(a - 1)?.focus();
-          }));
-          break;
-        case "ArrowRight":
-        case "ArrowDown":
-          e.preventDefault(), a < t && (i(a + 1), requestAnimationFrame(() => {
-            r.current.get(a + 1)?.focus();
-          }));
-          break;
-        case "Home":
-          e.preventDefault(), i(1), requestAnimationFrame(() => {
-            r.current.get(1)?.focus();
-          });
-          break;
-        case "End":
-          e.preventDefault(), i(t), requestAnimationFrame(() => {
-            r.current.get(t)?.focus();
-          });
-          break;
-      }
-    }, g = {
-      paginationLabel: l.formatMessage({
+}), 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"
-      }),
-      pageListLabel: l.formatMessage(
-        {
-          id: "unity:component:pagination:page-list:label",
-          defaultMessage: "Page {current} of {total}"
-        },
-        {
-          current: s,
-          total: t
+      })
+    }, 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;
         }
-      )
-    }, { base: N, pagesList: F } = S();
-    return /* @__PURE__ */ I(
-      "nav",
+        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,
       {
-        "data-dd-privacy": "allow",
-        ...D,
-        ref: A,
-        className: N(),
-        "aria-labelledby": g.paginationLabel,
-        children: [
-          /* @__PURE__ */ n(
-            J,
-            {
-              pageCount: t,
-              onJumpToPage: k,
-              state: m
-            }
-          ),
-          /* @__PURE__ */ n(
-            y,
-            {
-              variant: "previous",
-              isDisabled: s === 1,
-              onClick: () => {
-                i("previous"), w?.();
-              }
-            }
-          ),
-          /* @__PURE__ */ n("ul", { className: F(), "aria-label": g.pageListLabel, children: L.map(
-            (e, a) => e.type === "page" ? /* @__PURE__ */ n(
-              "li",
-              {
-                "aria-setsize": t,
-                "aria-posinset": e.value,
-                children: /* @__PURE__ */ n(
-                  K,
-                  {
-                    ref: (o) => {
-                      o ? r.current.set(e.value, o) : r.current.delete(e.value);
-                    },
-                    onPress: () => {
-                      i(e.value);
-                    },
-                    onHoverChange: (o) => {
-                      o && b?.(e.value);
-                    },
-                    onKeyDown: (o) => {
-                      d(o, e.value);
-                    },
-                    isActive: e.value === s,
-                    value: e.value,
-                    children: h.format(e.value)
-                  }
-                )
-              },
-              `pagination-${p}-item-${a}`
-            ) : /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-              j,
-              {
-                value: e.value,
-                onKeyDown: (o) => {
-                  d(o, -1);
-                },
-                onPress: () => {
-                  m.open();
+        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
                 }
-              }
-            ) }, `pagination-${p}-item-${a}`)
-          ) }),
-          /* @__PURE__ */ n(
-            y,
-            {
-              variant: "next",
-              isDisabled: s === t,
-              onClick: () => {
-                i("next"), P?.();
-              }
-            }
-          )
-        ]
+              ),
+              c
+            ]
+          }
+        )
       }
     );
   }
 );
-_.displayName = "Pagination";
+j.displayName = "Pagination";
 export {
-  _ as Pagination,
-  S as pagination
+  j as Pagination,
+  g as pagination
 };