@payfit/unity-components 1.2.0 → 2.0.0

package/dist/esm/integrations/tanstack-router/components/breadcrumbs/Breadcrumb.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Re-export of the base Breadcrumb component for Tanstack Router integration.
+ * Use with BreadcrumbLink to create router-aware breadcrumb navigation.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbLink, Breadcrumbs } from '@payfit/unity-components/integrations/tanstack-router'
+ *
+ * function Navigation() {
+ *   return (
+ *     <Breadcrumbs wrap="nowrap">
+ *       <Breadcrumb>
+ *         <BreadcrumbLink to="/">Home</BreadcrumbLink>
+ *       </Breadcrumb>
+ *       <Breadcrumb>
+ *         <BreadcrumbLink to="/dashboard">Dashboard</BreadcrumbLink>
+ *       </Breadcrumb>
+ *     </Breadcrumbs>
+ *   )
+ * }
+ * ```
+ * @see {@link Breadcrumb} from base components for full API documentation
+ */
+export { Breadcrumb } from '../../../../components/breadcrumbs/parts/Breadcrumb.js';

package/dist/esm/integrations/tanstack-router/components/breadcrumbs/BreadcrumbLink.d.ts

@@ -0,0 +1,38 @@
+import { LinkComponent } from '@tanstack/react-router';
+import { RawBreadcrumbLink } from '../../../../components/breadcrumbs/parts/RawBreadcrumbLink.js';
+/**
+ * A breadcrumb link component that integrates with Tanstack Router for type-safe navigation.
+ * This component wraps the base RawBreadcrumbLink with Tanstack Router's navigation capabilities.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbLink, Breadcrumbs } from '@payfit/unity-components/integrations/tanstack-router'
+ *
+ * function Navigation() {
+ *   return (
+ *     <Breadcrumbs wrap="nowrap">
+ *       <Breadcrumb>
+ *         <BreadcrumbLink to="/">Home</BreadcrumbLink>
+ *       </Breadcrumb>
+ *       <Breadcrumb>
+ *         <BreadcrumbLink to="/dashboard" search={{ tab: 'overview' }}>
+ *           Dashboard
+ *         </BreadcrumbLink>
+ *       </Breadcrumb>
+ *     </Breadcrumbs>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Supports all Tanstack Router link props (to, search, params, etc.)
+ * - Maintains breadcrumb-specific styling and truncation behavior
+ * - Automatically handles long text with tooltips
+ * - Inherits type safety from Tanstack Router for route definitions
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/breadcrumbs GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare const BreadcrumbLink: LinkComponent<typeof RawBreadcrumbLink> & {
+    displayName: string;
+};
+export { BreadcrumbLink };

package/dist/esm/integrations/tanstack-router/components/breadcrumbs/BreadcrumbLink.js

@@ -0,0 +1,7 @@
+import { createLink as r } from "@tanstack/react-router";
+import { RawBreadcrumbLink as m } from "../../../../components/breadcrumbs/parts/RawBreadcrumbLink.js";
+const a = r(m);
+a.displayName = "BreadcrumbLink";
+export {
+  a as BreadcrumbLink
+};

package/dist/esm/integrations/tanstack-router/components/breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Re-export of the base Breadcrumbs component for Tanstack Router integration.
+ * Container component that displays hierarchical navigation using breadcrumb items with router-aware links.
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbLink, Breadcrumbs } from '@payfit/unity-components/integrations/tanstack-router'
+ *
+ * function Navigation() {
+ *   return (
+ *     <Breadcrumbs wrap="nowrap">
+ *       <Breadcrumb>
+ *         <BreadcrumbLink to="/">Home</BreadcrumbLink>
+ *       </Breadcrumb>
+ *       <Breadcrumb>
+ *         <BreadcrumbLink to="/dashboard">Dashboard</BreadcrumbLink>
+ *       </Breadcrumb>
+ *     </Breadcrumbs>
+ *   )
+ * }
+ * ```
+ * @see {@link Breadcrumbs} from base components for full API documentation
+ */
+export { Breadcrumbs } from '../../../../components/breadcrumbs/Breadcrumbs.js';

