@payfit/unity-components 2.46.13 → 2.46.14

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,71 @@
+import { jsx as l } from "react/jsx-runtime";
+import { Children as I, isValidElement as R } from "react";
+import { useLocation as b, useNavigate as v, useRouter as K, useChildMatches as C } from "@tanstack/react-router";
+import { RouterProvider as N } from "react-aria-components";
+import { Tabs as T } from "../../../../components/tabs/Tabs.js";
+function j(t) {
+  return typeof t == "object" && t !== null;
+}
+function x(t) {
+  return typeof t == "string" || typeof t == "number";
+}
+function h(t, c, a) {
+  let o;
+  return I.forEach(t, (s) => {
+    if (o || !R(s)) return;
+    const e = s.props;
+    if (j(e)) {
+      if ("search" in e && ("to" in e || "href" in e))
+        try {
+          const u = c.buildLocation(e);
+          if (u.href === a) {
+            o = x(e.id) ? e.id : u.href;
+            return;
+          }
+        } catch {
+        }
+      "children" in e && (o = h(
+        e.children,
+        c,
+        a
+      ));
+    }
+  }), o;
+}
+function $({
+  children: t,
+  selectedKey: c,
+  onSelectionChange: a,
+  routeMatch: o = "fuzzy",
+  ...s
+}) {
+  const e = b(), u = v(), p = K(), f = C({
+    select: (n) => {
+      if (n.length !== 0)
+        return o === "exact" ? n.reduce((r, i) => {
+          const d = String(r.routeId);
+          return String(i.routeId).length > d.length ? i : r;
+        }) : n.reduce((r, i) => {
+          const d = String(r.routeId);
+          return String(i.routeId).length < d.length ? i : r;
+        });
+    }
+  }), g = `${e.pathname}${e.searchStr}`, m = typeof t == "function" ? void 0 : h(t, p, g), y = (f ? f.pathname : void 0) ?? e.pathname;
+  return /* @__PURE__ */ l(N, { navigate: (n) => {
+    u({ href: n });
+  }, children: /* @__PURE__ */ l(
+    T,
+    {
+      ...s,
+      selectedKey: c ?? m ?? y,
+      onSelectionChange: (n) => {
+        a?.(n);
+      },
+      children: t
+    }
+  ) });
+}
+$.displayName = "Tabs";
+export {
+  $ 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,23 @@
+import { createElement as c } from "react";
+import { useLinkProps as p, createLink as f } from "@tanstack/react-router";
+import { RawTab as m } from "../../../../../components/tabs/parts/RawTab.js";
+const l = f(m);
+function h(e) {
+  const { suffixElement: s, id: i, ...o } = e, t = p(o).href, n = t ? t.split("?")[0] : void 0, a = "search" in o ? t : n, r = i ?? a ?? o.to;
+  return (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ c(
+      l,
+      {
+        ...o,
+        key: r,
+        suffix: s,
+        id: r
+      }
+    )
+  );
+}
+h.displayName = "Tab";
+export {
+  h 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/Tabs";
+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
+};