@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/checkbox-group-field/TanstackCheckGroupField.d.ts

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+import { TanstackCheckboxGroupProps } from '../checkbox-group/TanstackCheckboxGroup.js';
+import { LabelProps } from '../label/Label.js';
+export interface FieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** Helper text to display below the group. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the group. */
+    contextualLink?: ReactNode;
+}
+export type TanstackCheckGroupFieldProps = FieldProps & TanstackCheckboxGroupProps;
+/**
+ * `TanstackCheckGroupField` is a composite field for TanStack Form that renders a
+ * complete checkbox group (label, helper/error, group) and automatically connects to
+ * the field context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
+ *
+ * Behavior:
+ * - Group rendering: relies on `TanstackCheckboxGroup` to manage the value (array of
+ *   strings), focus, and events.
+ * - Messaging: renders helper text (`TanstackFormHelperText` via the `helperText` prop)
+ *   and error feedback (`TanstackFormFeedbackText`) according to the TanStack form state.
+ * - Contextual link: allows displaying an additional link below the field via the
+ *   `contextualLink` prop.
+ *
+ * Accessibility:
+ * - ARIA attributes (`aria-labelledby`, `aria-describedby`, `aria-details`) are wired by
+ *   `TanstackFormField` and its sub-parts to associate the label, helper, and feedback
+ *   with the control.
+ *
+ * Key props:
+ * - `label: string` — group label text.
+ * - `helperText?: ReactNode` — helper text displayed above the feedback.
+ * - `contextualLink?: ReactNode` — contextual link (referenced via `aria-details`).
+ * - Inherits the props from `TanstackCheckboxGroup` (except direct value management).
+ * - `isRequired?`, `requiredVariant?` — control how the required/optional indicator is displayed.
+ *
+ * Example:
+ * ```tsx
+ * import { TanstackCheckGroupField } from '@/components/checkbox-group-field/TanstackCheckGroupField'
+ * import { Checkbox } from '@/components/checkbox/Checkbox'
+ * import { useTanstackUnityForm } from '@/hooks/use-tanstack-form'
+ * import * as z from 'zod'
+ *
+ * const schema = z.object({
+ *   preferences: z.array(z.enum(['email','sms','push'])).min(1),
+ * })
+ *
+ * function Example() {
+ *   const form = useTanstackUnityForm({ validators: { onBlur: schema } })
+ *   return (
+ *     <form.AppForm>
+ *       <form.Form>
+ *         <form.AppField name="preferences">
+ *           {() => (
+ *             <TanstackCheckGroupField label="Preferences" helperText="Choose at least one option">
+ *               <Checkbox value="email">Email</Checkbox>
+ *               <Checkbox value="sms">SMS</Checkbox>
+ *               <Checkbox value="push">Push</Checkbox>
+ *             </TanstackCheckGroupField>
+ *           )}
+ *         </form.AppField>
+ *       </form.Form>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ *
+ * Migration notes from a non‑TanStack field:
+ * - Do not pass a `name` prop to the component — use `<form.AppField name="…">`.
+ * - `value`, `defaultValue`, and `isInvalid` are derived from the TanStack context.
+ */
+declare const TanstackCheckGroupField: import('react').ForwardRefExoticComponent<FieldProps & TanstackCheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackCheckGroupField };

package/dist/esm/components/checkbox-group-field/TanstackCheckGroupField.js

@@ -0,0 +1,40 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { TanstackCheckboxGroup as f } from "../checkbox-group/TanstackCheckboxGroup.js";
+import { TanstackFormFeedbackText as l } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as u } from "../form-field/TanstackFormField.js";
+function T({
+  helperText: r,
+  contextualLink: o,
+  isRequired: a,
+  isDisabled: i,
+  isReadOnly: t,
+  requiredVariant: c,
+  children: m,
+  label: s,
+  ...d
+}, k) {
+  return /* @__PURE__ */ n(u, { children: [
+    /* @__PURE__ */ e("div", { className: "uy:mt-25", children: /* @__PURE__ */ e(
+      f,
+      {
+        ref: k,
+        label: s,
+        requiredVariant: c,
+        helperText: r,
+        feedbackText: /* @__PURE__ */ e(l, {}),
+        ...d,
+        isDisabled: i,
+        isReadOnly: t,
+        isRequired: a,
+        children: m
+      }
+    ) }),
+    o
+  ] });
+}
+const F = p(T);
+F.displayName = "TanstackCheckGroupField";
+export {
+  F as TanstackCheckGroupField
+};

package/dist/esm/components/client-side-pagination/ClientSidePagination.d.ts