package/dist/esm/integrations/tanstack-router/components/breadcrumbs/use-route-breadcrumb.d.ts

@@ -0,0 +1,53 @@
+import { AnyRouteMatch, LinkOptions } from '@tanstack/react-router';
+export interface BreadcrumbItem extends LinkOptions {
+    id: string;
+    label: string;
+}
+export interface UseRouteBreadcrumbsOptions {
+    /**
+     * Predicate function to filter out routes that should not be included in the breadcrumbs.
+     * @param match - The current route match in the list of matches.
+     * @returns True if the route should be included, false otherwise.
+     */
+    filterMatches?: (match: AnyRouteMatch) => boolean;
+    /**
+     * Function to customize the label for each breadcrumb item.
+     * @param match - The current route match in the list of matches.
+     * @returns The label for the breadcrumb item.
+     */
+    getLabel?: (match: AnyRouteMatch) => string;
+}
+/**
+ * Hook that generates breadcrumb items from the current route matches in Tanstack Router.
+ * Returns an array of breadcrumb items that can be used with the Breadcrumbs dynamic API.
+ * @param options - Configuration options for filtering and labeling breadcrumbs
+ * @returns Array of breadcrumb items with label and Tanstack Router link props
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbLink, Breadcrumbs, useRouteBreadcrumbs } from '@payfit/unity-components/integrations/tanstack-router'
+ *
+ * function Navigation() {
+ *   const breadcrumbs = useRouteBreadcrumbs({
+ *     getLabel: (match) => match.context?.title ?? match.id
+ *   })
+ *
+ *   return (
+ *     <Breadcrumbs items={breadcrumbs} wrap="nowrap">
+ *       {item => (
+ *         <Breadcrumb>
+ *           <BreadcrumbLink to={item.to} search={item.search} params={item.params}>
+ *             {item.label}
+ *           </BreadcrumbLink>
+ *         </Breadcrumb>
+ *       )}
+ *     </Breadcrumbs>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically filters out the root route
+ * - Can be customized with filterMatches to control which routes appear
+ * - Can be customized with getLabel to control breadcrumb text
+ * - This hook only works for hierarchical routes, with an explicit parent-child relationship.
+ */
+export declare function useRouteBreadcrumbs(options?: UseRouteBreadcrumbsOptions): BreadcrumbItem[];

package/dist/esm/integrations/tanstack-router/components/form-contextual-link/FormContextualLink.d.ts

