@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/integrations/tanstack-router/components/navigation-card/NavigationCard.d.ts

@@ -0,0 +1,73 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { NavigationCardProps as RawNavigationCardProps } from '../../../../components/navigation-card/NavigationCard.js';
+type NavigationCardRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawNavigationCardProps, 'asElement' | 'prefix' | 'suffix'> & ValidateLinkOptions<TRouter, TOptions> & {
+    prefixElement?: RawNavigationCardProps['prefix'];
+    suffixElement?: RawNavigationCardProps['suffix'];
+};
+type NavigationCardButtonProps = Omit<RawNavigationCardProps, 'asElement' | 'prefix' | 'suffix' | 'href'> & {
+    prefixElement?: RawNavigationCardProps['prefix'];
+    suffixElement?: RawNavigationCardProps['suffix'];
+    onPress: NonNullable<RawNavigationCardProps['onPress']>;
+};
+export type NavigationCardProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = NavigationCardRouterProps<TRouter, TOptions> | NavigationCardButtonProps;
+/**
+ * Unity's NavigationCard 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 {NavigationCardProps} props - Either router-based props (with 'to') or button-based props (with 'onPress')
+ * @example
+ * ```tsx
+ * import { NavigationCard } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { Icon } from '@payfit/unity-components'
+ * import { NavigationCardLabel } from '@payfit/unity-components'
+ * import { NavigationCardDescription } from '@payfit/unity-components'
+ *
+ * // Router mode - navigation card as a link
+ * function NavigationWithLink() {
+ *   return (
+ *     <NavigationCard
+ *       to="/dashboard"
+ *       prefixElement={<Icon src="LayoutDashboardOutlined" size={24} />}
+ *     >
+ *       <div>
+ *         <NavigationCardLabel>Dashboard</NavigationCardLabel>
+ *         <NavigationCardDescription>
+ *           View your analytics
+ *         </NavigationCardDescription>
+ *       </div>
+ *     </NavigationCard>
+ *   )
+ * }
+ *
+ * // Button mode - navigation card as a button
+ * function NavigationWithButton() {
+ *   return (
+ *     <NavigationCard
+ *       onPress={() => console.log('Clicked')}
+ *       prefixElement={<Icon src="PlusOutlined" size={24} />}
+ *     >
+ *       <Text variant="h4">Add New</Text>
+ *     </NavigationCard>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically renders as a link when 'to' prop is provided, or as a button when 'onPress' is provided
+ * - Supports type-safe navigation with route parameters and search params via `params` and `search` props
+ * - 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 RawNavigationCard component
+ * - Automatically detects external URLs and applies appropriate security attributes (target="_blank", rel="noopener noreferrer")
+ * - Supports both `compact` and `comfortable` variants for different layout needs
+ * - Use `prefixElement` and `suffixElement` props to add icons or other elements to the card
+ * @see {@link NavigationCardProps} 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/navigation-card 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 NavigationCard<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>({ prefixElement, suffixElement, ...rest }: NavigationCardProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace NavigationCard {
+    var displayName: string;
+}
+export { NavigationCard };

package/dist/esm/integrations/tanstack-router/components/navigation-card/NavigationCard.js

@@ -0,0 +1,37 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createLink as n } from "@tanstack/react-router";
+import { RawNavigationCard as t } from "../../../../components/navigation-card/NavigationCard.js";
+const d = n(t);
+function e({
+  prefixElement: i,
+  suffixElement: a,
+  ...o
+}) {
+  return "to" in o || "href" in o ? (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ r(
+      d,
+      {
+        ...o,
+        asElement: "a",
+        prefix: i,
+        suffix: a
+      }
+    )
+  ) : (
+    // @ts-expect-error - TypeScript cannot narrow union types at the type level. RawNavigationCardProps is a union of link and button props, and runtime check ensures only button props are passed here.
+    /* @__PURE__ */ r(
+      t,
+      {
+        ...o,
+        asElement: "button",
+        prefix: i,
+        suffix: a
+      }
+    )
+  );
+}
+e.displayName = "NavigationCard";
+export {
+  e as NavigationCard
+};

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

