@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/index.storybook-testing.d.ts

@@ -1,2 +1,5 @@
 export { getTestingUtilsDatePicker } from './components/date-picker-field/test-utils.js';
+export { getTestingUtilsMultiSelect } from './components/multi-select-field/test-utils.js';
 export { getTestingUtilsSelect } from './components/select-field/test-utils.js';
+export { getTestingUtilsToast } from './components/toast/test-utils.js';
+export { getTestingUtilsDialog } from './components/dialog/test-utils.js';

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,45 @@
+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'
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ *
+ * function MyForm() {
+ *   const { Form, FormField } = useTanstackUnityForm({
+ *     defaultValues: { email: '' },
+ *   })
+ *   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}
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead (see `TanstackFormContextualLink`).
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
+ */
+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/form-contextual-link/TanstackFormContextualLink.d.ts

@@ -0,0 +1,43 @@
+import { LinkComponent } from '@tanstack/react-router';
+import { TanstackRawFormContextualLink } from '../../../../components/form-field/parts/TanstackRawFormContextualLink.js';
+/**
+ * Unity's TanstackFormContextualLink 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 { TanstackFormContextualLink } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ *
+ * function MyForm() {
+ *   const { Form, FormField } = useTanstackUnityForm({
+ *     defaultValues: { email: '' },
+ *   })
+ *   return (
+ *     <Form>
+ *       <FormField name="email">
+ *         <TanstackFormContextualLink to="/help">
+ *           Need help?
+ *         </TanstackFormContextualLink>
+ *       </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 TanstackRawFormContextualLink 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 TanstackFormContextualLink: LinkComponent<typeof TanstackRawFormContextualLink> & {
+    displayName: string;
+};
+export { TanstackFormContextualLink };

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/list-view/ListView.d.ts

@@ -0,0 +1,34 @@
+import { ListViewProps } from '../../../../components/list-view/ListView.js';
+/**
+ * Unity's ListView that integrates with Tanstack Router for seamless client-side navigation.
+ * This component automatically configures the RouterProvider context needed for ListViewItem navigation.
+ * @example
+ * ```tsx
+ * import { ListView, ListViewItem } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { ListViewItemLabel } from '@payfit/unity-components'
+ *
+ * function DocumentsList() {
+ *   return (
+ *     <ListView aria-label="Documents">
+ *       <ListViewItem to="/documents/$id" params={{ id: '123' }}>
+ *         <ListViewItemLabel>Document 123</ListViewItemLabel>
+ *       </ListViewItem>
+ *     </ListView>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically provides the RouterProvider context needed for client-side navigation
+ * - Use this instead of the base ListView component when using ListViewItem with TanStack Router
+ * - All props from the base ListView component are supported
+ * - Items within this ListView will use client-side navigation instead of full page reloads
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/list-view GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=15306-115&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview--docs unity-components.payfit.io}
+ */
+declare function ListView<T extends object>(props: ListViewProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace ListView {
+    var displayName: string;
+}
+export { ListView };

package/dist/esm/integrations/tanstack-router/components/list-view/ListView.js

@@ -0,0 +1,25 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useCallback as u } from "react";
+import { useRouter as a, useMatchRoute as m } from "@tanstack/react-router";
+import { ListView as n } from "../../../../components/list-view/ListView.js";
+import { RouterProvider as c } from "../../../../providers/router/RouterProvider.js";
+function f(i) {
+  const o = a(), e = m(), s = u(
+    (t) => e({ to: t, fuzzy: !0 }) !== !1,
+    [e]
+  );
+  return /* @__PURE__ */ r(
+    c,
+    {
+      navigate: (t) => {
+        o.navigate({ to: t });
+      },
+      isActive: s,
+      children: /* @__PURE__ */ r(n, { ...i })
+    }
+  );
+}
+f.displayName = "ListView";
+export {
+  f as ListView
+};

package/dist/esm/integrations/tanstack-router/components/list-view/parts/ListViewItem.d.ts

@@ -0,0 +1,51 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { RawListViewItemProps } from '../../../../../components/list-view/parts/RawListViewItem.js';
+type ListViewItemRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawListViewItemProps<object>, 'prefix' | 'suffix' | 'href'> & ValidateLinkOptions<TRouter, TOptions> & {
+    prefixElement?: RawListViewItemProps<object>['prefix'];
+    suffixElement?: RawListViewItemProps<object>['suffix'];
+};
+type ListViewItemHrefProps = Omit<RawListViewItemProps<object>, 'prefix' | 'suffix'> & {
+    prefixElement?: RawListViewItemProps<object>['prefix'];
+    suffixElement?: RawListViewItemProps<object>['suffix'];
+    href: string;
+};
+export type ListViewItemProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = ListViewItemRouterProps<TRouter, TOptions> | ListViewItemHrefProps;
+/**
+ * Unity's ListViewItem that integrates with Tanstack Router for seamless client-side navigation.
+ * Enables declarative routing with type-safe route parameters, search params, and automatic preloading capabilities.
+ * @param {ListViewItemProps} props - Either router-based props (with 'to') or direct link props (with 'href')
+ * @example
+ * ```tsx
+ * import { ListView } from '@payfit/unity-components'
+ * import { ListViewItem } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { ListViewItemLabel } from '@payfit/unity-components'
+ *
+ * function DocumentsList() {
+ *   return (
+ *     <ListView aria-label="Documents">
+ *       <ListViewItem to="/documents/$id" params={{ id: '123' }}>
+ *         <ListViewItemLabel>Document 123</ListViewItemLabel>
+ *       </ListViewItem>
+ *     </ListView>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically renders as a router link when 'to' prop is provided, or as a standard link when 'href' is provided
+ * - Supports type-safe route parameters, search params, and relative navigation with Tanstack Router
+ * - Provides automatic route preloading on hover or mount via the `preload` prop
+ * - Integrates seamlessly with ListView component for list-based navigation UI patterns
+ * - Supports icon prefixes and suffixes via prefixElement and suffixElement props
+ * - Maintains all accessibility features and styling options from the underlying RawListViewItem component
+ * - Use `hideDisclosureIndicator` to hide the default disclosure arrow for non-navigational items
+ * @see {@link ListViewItemProps} 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/list-view-item GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=15306-115&m=dev Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview--docs unity-components.payfit.io}
+ */
+declare function ListViewItem<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>({ prefixElement, suffixElement, ...rest }: ListViewItemProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace ListViewItem {
+    var displayName: string;
+}
+export { ListViewItem };

package/dist/esm/integrations/tanstack-router/components/list-view/parts/ListViewItem.js

@@ -0,0 +1,32 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createLink as m } from "@tanstack/react-router";
+import { RawListViewItem as e } from "../../../../../components/list-view/parts/RawListViewItem.js";
+const f = m(e);
+function p({
+  prefixElement: o,
+  suffixElement: t,
+  ...i
+}) {
+  return "to" in i ? (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ r(
+      f,
+      {
+        ...i,
+        prefix: o,
+        suffix: t
+      }
+    )
+  ) : /* @__PURE__ */ r(
+    e,
+    {
+      ...i,
+      prefix: o,
+      suffix: t
+    }
+  );
+}
+p.displayName = "ListViewItem";
+export {
+  p as ListViewItem
+};

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