@@ -0,0 +1,40 @@
+import { LinkComponent } from '@tanstack/react-router';
+import { RawFormContextualLink } from '../../../../components/form-field/parts/RawFormContextualLink.js';
+/**
+ * Unity's FormContextualLink that integrates with Tanstack Router for seamless client-side navigation within form fields.
+ * Enables declarative routing with type-safe route parameters, search params, and automatic preloading capabilities while maintaining form field context.
+ * @example
+ * ```tsx
+ * import { FormContextualLink } from '@payfit/unity-components/integrations/tanstack-router'
+ *
+ * function MyForm() {
+ *   const { Form, FormField } = useUnityForm(schema)
+ *   return (
+ *     <Form>
+ *       <FormField name="email">
+ *         <FormContextualLink to="/help">
+ *           Need help?
+ *         </FormContextualLink>
+ *       </FormField>
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Must be used inside a FormField component to maintain proper form context
+ * - Supports type-safe navigation with route parameters and search params
+ * - Provides automatic route preloading on hover or mount via the `preload` prop
+ * - Handles relative and absolute paths with `from` and `to` props for flexible routing
+ * - Integrates seamlessly with Tanstack Router's navigation system and loader functions
+ * - Maintains all accessibility features from the underlying RawFormContextualLink component
+ * - Automatically detects external URLs and applies appropriate security attributes (target="_blank", rel="noopener noreferrer")
+ * - Inherits the "small" size and "secondary" color styling appropriate for form contextual links
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/form-contextual-link GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare const FormContextualLink: LinkComponent<typeof RawFormContextualLink> & {
+    displayName: string;
+};
+export { FormContextualLink };

package/dist/esm/integrations/tanstack-router/components/form-contextual-link/FormContextualLink.js

@@ -0,0 +1,7 @@
+import { createLink as o } from "@tanstack/react-router";
+import { RawFormContextualLink as t } from "../../../../components/form-field/parts/RawFormContextualLink.js";
+const r = o(t);
+r.displayName = "FormContextualLink";
+export {
+  r as FormContextualLink
+};

package/dist/esm/integrations/tanstack-router/components/link/Link.d.ts

@@ -0,0 +1,33 @@
+import { LinkComponent } from '@tanstack/react-router';
+import { RawLink } from '../../../../components/link/RawLink.js';
+/**
+ * Unity's link that integrates with Tanstack Router for seamless client-side navigation.
+ * Enables declarative routing with type-safe route parameters, search params, and automatic preloading capabilities.
+ * @example
+ * ```tsx
+ * import { Link } from '@payfit/unity-components/integrations/tanstack-router'
+ *
+ * function Navigation() {
+ *   return (
+ *     <Link to="/dashboard">
+ *       Dashboard
+ *     </Link>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Supports type-safe navigation with route parameters and search params
+ * - Provides automatic route preloading on hover or mount via the `preload` prop
+ * - Handles relative and absolute paths with `from` and `to` props for flexible routing
+ * - Integrates seamlessly with Tanstack Router's navigation system and loader functions
+ * - Maintains all accessibility features and styling options from the underlying RawLink component
+ * - Automatically detects external URLs and applies appropriate security attributes (target="_blank", rel="noopener noreferrer")
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/link GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare const Link: LinkComponent<typeof RawLink> & {
+    displayName: string;
+};
+export { Link };

package/dist/esm/integrations/tanstack-router/components/link/Link.js

@@ -0,0 +1,7 @@
+import { createLink as i } from "@tanstack/react-router";
+import { RawLink as o } from "../../../../components/link/RawLink.js";
+const r = i(o);
+r.displayName = "Link";
+export {
+  r as Link
+};

package/dist/esm/integrations/tanstack-router/components/menu-item/MenuItem.d.ts

@@ -0,0 +1,49 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { ReactNode } from 'react';
+import { MenuItemProps as RawMenuItemProps, RawMenuItem } from '../../../../components/menu/parts/RawMenuItem.js';
+type MenuItemRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown, TDefaultFrom extends string = string> = Omit<RawMenuItemProps, 'onAction' | 'children' | 'prefix'> & ValidateLinkOptions<TRouter, TOptions, TDefaultFrom, typeof RawMenuItem> & {
+    children?: ReactNode;
+    prefixElement?: RawMenuItemProps['prefix'];
+};
+type MenuItemButtonProps = Omit<RawMenuItemProps, 'href' | 'children'> & {
+    onAction: NonNullable<RawMenuItemProps['onAction']>;
+    children?: ReactNode;
+};
+export type MenuItemProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown, TDefaultFrom extends string = string> = MenuItemRouterProps<TRouter, TOptions, TDefaultFrom> | MenuItemButtonProps;
+/**
+ * A menu item component that integrates with Tanstack Router for navigation.
+ * Provides seamless routing capabilities for menu items in context menus, dropdown menus, and other menu-based interfaces.
+ * @param props - Either router-based props (with 'to') or button-based props (with 'onAction')
+ * @example
+ * ```tsx
+ * import { MenuItem } from '@payfit/unity-components/integrations/tanstack-router'
+ *
+ * function ContextMenu() {
+ *   return (
+ *     <Menu>
+ *       <MenuItem to="/dashboard" prefixElement={<Icon src="DashboardOutlined" />}>
+ *         Dashboard
+ *       </MenuItem>
+ *       <MenuItem onAction={() => alert('Action triggered')}>
+ *         Perform Action
+ *       </MenuItem>
+ *     </Menu>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - When 'to' prop is provided, the component renders as a router link
+ * - When 'onAction' prop is provided (without 'to'), it renders as a button
+ * - Supports all Tanstack Router link features like preloading, search params, and route params
+ * - Maintains accessibility features from the underlying RawMenuItem component
+ * @see {@link MenuItemProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/menu-item GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare function MenuItem<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: MenuItemProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace MenuItem {
+    var displayName: string;
+}
+export { MenuItem };

package/dist/esm/integrations/tanstack-router/components/menu-item/MenuItem.js

@@ -0,0 +1,16 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createLink as r } from "@tanstack/react-router";
+import { RawMenuItem as o } from "../../../../components/menu/parts/RawMenuItem.js";
+const i = r(o);
+function m(e) {
+  if ("to" in e || "href" in e)
+    return /* @__PURE__ */ n(i, { ...e });
+  {
+    const t = e;
+    return /* @__PURE__ */ n(o, { ...t, children: t.children });
+  }
+}
+m.displayName = "MenuItem";
+export {
+  m as MenuItem
+};

