@payfit/unity-components 1.2.0 → 2.0.0

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
+};

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

@@ -1,11 +1,30 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { ButtonProps } from 'react-aria-components';
-import { paginationLink } from './PaginationLink.js';
-export interface PaginationEllipsisProps extends Omit<ButtonProps, 'value' | 'children' | 'className' | 'style' | 'slot'>, VariantProps<typeof paginationLink> {
-    value: [number, number];
+declare const paginationEllipsis: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface PaginationEllipsisProps extends VariantProps<typeof paginationEllipsis>, Omit<ButtonProps, 'value' | 'children' | 'className' | 'style' | 'slot'> {
+    /**
+     * The id of the ellipsis element
+     */
     id?: string;
+    /**
+     * Whether the ellipsis is disabled
+     */
     isDisabled?: boolean;
-    isActive?: boolean;
+    /**
+     * The range of pages represented by this ellipsis [start, end]
+     * When end is Infinity, it indicates an unknown page count
+     */
+    value: [number, number];
 }
+/**
+ * The PaginationEllipsis component renders an ellipsis indicator for pagination.
+ * This component is used to indicate that there are more pages between the visible range.
+ * @example
+ * ```tsx
+ * import { PaginationEllipsis } from '@payfit/unity-components'
+ *
+ * <PaginationEllipsis value={[5, 10]} />
+ * ```
+ */
 declare const PaginationEllipsis: import('react').ForwardRefExoticComponent<PaginationEllipsisProps & import('react').RefAttributes<HTMLButtonElement>>;
 export { PaginationEllipsis };

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

@@ -1,30 +1,34 @@
-import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
-import { uyTv as a } from "@payfit/unity-themes";
-import { Button as y } from "react-aria-components";
-import { useIntl as p } from "react-intl";
-const c = a({
+import { uyTv as y } from "@payfit/unity-themes";
+import { Button as c } from "react-aria-components";
+import { useIntl as p, FormattedMessage as f } from "react-intl";
+const m = y({
   base: [
     "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-pill uy:cursor-default",
     "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"
   ]
-}), f = r(({ value: s, ...e }, o) => {
-  const t = p(), [n, u] = s;
-  return /* @__PURE__ */ l(y, { ref: o, className: c(), ...e, children: [
+}), d = r(({ value: n, ...s }, o) => {
+  const t = p(), [u, e] = n, l = e === 1 / 0 ? t.formatMessage({
+    id: "unity:component:common:unknown",
+    defaultMessage: "unknown"
+  }) : e;
+  return /* @__PURE__ */ a(c, { ref: o, className: m(), ...s, children: [
     /* @__PURE__ */ i("span", { "aria-hidden": !0, children: "…" }),
-    /* @__PURE__ */ i("span", { className: "uy:sr-only", children: t.formatMessage(
+    /* @__PURE__ */ i("span", { className: "uy:sr-only", children: /* @__PURE__ */ i(
+      f,
       {
         id: "unity:component:pagination:ellipsis:label",
-        defaultMessage: "More pages"
-      },
-      {
-        start: n,
-        end: u
+        defaultMessage: "More pages",
+        values: {
+          start: u,
+          end: l
+        }
       }
     ) })
   ] });
 });
-f.displayName = "PaginationEllipsis";
+d.displayName = "PaginationEllipsis";
 export {
-  f as PaginationEllipsis
+  d as PaginationEllipsis
 };

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

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface PaginationItemProps extends ComponentPropsWithoutRef<'li'> {
+    children: ReactNode;
+    /**
+     * The position of this item in the set (for aria-posinset)
+     * If not provided, will be calculated from context
+     */
+    pageNumber?: number;
+    /**
+     * The total number of pages (for aria-setsize)
+     * If not provided, will be calculated from context
+     */
+    pageCount?: number;
+}
+/**
+ * The PaginationItem component provides a list item wrapper for individual pagination controls.
+ * This component renders as a li element and should contain pagination links or buttons.
+ * It automatically gets pageCount from context and calculates aria attributes.
+ * @param props.children - The children to render.
+ * @param props.pageNumber - The position of this item in the set (for aria-posinset).
+ * @param props.pageCount - The total number of pages (for aria-setsize).
+ * @example
+ * ```tsx
+ * import { PaginationItem, RawPaginationLink } from '@payfit/unity-components'
+ *
+ * function MyPaginationItem() {
+ *   return (
+ *     <PaginationItem pageNumber={1}>
+ *       <RawPaginationLink href="/page/1" isActive>
+ *         1
+ *       </RawPaginationLink>
+ *     </PaginationItem>
+ *   )
+ * }
+ * ```
+ */
+declare const PaginationItem: import('react').ForwardRefExoticComponent<PaginationItemProps & import('react').RefAttributes<HTMLLIElement>>;
+export { PaginationItem };

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

@@ -0,0 +1,22 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { usePaginationContext as p } from "../PaginationContext.js";
+const f = m(
+  ({ children: o, pageNumber: a, pageCount: i, ...e }, n) => {
+    const { pageCount: r } = p(), t = i ?? r;
+    return /* @__PURE__ */ s(
+      "li",
+      {
+        ...e,
+        ref: n,
+        "aria-setsize": t !== -1 ? t : void 0,
+        "aria-posinset": a,
+        children: o
+      }
+    );
+  }
+);
+f.displayName = "PaginationItem";
+export {
+  f as PaginationItem
+};

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

@@ -0,0 +1,11 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { LinkProps } from 'react-aria-components';
+export declare const paginationLink: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface PaginationLinkProps extends LinkProps, VariantProps<typeof paginationLink> {
+    value: number;
+    id?: string;
+    isDisabled?: boolean;
+    isCurrent?: boolean;
+}
+declare const RawPaginationLink: import('react').ForwardRefExoticComponent<PaginationLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawPaginationLink };

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

@@ -0,0 +1,60 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as h, useRef as v, useCallback as o } from "react";
+import { uyTv as x } from "@payfit/unity-themes";
+import { Link as P } from "react-aria-components";
+import { useIntl as k } from "react-intl";
+import { usePaginationContext as w } from "../PaginationContext.js";
+const R = x({
+  base: [
+    "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-pill uy:transition-colors",
+    "uy:enabled:text-content-neutral-enabled uy:enabled:bg-transparent uy:cursor-pointer",
+    "uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:bg-surface-neutral-disabled uy:data-[disabled]:cursor-not-allowed",
+    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-hover",
+    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-pressed uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-pressed",
+    "uy:aria-[current=page]:bg-surface-neutral-active",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2",
+    "uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-solid uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:outline-offset-2"
+  ]
+}), C = h(
+  ({ isCurrent: r, isDisabled: l, value: t, onPress: c, ...i }, n) => {
+    const y = k(), { currentPage: a, onKeyDown: f, pageRefs: s, onPageChange: u } = w(), d = v(null), g = o(
+      (e) => {
+        d.current = e, e ? s.current.set(t, e) : s.current.delete(t), typeof n == "function" ? n(e) : n && (n.current = e);
+      },
+      [t, s, n]
+    ), b = r ?? a === t, p = o(() => {
+      if (!i.href) {
+        const e = t > a ? 1 : -1;
+        u(t, a, e);
+      }
+    }, [t, a, u, i.href]);
+    return /* @__PURE__ */ m(
+      P,
+      {
+        ...i,
+        ref: g,
+        className: R(),
+        isDisabled: l,
+        onPress: c ?? p,
+        "aria-current": b ? "page" : void 0,
+        "aria-label": y.formatMessage(
+          {
+            id: "unity:component:pagination:link:label",
+            defaultMessage: "Page {page}"
+          },
+          {
+            page: t
+          }
+        ),
+        onKeyDown: (e) => {
+          f(e);
+        }
+      }
+    );
+  }
+);
+C.displayName = "RawPaginationLink";
+export {
+  C as RawPaginationLink,
+  R as paginationLink
+};

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

@@ -0,0 +1,22 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { LinkProps } from 'react-aria-components';
+declare const paginationNavButton: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface RawPaginationNextProps extends Omit<LinkProps, 'children' | 'className' | 'style' | 'isDisabled' | 'aria-label' | 'title'>, VariantProps<typeof paginationNavButton> {
+    id?: string;
+    isDisabled?: boolean;
+    href?: string;
+}
+/**
+ * The RawPaginationNext component renders a "Next" link for pagination.
+ * This component is always a link for consistent integration with routing libraries.
+ * @example
+ * ```tsx
+ * import { RawPaginationNext } from '@payfit/unity-components'
+ *
+ * <RawPaginationNext href="/page/3" isDisabled={currentPage === pageCount}>
+ *   Next
+ * </RawPaginationNext>
+ * ```
+ */
+declare const RawPaginationNext: import('react').ForwardRefExoticComponent<RawPaginationNextProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawPaginationNext };

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

@@ -0,0 +1,70 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { uyTv as b } from "@payfit/unity-themes";
+import { Link as x } from "react-aria-components";
+import { useIntl as v } from "react-intl";
+import { Icon as h } from "../../icon/Icon.js";
+import { Tooltip as w } from "../../tooltip/Tooltip.js";
+import { usePaginationContext as P } from "../PaginationContext.js";
+const N = b({
+  base: [
+    "uy:min-w-300 uy:h-300 uy:p-25 uy:flex uy:justify-center uy:items-center uy:typography-action uy:rounded-circle uy:transition-colors",
+    "uy:text-content-neutral-lowest uy:enabled:bg-transparent uy:cursor-pointer",
+    "uy:hover:text-content-neutral-hover uy:hover:bg-surface-neutral-hover",
+    "uy:active:text-content-neutral-pressed uy:active:bg-surface-neutral-pressed",
+    "uy:data-[pressed]:text-content-neutral-pressed uy:data-[pressed]:bg-surface-neutral-pressed",
+    "uy:data-[disabled]:text-content-neutral-disabled uy:data-[disabled]:bg-transparent uy:data-[disabled]:cursor-not-allowed",
+    "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-2"
+  ]
+}), D = g(
+  ({ isDisabled: i, href: o, onPress: s, ...u }, l) => {
+    const a = v(), {
+      onKeyDown: c,
+      currentPage: e,
+      pageCount: r,
+      onPageChange: y
+    } = P(), t = a.formatMessage({
+      id: "unity:component:common:next",
+      defaultMessage: "Next"
+    }), d = a.formatMessage(
+      {
+        id: "unity:component:pagination:nav-button:description",
+        defaultMessage: "Go to next page"
+      },
+      {
+        variant: t
+      }
+    ), p = (m) => {
+      c(m);
+    }, f = () => {
+      !o && (r === -1 || e < r) && y(e + 1, e, 1);
+    };
+    return /* @__PURE__ */ n(w, { title: t, children: /* @__PURE__ */ n(
+      x,
+      {
+        ref: l,
+        href: o,
+        className: N(),
+        isDisabled: i,
+        onPress: s ?? f,
+        "aria-label": t,
+        "aria-description": d,
+        onKeyDown: p,
+        ...u,
+        children: /* @__PURE__ */ n(
+          h,
+          {
+            src: "CaretRightOutlined",
+            size: 20,
+            color: "inherit",
+            role: "presentation"
+          }
+        )
+      }
+    ) });
+  }
+);
+D.displayName = "RawPaginationNext";
+export {
+  D as RawPaginationNext
+};

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

@@ -0,0 +1,22 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { LinkProps } from 'react-aria-components';
+declare const paginationNavButton: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface RawPaginationPreviousProps extends Omit<LinkProps, 'children' | 'className' | 'style' | 'isDisabled' | 'aria-label' | 'title'>, VariantProps<typeof paginationNavButton> {
+    id?: string;
+    isDisabled?: boolean;
+    href?: string;
+}
+/**
+ * The RawPaginationPrevious component renders a "Next" link for pagination.
+ * This component is always a link for consistent integration with routing libraries.
+ * @example
+ * ```tsx
+ * import { RawPaginationPrevious } from '@payfit/unity-components'
+ *
+ * <RawPaginationPrevious href="/page/3" isDisabled={currentPage === pageCount}>
+ *   Next
+ * </RawPaginationPrevious>
+ * ```
+ */
+declare const RawPaginationPrevious: import('react').ForwardRefExoticComponent<RawPaginationPreviousProps & import('react').RefAttributes<HTMLAnchorElement>>;
+export { RawPaginationPrevious };