@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/number-input/NumberInput.js

@@ -1,32 +1,32 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import { forwardRef as k } from "react";
 import { uyTv as z } from "@payfit/unity-themes";
 import { NumberField as F, Group as G, Input as T } from "react-aria-components";
 import { Icon as W } from "../icon/Icon.js";
 import "@payfit/unity-icons";
 import { useIntl as q } from "react-intl";
-import { CircularIconButton as i } from "../icon-button/CircularIconButton.js";
+import { CircularIconButton as s } from "../icon-button/CircularIconButton.js";
 import { Spinner as A } from "../spinner/Spinner.js";
 const H = z({
   slots: {
     base: [
-      "uy:group uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-75",
+      "uy:group uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75",
       "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"
     ],
     wrapper: [
-      "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75 uy:max-w-full uy:justify-between uy:items-center"
+      "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between uy:items-center"
     ],
     input: [
       "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:min-w-0 uy:max-w-full",
       "uy:placeholder:text-content-neutral-lowest"
     ],
     prefix: [
-      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-75",
+      "uy:flex-grow-0 uy:content-center uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75",
       "uy:active:border-border-form-active"
     ],
     suffix: [
-      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-75",
+      "uy:flex-grow-0 uy:content-center uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75",
       "uy:active:border-border-form-active"
     ],
     state: [
@@ -83,23 +83,23 @@ const H = z({
   }
 }), J = k(
   ({
-    withControls: s = !1,
+    withControls: i = !1,
     defaultValue: u,
     formatOptions: p,
-    isDisabled: b,
-    isInvalid: f,
+    isDisabled: y,
+    isInvalid: b,
     isLoading: a,
     isReadOnly: d,
     isRequired: g,
     maxValue: n,
     minValue: l,
-    prefix: y,
+    prefix: f,
     onBlur: x,
     onChange: w,
     onClearButtonPress: v,
     step: h,
     suffix: m,
-    value: r,
+    value: e,
     ...N
   }, c) => {
     const {
@@ -110,20 +110,20 @@ const H = z({
       suffix: E,
       state: O,
       controls: S
-    } = H({ isReadOnly: d }), o = q(), B = r !== void 0 && !isNaN(r), D = u !== void 0 && !isNaN(u), P = (B || D) && !s && !a && !d && !b;
+    } = H({ isReadOnly: d }), o = q(), B = e !== void 0 && !isNaN(e), D = u !== void 0 && !isNaN(u), P = (B || D) && !i && !a && !d && !y;
     return /* @__PURE__ */ t(
       F,
       {
         ref: c,
         className: M(),
-        value: r,
+        value: e,
         defaultValue: u,
         minValue: l,
         maxValue: n,
         step: h,
-        isDisabled: b,
+        isDisabled: y,
         isReadOnly: d,
-        isInvalid: f,
+        isInvalid: b,
         isRequired: g,
         "aria-busy": a,
         onChange: w,
@@ -131,11 +131,11 @@ const H = z({
         onBlur: x,
         ...N,
         children: [
-          y ? /* @__PURE__ */ e("span", { className: j(), children: y }) : null,
+          f ? /* @__PURE__ */ r("span", { className: j(), children: f }) : null,
           /* @__PURE__ */ t(G, { className: I(), children: [
-            /* @__PURE__ */ e(T, { ref: c, className: C() }),
+            /* @__PURE__ */ r(T, { ref: c, className: C() }),
             /* @__PURE__ */ t("div", { className: O(), children: [
-              a && /* @__PURE__ */ e(
+              a && /* @__PURE__ */ r(
                 A,
                 {
                   color: "inherit",
@@ -146,7 +146,7 @@ const H = z({
                   })
                 }
               ),
-              f && /* @__PURE__ */ e(
+              b && /* @__PURE__ */ r(
                 W,
                 {
                   src: "WarningCircleOutlined",
@@ -157,8 +157,8 @@ const H = z({
                   })
                 }
               ),
-              P && /* @__PURE__ */ e(
-                i,
+              P && /* @__PURE__ */ r(
+                s,
                 {
                   title: o.formatMessage({
                     id: "unity:component:common:clear:title",
@@ -172,27 +172,29 @@ const H = z({
                 }
               )
             ] }),
-            s && /* @__PURE__ */ t("div", { className: S(), children: [
-              /* @__PURE__ */ e(
-                i,
+            i && /* @__PURE__ */ t("div", { className: S(), children: [
+              /* @__PURE__ */ r(
+                s,
                 {
                   asElement: "button",
                   icon: "MinusOutlined",
                   slot: "decrement",
-                  isDisabled: l !== void 0 && r === l,
+                  color: "content.neutral",
+                  isDisabled: l !== void 0 && e === l,
                   title: o.formatMessage({
                     id: "unity:component:form-field:number-input:decrement:title",
                     defaultMessage: "decrement"
                   })
                 }
               ),
-              /* @__PURE__ */ e(
-                i,
+              /* @__PURE__ */ r(
+                s,
                 {
                   asElement: "button",
                   icon: "PlusOutlined",
                   slot: "increment",
-                  isDisabled: n !== void 0 && r === n,
+                  color: "content.neutral",
+                  isDisabled: n !== void 0 && e === n,
                   title: o.formatMessage({
                     id: "unity:component:form-field:number-input:increment:title",
                     defaultMessage: "increment"
@@ -201,7 +203,7 @@ const H = z({
               )
             ] })
           ] }),
-          m ? /* @__PURE__ */ e("span", { className: E(), children: m }) : null
+          m ? /* @__PURE__ */ r("span", { className: E(), children: m }) : null
         ]
       }
     );

package/dist/esm/components/number-input/TanstackNumberInput.d.ts

@@ -0,0 +1,58 @@
+import { NumberProps } from './NumberInput.js';
+/**
+ * Props for the TanstackNumberInput component.
+ *
+ * This type mirrors {@link NumberProps} from the Unity NumberInput, while omitting
+ * the properties that are managed by the TanStack Form field context:
+ * - `name` — provided by <form.AppField name="…"/>
+ * - `value` and `defaultValue` — driven by the form field state
+ * - `isInvalid` — derived from the field meta (touched + !isValid)
+ *
+ * You can still pass all other visual/behavioral props supported by the base
+ * NumberInput (e.g. `withControls`, `minValue`, `maxValue`, `step`, `prefix`, `suffix`,
+ * `formatOptions`, `isReadOnly`, `isDisabled`, `isLoading`, etc.).
+ */
+export type TanstackNumberInputProps = Omit<NumberProps, 'name' | 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * TanstackNumberInput is a controlled numeric input wired to a TanStack Form field.
+ * It composes the Unity {@link NumberInput} and synchronizes value, invalid state,
+ * and events through the TanStack field API.
+ *
+ * Behavior
+ * - Value is controlled by the form field state (`field.state.value`).
+ * - Invalid state is derived from `meta`: when the field is touched and invalid,
+ *   the underlying input receives `isInvalid` and proper a11y attributes.
+ * - `onChange` forwards the new numeric value to the form via `field.handleChange`.
+ * - `onBlur` triggers `field.handleBlur`.
+ * - The clear action sets the value to `NaN` by default, then calls an optional
+ *   `onClearButtonPress` handler.
+ *
+ * Accessibility
+ * - `aria-labelledby`, `aria-describedby` (helper and feedback), and `aria-details`
+ *   are provided via the TanstackFormField a11y context.
+ *
+ * Example:
+ * ```tsx
+ * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
+ * import { TanstackNumberInput } from "@/components/number-input/TanstackNumberInput"
+ *
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ amount: number }>({ validators: {} })
+ *   return (
+ *     <form.AppForm>
+ *       <form.Form>
+ *         <form.AppField name="amount">
+ *           {() => <TanstackNumberInput aria-label="Amount" withControls />}
+ *         </form.AppField>
+ *       </form.Form>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @see NumberInput for the underlying visual component and props
+ * @see TanstackFormField for the enclosing a11y wiring
+ * @see useTanstackUnityForm for creating the form context
+ * @returns A Unity NumberInput controlled by the TanStack form field
+ */
+declare const TanstackNumberInput: import('react').ForwardRefExoticComponent<TanstackNumberInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { TanstackNumberInput };

package/dist/esm/components/number-input/TanstackNumberInput.js

@@ -0,0 +1,38 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { useFieldContext as b } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as f } from "../form-field/TanstackFormField.context.js";
+import { NumberInput as I } from "./NumberInput.js";
+const h = p(
+  ({ onClearButtonPress: o, onBlur: n, onChange: i, isReadOnly: l, isDisabled: d, ...s }, u) => {
+    const e = b(), t = f(), m = e.state.meta.isTouched && !e.state.meta.isValid, r = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c(
+      I,
+      {
+        ...s,
+        ref: u,
+        id: t.inputId,
+        value: e.state.value,
+        onChange: (a) => {
+          e.handleChange(a), i?.(a);
+        },
+        onBlur: (a) => {
+          e.handleBlur(), n?.(a);
+        },
+        onClearButtonPress: () => {
+          e.setValue(NaN), o?.();
+        },
+        isReadOnly: l,
+        isDisabled: d,
+        isInvalid: m,
+        "aria-labelledby": t.labelId,
+        "aria-describedby": r.length > 0 ? r : void 0,
+        "aria-details": t.contextualLinkId
+      }
+    );
+  }
+);
+h.displayName = "TanstackNumberInput";
+export {
+  h as TanstackNumberInput
+};

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

@@ -1,15 +1,16 @@
-import { jsx as y } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { uyTv as t } from "@payfit/unity-themes";
-const o = t({
+import { uyTv as o } from "@payfit/unity-themes";
+const t = o({
   base: "uy:min-h-dvh uy:flex uy:flex-col uy:gap-400",
   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"
+        "uy:bg-surface-neutral uy:md:border uy:md:border-solid uy:md:border-border-neutral-low uy:border-r-0 uy:md:rounded-l-300",
+        "uy:md:shadow-[-1px_-1px_2px_-1px_var(--uy-color-utility-shadow-raising)]"
       ],
       legacy__midnight: [
         "uy:bg-transparent",
@@ -22,14 +23,14 @@ const o = t({
     variant: "default"
   }
 }), l = m(
-  ({ children: r, variant: a, ...d }, u) => {
-    const e = o({ variant: a });
-    return /* @__PURE__ */ y(
+  ({ children: r, variant: a, ...u }, d) => {
+    const y = t({ variant: a });
+    return /* @__PURE__ */ e(
       "main",
       {
-        ...d,
-        ref: u,
-        className: e,
+        ...u,
+        ref: d,
+        className: y,
         "data-dd-privacy": "allow",
         "data-unity-page": a,
         children: r
@@ -40,5 +41,5 @@ const o = t({
 l.displayName = "Page";
 export {
   l as Page,
-  o as page
+  t as page
 };

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