package/dist/esm/integrations/tanstack-router/components/nav-item/NavItem.d.ts

@@ -0,0 +1,52 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { NavItemProps as RawNavItemProps } from '../../../../components/nav/parts/RawNavItem.js';
+type NavItemRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawNavItemProps, 'prefix' | 'suffix' | 'href' | 'onPress'> & ValidateLinkOptions<TRouter, TOptions> & {
+    prefixElement?: RawNavItemProps['prefix'];
+    suffixElement?: RawNavItemProps['suffix'];
+};
+type NavItemButtonProps = Omit<RawNavItemProps, 'prefix' | 'suffix' | 'href'> & {
+    prefixElement?: RawNavItemProps['prefix'];
+    suffixElement?: RawNavItemProps['suffix'];
+    onPress: NonNullable<RawNavItemProps['onPress']>;
+};
+export type NavItemProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = NavItemRouterProps<TRouter, TOptions> | NavItemButtonProps;
+/**
+ * A navigation item component that integrates with Tanstack Router for seamless navigation.
+ * Provides both link-based routing and button-based actions within navigation menus, automatically adapting based on the props provided.
+ * @param {NavItemProps} props - Either router-based props (with 'to') or button-based props (with 'onPress')
+ * @example
+ * ```tsx
+ * import { NavItem } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { Nav } from '@payfit/unity-components'
+ *
+ * function Navigation() {
+ *   return (
+ *     <Nav title="Main navigation">
+ *       <NavItem to="/dashboard" prefixElement={<Icon src="DashboardOutlined" />}>
+ *         Dashboard
+ *       </NavItem>
+ *       <NavItem onPress={() => console.log('Action')}>
+ *         Action
+ *       </NavItem>
+ *     </Nav>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically renders as a link when 'to' prop is provided, or as a button when 'onPress' is provided
+ * - Supports type-safe route parameters, search params, and relative navigation with Tanstack Router
+ * - Integrates with Nav component for consistent navigation UI patterns
+ * - Provides automatic active state styling based on current route
+ * - Supports icon prefixes and suffixes via prefixElement and suffixElement props
+ * - Maintains all accessibility features from the underlying RawNavItem component
+ * @see {@link NavItemProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/nav-item GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare function NavItem<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>({ prefixElement, suffixElement, ...rest }: NavItemProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace NavItem {
+    var displayName: string;
+}
+export { NavItem };

package/dist/esm/integrations/tanstack-router/components/nav-item/NavItem.js

@@ -0,0 +1,29 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createLink as a } from "@tanstack/react-router";
+import { RawNavItem as e } from "../../../../components/nav/parts/RawNavItem.js";
+const n = a(e);
+function p({ prefixElement: r, suffixElement: i, ...o }) {
+  return "to" in o || "href" in o ? (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ t(
+      n,
+      {
+        ...o,
+        activeProps: { isCurrent: !0 },
+        prefix: r,
+        suffix: i
+      }
+    )
+  ) : /* @__PURE__ */ t(
+    e,
+    {
+      ...o,
+      prefix: r,
+      suffix: i
+    }
+  );
+}
+p.displayName = "NavItem";
+export {
+  p as NavItem
+};

package/dist/esm/integrations/tanstack-router/components/pagination/PaginationLink.d.ts