package/dist/esm/integrations/tanstack-router/components/tabs/Tabs.d.ts

@@ -0,0 +1,82 @@
+import { TabsProps as BaseTabsProps } from '../../../../components/tabs/Tabs.js';
+export interface TabsProps extends Omit<BaseTabsProps, 'selectedKey' | 'isExact'> {
+    /**
+     * The currently selected tab key. If not provided, automatically uses the current route pathname.
+     * @default location.pathname
+     */
+    selectedKey?: BaseTabsProps['selectedKey'];
+    /**
+     * Whether to use exact matching for active tab detection. Possible values are:
+     * - 'exact' - The tab will be active if the current route pathname matches the tab's pathname exactly
+     * - 'fuzzy' - The tab will be active if the current route pathname is a substring of the tab's pathname
+     * @default 'fuzzy'
+     */
+    routeMatch?: 'exact' | 'fuzzy';
+}
+/**
+ * A Tabs component that integrates with Tanstack Router for navigation.
+ * Provides both selection state management and routing capabilities with automatic route synchronization.
+ * @param {TabsProps} props - Standard Tabs props plus Tanstack Router integration options
+ * @example
+ * ```tsx
+ * import { Tabs, Tab, TabList, TabPanel } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { Outlet } from '@tanstack/react-router'
+ *
+ * // Pattern 1: Single auto-updating TabPanel (recommended for consistent layouts)
+ * // Tabs automatically resolve their IDs from route definitions
+ * function NavigationTabs() {
+ *   return (
+ *     <Tabs>
+ *       <TabList aria-label="Main navigation">
+ *         <Tab to="/dashboard">Dashboard</Tab>
+ *         <Tab to="/employees/$employeeId" params={{employeeId: '1'}}>Employee</Tab>
+ *       </TabList>
+ *       <TabPanel>
+ *         <Outlet />
+ *       </TabPanel>
+ *     </Tabs>
+ *   )
+ * }
+ *
+ * // Pattern 2: Multiple explicit TabPanels (for different layouts per tab)
+ * // When Tab has explicit id, you MUST provide matching TabPanel with same id
+ * function CustomLayoutTabs() {
+ *   return (
+ *     <Tabs>
+ *       <TabList aria-label="Custom layouts">
+ *         <Tab to="/dashboard" id="dashboard">Dashboard</Tab>
+ *         <Tab to="/analytics" id="analytics">Analytics</Tab>
+ *       </TabList>
+ *       <TabPanel id="dashboard" className="uy:grid uy:grid-cols-3">
+ *         <Outlet />
+ *       </TabPanel>
+ *       <TabPanel id="analytics" className="uy:w-full uy:h-screen">
+ *         <Outlet />
+ *       </TabPanel>
+ *     </Tabs>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically syncs selectedKey with current route using sophisticated route matching
+ * - Tab IDs are automatically resolved from route definitions (no manual IDs needed)
+ * - Handles nested routes properly (e.g., /settings/security matches /settings tab)
+ * - Supports both exact and fuzzy route matching via routeMatch prop
+ * - Integrates seamlessly with Tanstack Router's navigation system
+ * - Maintains all accessibility features from the base Tabs component
+ * - **TabPanel Pattern Constraint**: Choose ONE of two patterns:
+ *   - Pattern 1 (Auto-sync): Single TabPanel without id prop - automatically shows active route content
+ *   - Pattern 2 (Explicit): Multiple TabPanels with explicit id props - each Tab with explicit id MUST have matching TabPanel
+ * - Never mix auto-sync and explicit id patterns in the same Tabs component
+ * - When using explicit Tab IDs, provide corresponding TabPanel for each one
+ * - selectedKey and onSelectionChange can be overridden for custom behavior
+ * @see {@link TabsProps} 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/tabs 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}
+ */
+export declare function Tabs({ children, selectedKey: selectedKeyProp, onSelectionChange, routeMatch, ...tabsProps }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Tabs {
+    var displayName: string;
+}

package/dist/esm/integrations/tanstack-router/components/tabs/Tabs.js

@@ -0,0 +1,41 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useLocation as f, useNavigate as I, useChildMatches as p } from "@tanstack/react-router";
+import { RouterProvider as v } from "react-aria-components";
+import { Tabs as R } from "../../../../components/tabs/Tabs.js";
+function S({
+  children: i,
+  selectedKey: a,
+  onSelectionChange: u,
+  routeMatch: c = "fuzzy",
+  ...d
+}) {
+  const s = f(), g = I(), l = p({
+    select: (e) => {
+      if (e.length !== 0)
+        return c === "exact" ? e.reduce((t, o) => {
+          const n = String(t.routeId);
+          return String(o.routeId).length > n.length ? o : t;
+        }) : e.reduce((t, o) => {
+          const n = String(t.routeId);
+          return String(o.routeId).length < n.length ? o : t;
+        });
+    }
+  }), h = a ?? l?.id ?? s.pathname;
+  return /* @__PURE__ */ r(v, { navigate: (e) => {
+    g({ to: e });
+  }, children: /* @__PURE__ */ r(
+    R,
+    {
+      ...d,
+      selectedKey: h,
+      onSelectionChange: (e) => {
+        u?.(e);
+      },
+      children: i
+    }
+  ) });
+}
+S.displayName = "Tabs";
+export {
+  S as Tabs
+};