@@ -0,0 +1,103 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ComponentType } from 'react';
+import { PaginationLinkProps } from './parts/RawPaginationLink.js';
+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 ClientSidePaginationProps extends VariantProps<typeof pagination> {
+    /**
+     * The total number of pages to display
+     */
+    pageCount: number;
+    /**
+     * The current page for controlled mode usage
+     */
+    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;
+    /**
+     * 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;
+    /**
+     * Component used to render the pagination links
+     * @default 'RawPaginationLink'
+     */
+    LinkComponent?: ComponentType<PaginationLinkProps>;
+}
+/**
+ * The ClientSidePagination component helps users navigate through multiple pages of content by providing intuitive controls for moving between pages.
+ *
+ * This component is designed for client-side pagination use cases where state is managed in React state rather than URL parameters.
+ * For URL-driven pagination, use the composition-based Pagination components instead.
+ *
+ * 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 {ClientSidePaginationProps} props - Regular HTML div attributes plus pagination-specific properties
+ * @see {@link ClientSidePaginationProps} for all available props
+ * @example
+ * ```tsx
+ * import { ClientSidePagination } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const [currentPage, setCurrentPage] = useState(1)
+ *   return (
+ *     <ClientSidePagination
+ *       pageCount={10}
+ *       currentPage={currentPage}
+ *       onPageChange={(page) => setCurrentPage(page)}
+ *     />
+ *   )
+ * }
+ * ```
+ * @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 ClientSidePagination: import('react').ForwardRefExoticComponent<ClientSidePaginationProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ClientSidePagination };

package/dist/esm/components/client-side-pagination/ClientSidePagination.js

@@ -0,0 +1,177 @@
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { forwardRef as M, useRef as T, useMemo as q } from "react";
+import { uyTv as R } from "@payfit/unity-themes";
+import { useId as S } from "react-aria/useId";
+import { useIntl as E } from "react-intl";
+import { useOverlayTriggerState as W } from "react-stately/useOverlayTriggerState";
+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 { PaginationNavButton as y } from "./parts/PaginationNavButton.js";
+import { RawPaginationLink as K } from "./parts/RawPaginationLink.js";
+import { generatePaginationWithWindow as O } from "./utils/pagination-window.js";
+const H = R({
+  slots: {
+    base: "uy:flex uy:gap-100 uy:relative",
+    pagesList: "uy:flex uy:gap-100 uy:list-none uy:m-0 uy:p-0"
+  }
+}), _ = 7, z = M(
+  ({
+    pageCount: t,
+    defaultPage: c,
+    currentPage: u,
+    onPageHover: b,
+    onPageChange: f,
+    onNextPress: w,
+    onPreviousPress: P,
+    LinkComponent: D = K,
+    ...A
+  }, L) => {
+    const p = S(), l = E(), 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 = T(/* @__PURE__ */ new Map()), h = q(
+      () => O(
+        t,
+        s,
+        _
+      ),
+      [t, s]
+    ), k = new Intl.NumberFormat(l.locale, {
+      notation: "standard"
+    }), N = (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({
+        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
+        }
+      )
+    }, { base: F, pagesList: I } = H();
+    return /* @__PURE__ */ x(
+      "nav",
+      {
+        "data-dd-privacy": "allow",
+        ...A,
+        ref: L,
+        className: F(),
+        "aria-labelledby": g.paginationLabel,
+        children: [
+          /* @__PURE__ */ n(
+            J,
+            {
+              pageCount: t,
+              onJumpToPage: N,
+              state: m
+            }
+          ),
+          /* @__PURE__ */ n(
+            y,
+            {
+              variant: "previous",
+              isDisabled: s === 1,
+              onClick: () => {
+                i("previous"), P?.();
+              }
+            }
+          ),
+          /* @__PURE__ */ n("ul", { className: I(), "aria-label": g.pageListLabel, children: h.map(
+            (e, a) => e.type === "page" ? /* @__PURE__ */ n(
+              "li",
+              {
+                "aria-setsize": t,
+                "aria-posinset": e.value,
+                children: /* @__PURE__ */ n(
+                  D,
+                  {
+                    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: k.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();
+                }
+              }
+            ) }, `pagination-${p}-item-${a}`)
+          ) }),
+          /* @__PURE__ */ n(
+            y,
+            {
+              variant: "next",
+              isDisabled: s === t,
+              onClick: () => {
+                i("next"), w?.();
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+z.displayName = "ClientSidePagination";
+export {
+  z as ClientSidePagination,
+  H as pagination
+};

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

@@ -0,0 +1,12 @@
+export interface PaginationOptions {
+    pageCount: number;
+    initialPage?: number;
+    isControlled?: boolean;
+    onPageChange?: (page: number, previous: number, direction: -1 | 1) => void;
+}
+export declare function usePagination({ isControlled, pageCount, initialPage, onPageChange, }: PaginationOptions): {
+    currentPage: number;
+    previousPage: number;
+    nextPage: number;
+    goToPage: (page: "previous" | "next" | number) => void;
+};

package/dist/esm/components/client-side-pagination/hooks/use-pagination.js

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

package/dist/esm/components/client-side-pagination/parts/PaginationEllipsis.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ButtonProps } from 'react-aria-components/Button';
+import { paginationLink } from './RawPaginationLink.js';
+export interface PaginationEllipsisProps extends Omit<ButtonProps, 'value' | 'children' | 'className' | 'style' | 'slot'>, VariantProps<typeof paginationLink> {
+    value: [number, number];
+    id?: string;
+    isDisabled?: boolean;
+    isActive?: boolean;
+}
+declare const PaginationEllipsis: import('react').ForwardRefExoticComponent<PaginationEllipsisProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { PaginationEllipsis };

package/dist/esm/components/client-side-pagination/parts/PaginationEllipsis.js

@@ -0,0 +1,30 @@
+import { jsxs as l, 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/Button";
+import { useIntl as p } from "react-intl";
+const c = a({
+  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: [
+    /* @__PURE__ */ i("span", { "aria-hidden": !0, children: "…" }),
+    /* @__PURE__ */ i("span", { className: "uy:sr-only", children: t.formatMessage(
+      {
+        id: "unity:component:pagination:ellipsis:label",
+        defaultMessage: "More pages"
+      },
+      {
+        start: n,
+        end: u
+      }
+    ) })
+  ] });
+});
+f.displayName = "PaginationEllipsis";
+export {
+  f as PaginationEllipsis
+};

package/dist/esm/components/client-side-pagination/parts/PaginationJumpDialog.d.ts

@@ -0,0 +1,8 @@
+import { OverlayTriggerState } from 'react-stately/useOverlayTriggerState';
+interface PaginationJumpDialogProps {
+    pageCount: number;
+    onJumpToPage: (page: number) => void;
+    state: OverlayTriggerState;
+}
+export declare function PaginationJumpDialog({ pageCount, onJumpToPage, state, }: PaginationJumpDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/client-side-pagination/parts/PaginationJumpDialog.js

@@ -0,0 +1,144 @@
+import { jsxs as n, Fragment as F, jsx as o } from "react/jsx-runtime";
+import { useRef as l } from "react";
+import { uyTv as N } from "@payfit/unity-themes";
+import { useButton as O } from "react-aria/useButton";
+import { useOverlay as P } from "react-aria/useOverlay";
+import { useOverlayTrigger as D } from "react-aria/useOverlayTrigger";
+import { useIntl as B } from "react-intl";
+import { Button as y } from "../../button/Button.js";
+import { Icon as I } from "../../icon/Icon.js";
+import { Label as J } from "../../label/Label.js";
+const R = N({
+  slots: {
+    jumpButton: "uy:sr-only uy:outline-none uy:focus:not-sr-only uy:focus:absolute uy:focus:bottom-full uy:focus:z-10 uy:focus:m-100 uy:focus:rounded-50 uy:focus:underline uy:focus:bg-transparent uy:focus:text-content-primary uy:focus:typography-action uy:focus:ring-2 uy:focus:ring-offset-2 uy:focus:ring-utility-focus-ring",
+    jumpPopover: "uy:fixed uy:top-1/2 uy:left-1/2 uy:z-20 uy:transform uy:-translate-x-1/2 uy:-translate-y-1/2 uy:bg-surface-neutral uy:p-200 uy:rounded-200 uy:shadow-floating",
+    jumpForm: "uy:flex uy:flex-col uy:gap-100",
+    jumpFieldLabel: "uy:typography-body",
+    jumpFieldWrapper: "uy:mt-50 uy:flex uy:w-full uy:items-center uy:h-500 uy:border uy:border-solid uy:rounded-100 uy:border-border-form-enabled uy:bg-surface-form-enabled uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
+    jumpInput: "uy:pl-100 uy:flex-1 uy:outline-none uy:appearance-none uy:[&::-webkit-outer-spin-button]:appearance-none uy:[&::-webkit-inner-spin-button]:appearance-none",
+    jumpActions: "uy:flex uy:gap-150 uy:justify-end uy:mt-100"
+  }
+});
+function G({
+  pageCount: t,
+  onJumpToPage: c,
+  state: e
+}) {
+  const u = B(), i = l(null), p = l(null), m = l(null), { triggerProps: f } = D(
+    { type: "dialog" },
+    e,
+    i
+  ), { buttonProps: d } = O(
+    {
+      ...f,
+      "aria-label": u.formatMessage({
+        id: "unity:component:pagination:jump-dialog:button:text",
+        defaultMessage: "Jump to page"
+      })
+    },
+    i
+  ), { overlayProps: r } = P(
+    {
+      isOpen: e.isOpen,
+      onClose: e.close.bind(e),
+      shouldCloseOnBlur: !0,
+      isDismissable: !0
+    },
+    p
+  ), g = (a) => {
+    a.preventDefault();
+    const s = parseInt(m.current?.value || "", 10);
+    s >= 1 && s <= t && (c(s), e.close());
+  }, {
+    jumpButton: b,
+    jumpPopover: j,
+    jumpForm: h,
+    jumpFieldLabel: v,
+    jumpFieldWrapper: x,
+    jumpInput: w,
+    jumpActions: M
+  } = R();
+  return /* @__PURE__ */ n(F, { children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        ...d,
+        ref: i,
+        className: b(),
+        "aria-expanded": e.isOpen ? "true" : "false",
+        children: u.formatMessage({
+          id: "unity:component:pagination:jump-dialog:button:text",
+          defaultMessage: "Jump to page"
+        })
+      }
+    ),
+    e.isOpen && /* @__PURE__ */ o(
+      "div",
+      {
+        ...r,
+        ref: p,
+        className: j(),
+        "aria-label": u.formatMessage({
+          id: "unity:component:pagination:jump-dialog:overlay:label",
+          defaultMessage: "Jump to page"
+        }),
+        children: /* @__PURE__ */ n("form", { onSubmit: g, className: h(), children: [
+          /* @__PURE__ */ o(
+            J,
+            {
+              className: v(),
+              htmlFor: `jump-to-page-${r.id}-input`,
+              children: u.formatMessage(
+                {
+                  id: "unity:component:pagination:jump-dialog:input:label",
+                  defaultMessage: "Enter page number (between 1 and {total})"
+                },
+                { total: t }
+              )
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: x(), children: [
+            /* @__PURE__ */ o(
+              "input",
+              {
+                ref: m,
+                type: "number",
+                min: 1,
+                max: t,
+                className: w(),
+                id: `jump-to-page-${r.id}-input`,
+                autoFocus: !0,
+                onKeyDown: (a) => {
+                  a.key === "Escape" && e.close();
+                }
+              }
+            ),
+            /* @__PURE__ */ o(
+              I,
+              {
+                src: "CaretUpDownOutlined",
+                role: "presentation",
+                color: "content.neutral.low",
+                className: "uy:mx-50",
+                size: 20
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("div", { className: M(), children: [
+            /* @__PURE__ */ o(y, { variant: "ghost", onPress: e.close.bind(e), children: u.formatMessage({
+              id: "unity:component:pagination:jump-dialog:action:cancel",
+              defaultMessage: "Cancel"
+            }) }),
+            /* @__PURE__ */ o(y, { type: "submit", variant: "primary", children: u.formatMessage({
+              id: "unity:component:pagination:jump-dialog:action:go",
+              defaultMessage: "Go"
+            }) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  G as PaginationJumpDialog
+};

package/dist/esm/components/client-side-pagination/parts/PaginationNavButton.d.ts

@@ -0,0 +1,9 @@
+import { CircularIconButtonProps } from '../../icon-button/CircularIconButton.js';
+export interface PaginationNavButtonProps extends Omit<CircularIconButtonProps, 'icon' | 'title'> {
+    variant: 'previous' | 'next';
+}
+declare function PaginationNavButton({ variant, ...props }: PaginationNavButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationNavButton {
+    var displayName: string;
+}
+export { PaginationNavButton };

package/dist/esm/components/client-side-pagination/parts/PaginationNavButton.js

@@ -0,0 +1,32 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useIntl as r } from "react-intl";
+import { CircularIconButton as s } from "../../icon-button/CircularIconButton.js";
+function u({ variant: t, ...n }) {
+  const o = r(), e = o.formatMessage({
+    id: t === "previous" ? "unity:component:common:previous" : "unity:component:common:next",
+    defaultMessage: t === "previous" ? "Previous" : "Next"
+  }), i = o.formatMessage(
+    {
+      id: "unity:component:pagination:nav-button:description",
+      defaultMessage: t === "previous" ? "Go to previous page" : "Go to next page"
+    },
+    {
+      variant: e.toLowerCase()
+    }
+  );
+  return /* @__PURE__ */ a(
+    s,
+    {
+      ...n,
+      asElement: "button",
+      color: "content.neutral",
+      title: e,
+      "aria-label": i,
+      icon: t === "previous" ? "CaretLeftOutlined" : "CaretRightOutlined"
+    }
+  );
+}
+u.displayName = "PaginationNavButton";
+export {
+  u as PaginationNavButton
+};