@@ -0,0 +1,54 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { PaginationLinkProps as RawPaginationLinkProps } from '../../../../components/pagination/parts/RawPaginationLink.js';
+type PaginationLinkRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawPaginationLinkProps, 'href' | 'onPress'> & ValidateLinkOptions<TRouter, TOptions>;
+export type PaginationLinkProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = PaginationLinkRouterProps<TRouter, TOptions>;
+/**
+ * A pagination link component that integrates with Tanstack Router for seamless navigation.
+ * Provides type-safe, URL-driven pagination with support for preloading and active states.
+ * @param {PaginationLinkProps} props - Router-based props including 'to', 'search', and pagination-specific props
+ * @example
+ * ```tsx
+ * import { PaginationLink } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { Pagination, PaginationContent, PaginationItem } from '@payfit/unity-components'
+ *
+ * function ProductPagination() {
+ *   const search = useSearch({ from: '/products' })
+ *   const currentPage = search.page || 1
+ *
+ *   return (
+ *     <Pagination pageCount={10} currentPage={currentPage} onPageChange={handlePageChange}>
+ *       <PaginationContent>
+ *         <PaginationItem>
+ *           <PaginationLink
+ *             to="/products"
+ *             search={{ ...search, page: 1 }}
+ *             value={1}
+ *             isCurrent={currentPage === 1}
+ *             preload="intent"
+ *           >
+ *             1
+ *           </PaginationLink>
+ *         </PaginationItem>
+ *       </PaginationContent>
+ *     </Pagination>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically applies active styling when isCurrent is true
+ * - Supports type-safe route parameters and search params with Tanstack Router
+ * - Enables preload="intent" for data loading before navigation
+ * - Maintains accessibility with aria-current="page" for current page
+ * - Works with Pagination context for keyboard navigation support
+ * - Uses the 'value' prop to identify the page number for the link
+ * @see {@link PaginationLinkProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/pagination GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare function PaginationLink<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: PaginationLinkProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationLink {
+    var displayName: string;
+}
+export { PaginationLink };

package/dist/esm/integrations/tanstack-router/components/pagination/PaginationLink.js

@@ -0,0 +1,21 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createLink as t } from "@tanstack/react-router";
+import { RawPaginationLink as r } from "../../../../components/pagination/parts/RawPaginationLink.js";
+const a = t(r);
+function o(i) {
+  return (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ n(
+      a,
+      {
+        activeOptions: { exact: !0, includeSearch: !0 },
+        ...i,
+        activeProps: { isCurrent: !0 }
+      }
+    )
+  );
+}
+o.displayName = "PaginationLink";
+export {
+  o as PaginationLink
+};

package/dist/esm/integrations/tanstack-router/components/pagination/PaginationNext.d.ts

@@ -0,0 +1,52 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { RawPaginationNextProps } from '../../../../components/pagination/parts/RawPaginationNext.js';
+type PaginationNextRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawPaginationNextProps, 'href' | 'onPress'> & ValidateLinkOptions<TRouter, TOptions>;
+export type PaginationNextProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = PaginationNextRouterProps<TRouter, TOptions>;
+/**
+ * A pagination next button component that integrates with Tanstack Router for seamless navigation.
+ * Provides type-safe navigation to the next page with support for preloading.
+ * @param {PaginationNextProps} props - Router-based props including 'to', 'search', and 'isDisabled'
+ * @example
+ * ```tsx
+ * import { PaginationNext } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { Pagination, PaginationContent, PaginationItem } from '@payfit/unity-components'
+ *
+ * function ProductPagination() {
+ *   const search = useSearch({ from: '/products' })
+ *   const currentPage = search.page || 1
+ *   const pageCount = 10
+ *
+ *   return (
+ *     <Pagination pageCount={pageCount} currentPage={currentPage} onPageChange={handlePageChange}>
+ *       <PaginationContent>
+ *         <PaginationItem>
+ *           <PaginationNext
+ *             to="/products"
+ *             search={{ ...search, page: currentPage + 1 }}
+ *             isDisabled={currentPage === pageCount}
+ *             preload="intent"
+ *           />
+ *         </PaginationItem>
+ *       </PaginationContent>
+ *     </Pagination>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically renders as a disabled button when isDisabled is true
+ * - Supports type-safe route parameters and search params with Tanstack Router
+ * - Enables preload="intent" for data loading before navigation
+ * - Includes tooltip with "Next" label for accessibility
+ * - Works with Pagination context for keyboard navigation support
+ * - Renders a right-facing caret icon
+ * @see {@link PaginationNextProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/pagination GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare function PaginationNext<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: PaginationNextProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationNext {
+    var displayName: string;
+}
+export { PaginationNext };

package/dist/esm/integrations/tanstack-router/components/pagination/PaginationNext.js

@@ -0,0 +1,22 @@
+import { jsx as i } from "react/jsx-runtime";
+import { createLink as a } from "@tanstack/react-router";
+import { RawPaginationNext as e } from "../../../../components/pagination/parts/RawPaginationNext.js";
+const n = a(e);
+function o(t) {
+  return (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ i(
+      n,
+      {
+        activeOptions: { exact: !0, includeSearch: !0 },
+        ...t,
+        activeProps: {},
+        inactiveProps: {}
+      }
+    )
+  );
+}
+o.displayName = "PaginationNext";
+export {
+  o as PaginationNext
+};

package/dist/esm/integrations/tanstack-router/components/pagination/PaginationPrevious.d.ts

@@ -0,0 +1,51 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { RawPaginationPreviousProps } from '../../../../components/pagination/parts/RawPaginationPrevious.js';
+type PaginationPreviousRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawPaginationPreviousProps, 'href' | 'onPress'> & ValidateLinkOptions<TRouter, TOptions>;
+export type PaginationPreviousProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = PaginationPreviousRouterProps<TRouter, TOptions>;
+/**
+ * A pagination previous button component that integrates with Tanstack Router for seamless navigation.
+ * Provides type-safe navigation to the previous page with support for preloading.
+ * @param {PaginationPreviousProps} props - Router-based props including 'to', 'search', and 'isDisabled'
+ * @example
+ * ```tsx
+ * import { PaginationPrevious } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { Pagination, PaginationContent, PaginationItem } from '@payfit/unity-components'
+ *
+ * function ProductPagination() {
+ *   const search = useSearch({ from: '/products' })
+ *   const currentPage = search.page || 1
+ *
+ *   return (
+ *     <Pagination pageCount={10} currentPage={currentPage} onPageChange={handlePageChange}>
+ *       <PaginationContent>
+ *         <PaginationItem>
+ *           <PaginationPrevious
+ *             to="/products"
+ *             search={{ ...search, page: currentPage - 1 }}
+ *             isDisabled={currentPage === 1}
+ *             preload="intent"
+ *           />
+ *         </PaginationItem>
+ *       </PaginationContent>
+ *     </Pagination>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically renders as a disabled button when isDisabled is true
+ * - Supports type-safe route parameters and search params with Tanstack Router
+ * - Enables preload="intent" for data loading before navigation
+ * - Includes tooltip with "Previous" label for accessibility
+ * - Works with Pagination context for keyboard navigation support
+ * - Renders a left-facing caret icon
+ * @see {@link PaginationPreviousProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/pagination GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare function PaginationPrevious<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: PaginationPreviousProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationPrevious {
+    var displayName: string;
+}
+export { PaginationPrevious };

package/dist/esm/integrations/tanstack-router/components/pagination/PaginationPrevious.js

@@ -0,0 +1,22 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createLink as r } from "@tanstack/react-router";
+import { RawPaginationPrevious as t } from "../../../../components/pagination/parts/RawPaginationPrevious.js";
+const a = r(t);
+function e(i) {
+  return (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ o(
+      a,
+      {
+        activeOptions: { exact: !0, includeSearch: !0 },
+        ...i,
+        activeProps: {},
+        inactiveProps: {}
+      }
+    )
+  );
+}
+e.displayName = "PaginationPrevious";
+export {
+  e as PaginationPrevious
+};