package/dist/esm/integrations/tanstack-router/components/tabs/parts/Tab.d.ts

@@ -0,0 +1,52 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { ReactNode } from 'react';
+import { TabProps as RawTabProps } from '../../../../../components/tabs/parts/RawTab.js';
+type TabProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawTabProps, 'onPress' | 'children' | 'suffix' | 'id'> & ValidateLinkOptions<TRouter, TOptions> & {
+    children?: ReactNode;
+    suffixElement?: RawTabProps['suffix'];
+    id?: RawTabProps['id'];
+};
+/**
+ * A tab component that integrates with Tanstack Router for navigation.
+ * Provides seamless routing capabilities for tab-based navigation interfaces.
+ * @param props - Either router-based props (with 'to') or button-based props (with 'onPress')
+ * @example
+ * ```tsx
+ * import { Tab } from '@payfit/unity-components/integrations/tanstack-router'
+ *
+ * function NavigationTabs() {
+ *   return (
+ *     <Tabs>
+ *       <TabList aria-label="Main navigation">
+ *         <Tab to="/dashboard" id="dashboard">
+ *           Dashboard
+ *         </Tab>
+ *         <Tab to="/employees" id="employees">
+ *           Employees
+ *         </Tab>
+ *         <Tab onPress={() => alert('Action triggered')} id="action">
+ *           Perform Action
+ *         </Tab>
+ *       </TabList>
+ *     </Tabs>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - When 'to' prop is provided, the component renders as a router link
+ * - When 'onPress' 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 RawTab component
+ * - Must be used within a TabsProvider context for proper styling and behavior
+ * @see {@link TabProps} 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/tabs 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 Tab<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: TabProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace Tab {
+    var displayName: string;
+}
+export { Tab };
+export type { TabProps };

package/dist/esm/integrations/tanstack-router/components/tabs/parts/Tab.js

@@ -0,0 +1,15 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useLinkProps as f, createLink as a } from "@tanstack/react-router";
+import { RawTab as m } from "../../../../../components/tabs/parts/RawTab.js";
+const p = a(m);
+function c(r) {
+  const { suffixElement: t, id: s, ...o } = r, e = f(o), i = s ?? e.href ?? o.to;
+  return (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ n(p, { ...o, suffix: t, id: i })
+  );
+}
+c.displayName = "Tab";
+export {
+  c as Tab
+};

package/dist/esm/integrations/tanstack-router/components/tabs/parts/TabList.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Re-export of the base TabList component for convenience.
+ * This allows importing all tab-related components from the same tanstack-router integration.
+ */
+export { TabList } from '../../../../../components/tabs/parts/TabList.js';

package/dist/esm/integrations/tanstack-router/components/tabs/parts/TabPanel.d.ts

@@ -0,0 +1,77 @@
+import { PropsWithChildren } from 'react';
+import { TabPanelProps as BaseTabPanelProps } from '../../../../../components/tabs/parts/TabPanel.js';
+export interface TabPanelProps extends Omit<BaseTabPanelProps, 'id'> {
+    /**
+     * The panel ID. When provided, this TabPanel will only render when its ID matches the selected tab.
+     * When omitted, automatically uses the selectedKey from the parent Tabs component.
+     * @default selectedKey from Tabs context
+     */
+    id?: BaseTabPanelProps['id'];
+}
+/**
+ * A TabPanel component that integrates with Tanstack Router for automatic ID management.
+ * Uses the same sophisticated route matching logic as the Tabs component to determine the panel ID.
+ * @param {TabPanelProps} props - Standard TabPanel props with optional id and route matching options
+ * @param {ReactNode} props.children - The content to display in the tab panel
+ * @param {string} [props.id] - The panel ID. If not provided, uses matched route or current pathname
+ * @param {'exact' | 'fuzzy'} [props.routeMatch] - Route matching strategy for automatic ID detection
+ * @example
+ * ```tsx
+ * import { Tabs, Tab, TabList, TabPanel } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { Outlet } from '@tanstack/react-router'
+ *
+ * // Single auto-updating TabPanel (recommended)
+ * function SinglePanelTabs() {
+ *   return (
+ *     <Tabs>
+ *       <TabList aria-label="Main navigation">
+ *         <Tab to="/dashboard">Dashboard</Tab>
+ *         <Tab to="/employees">Employees</Tab>
+ *       </TabList>
+ *       <TabPanel>
+ *         <Outlet />
+ *       </TabPanel>
+ *     </Tabs>
+ *   )
+ * }
+ *
+ * // Multiple explicit TabPanels (for different layouts)
+ * function MultiPanelTabs() {
+ *   return (
+ *     <Tabs>
+ *       <TabList aria-label="Custom layouts">
+ *         <Tab to="/dashboard">Dashboard</Tab>
+ *         <Tab to="/analytics">Analytics</Tab>
+ *       </TabList>
+ *       <TabPanel id="/dashboard" className="uy:grid uy:grid-cols-3">
+ *         <Outlet />
+ *       </TabPanel>
+ *       <TabPanel id="/analytics" className="uy:w-full uy:h-screen">
+ *         <Outlet />
+ *       </TabPanel>
+ *     </Tabs>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically syncs id with the same route matching logic as Tabs component
+ * - Handles nested routes properly (e.g., /settings/security matches /settings tab)
+ * - Supports both exact and fuzzy route matching via routeMatch prop
+ * - Maintains all accessibility features from the base TabPanel component
+ * - Must be used within a Tabs component from tanstack-router integration
+ * - **Pattern Constraint**: Choose ONE approach per Tabs component:
+ *   - Single TabPanel without id prop (auto-syncs with active route)
+ *   - Multiple TabPanels with explicit id props (one per tab)
+ * - Never mix auto-sync and explicit TabPanels in the same Tabs component
+ * - When using explicit ids, ensure count(Tab) equals count(TabPanel)
+ * - id and routeMatch can be overridden for custom behavior
+ * @see {@link TabPanelProps} 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/tabs 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}
+ */
+export declare function TabPanel({ children, id: idProp, ...tabPanelProps }: PropsWithChildren<TabPanelProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace TabPanel {
+    var displayName: string;
+}

package/dist/esm/integrations/tanstack-router/components/tabs/parts/TabPanel.js

@@ -0,0 +1,16 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useContext as s } from "react";
+import { TabListStateContext as i } from "react-aria-components";
+import { TabPanel as r } from "../../../../../components/tabs/parts/TabPanel.js";
+function m({
+  children: t,
+  id: e,
+  ...o
+}) {
+  const a = s(i)?.selectedKey ?? void 0;
+  return /* @__PURE__ */ n(r, { ...o, id: e ?? a, children: t });
+}
+m.displayName = "TabPanel";
+export {
+  m as TabPanel
+};