@payfit/unity-components 1.2.0 → 2.0.0

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

package/dist/esm/integrations/tanstack-router/components/task-menu/SubTask.d.ts

@@ -0,0 +1,69 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { SubTaskProps as RawSubTaskProps } from '../../../../components/task-menu/parts/RawSubTask.js';
+type SubTaskRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawSubTaskProps, 'href' | 'onPress'> & ValidateLinkOptions<TRouter, TOptions>;
+type SubTaskButtonProps = Omit<RawSubTaskProps, 'href'> & {
+    onPress: NonNullable<RawSubTaskProps['onPress']>;
+};
+export type SubTaskProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = SubTaskRouterProps<TRouter, TOptions> | SubTaskButtonProps;
+/**
+ * A subtask component that integrates with Tanstack Router for seamless navigation within task groups.
+ * Represents individual subtask items within a TaskGroup that can be either links for navigation or buttons
+ * for custom interactions, with support for various visual states including completed, uncompleted, and locked.
+ * @param {SubTaskProps} props - Either router-based props (with 'to') or button-based props (with 'onPress')
+ * @example
+ * ```tsx
+ * import { SubTask } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { TaskMenu, TaskGroup } from '@payfit/unity-components'
+ *
+ * function OnboardingTaskGroup() {
+ *   return (
+ *     <TaskMenu label="Onboarding tasks">
+ *       <TaskGroup
+ *         uniqueId="onboarding"
+ *         label="Complete Onboarding"
+ *         taskNumber={1}
+ *         taskStatus="uncompleted"
+ *       >
+ *         <SubTask
+ *           uniqueId="profile-setup"
+ *           label="Complete Profile Information"
+ *           taskStatus="uncompleted"
+ *           to="/onboarding/profile"
+ *         />
+ *         <SubTask
+ *           uniqueId="validate-email"
+ *           label="Validate Email Address"
+ *           taskStatus="completed"
+ *           onPress={() => console.log('Email validation triggered')}
+ *         />
+ *         <SubTask
+ *           uniqueId="final-approval"
+ *           label="Manager Approval"
+ *           taskStatus="locked"
+ *           to="/onboarding/approval"
+ *         />
+ *       </TaskGroup>
+ *     </TaskMenu>
+ *   )
+ * }
+ * ```
+ * @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 TaskGroup component for hierarchical task organization
+ * - Provides automatic active state styling based on current route
+ * - Supports multiple task states: completed, uncompleted, and locked
+ * - Displays a dot indicator instead of a numbered badge to distinguish from main Task components
+ * - Maintains all accessibility features from the underlying RawSubTask component
+ * - SubTask selection state is automatically managed based on routing context
+ * @see {@link SubTaskProps} 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/task-menu 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 SubTask<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: SubTaskProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace SubTask {
+    var displayName: string;
+}
+export { SubTask };

package/dist/esm/integrations/tanstack-router/components/task-menu/SubTask.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createLink as e } from "@tanstack/react-router";
+import { RawSubTask as o } from "../../../../components/task-menu/parts/RawSubTask.js";
+const i = e(o);
+function a(r) {
+  return "to" in r || "href" in r ? (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ t(i, { ...r, activeProps: { "data-current": !0 } })
+  ) : /* @__PURE__ */ t(o, { ...r });
+}
+a.displayName = "SubTask";
+export {
+  a as SubTask
+};

package/dist/esm/integrations/tanstack-router/components/task-menu/Task.d.ts

@@ -0,0 +1,64 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { TaskProps as RawTaskProps } from '../../../../components/task-menu/parts/RawTask.js';
+type TaskRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawTaskProps, 'href' | 'onPress'> & ValidateLinkOptions<TRouter, TOptions>;
+type TaskButtonProps = Omit<RawTaskProps, 'href'> & {
+    onPress: NonNullable<RawTaskProps['onPress']>;
+};
+export type TaskProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = TaskRouterProps<TRouter, TOptions> | TaskButtonProps;
+/**
+ * A task component that integrates with Tanstack Router for seamless navigation within task menus.
+ * Represents individual task items that can be either links for navigation or buttons for custom interactions,
+ * with support for various visual states including completed, uncompleted, locked, and selected states.
+ * @param {TaskProps} props - Either router-based props (with 'to') or button-based props (with 'onPress')
+ * @example
+ * ```tsx
+ * import { Task } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { TaskMenu } from '@payfit/unity-components'
+ *
+ * function OnboardingTasks() {
+ *   return (
+ *     <TaskMenu label="Onboarding tasks">
+ *       <Task
+ *         uniqueId="setup-profile"
+ *         label="Complete Profile Setup"
+ *         taskNumber={1}
+ *         taskStatus="uncompleted"
+ *         to="/profile/setup"
+ *       />
+ *       <Task
+ *         uniqueId="validate-data"
+ *         label="Validate Information"
+ *         taskNumber={2}
+ *         taskStatus="completed"
+ *         onPress={() => console.log('Validation triggered')}
+ *       />
+ *       <Task
+ *         uniqueId="final-review"
+ *         label="Final Review"
+ *         taskNumber={3}
+ *         taskStatus="locked"
+ *         to="/review"
+ *       />
+ *     </TaskMenu>
+ *   )
+ * }
+ * ```
+ * @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 TaskMenu component for consistent task navigation UI patterns
+ * - Provides automatic active state styling based on current route
+ * - Supports multiple task states: completed, uncompleted, and locked
+ * - Maintains all accessibility features from the underlying RawTask component
+ * - Task selection state is automatically managed based on routing context
+ * @see {@link TaskProps} 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/task-menu 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 Task<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: TaskProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace Task {
+    var displayName: string;
+}
+export { Task };

package/dist/esm/integrations/tanstack-router/components/task-menu/Task.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createLink as e } from "@tanstack/react-router";
+import { RawTask as o } from "../../../../components/task-menu/parts/RawTask.js";
+const i = e(o);
+function a(r) {
+  return "to" in r || "href" in r ? (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ t(i, { ...r, activeProps: { "data-current": !0 } })
+  ) : /* @__PURE__ */ t(o, { ...r });
+}
+a.displayName = "Task";
+export {
+  a as Task
+};

package/dist/esm/integrations/tanstack-router/index.d.ts

@@ -0,0 +1,16 @@
+export * from './components/breadcrumbs/Breadcrumb.js';
+export * from './components/breadcrumbs/BreadcrumbLink.js';
+export * from './components/breadcrumbs/Breadcrumbs.js';
+export * from './components/form-contextual-link/FormContextualLink.js';
+export * from './components/link/Link.js';
+export * from './components/menu-item/MenuItem.js';
+export * from './components/nav-item/NavItem.js';
+export * from './components/pagination/PaginationLink.js';
+export * from './components/pagination/PaginationNext.js';
+export * from './components/pagination/PaginationPrevious.js';
+export * from './components/tabs/parts/Tab.js';
+export * from './components/tabs/parts/TabPanel.js';
+export * from './components/tabs/parts/TabList.js';
+export * from './components/tabs/Tabs.js';
+export * from './components/task-menu/Task.js';
+export * from './components/task-menu/SubTask.js';

package/dist/esm/integrations/tanstack-router/utils/decorators.d.ts

@@ -0,0 +1,23 @@
+import { Decorator, StoryContext } from '@storybook/react-vite';
+import { AnyContext, LoaderFnContext, RootRoute, RouteComponent } from '@tanstack/react-router';
+interface RouteConfig {
+    path: string;
+    element: RouteComponent | 'story';
+    loader?: ((ctx: LoaderFnContext<RootRoute<undefined, object, AnyContext, AnyContext, object>, any, any, any, AnyContext, any, any>) => any) | undefined;
+    children?: RouteConfig[];
+    beforeLoad?: ((ctx: LoaderFnContext<RootRoute<undefined, object, AnyContext, AnyContext, object>, any, any, any, AnyContext, any, any>) => any) | undefined;
+    validateSearch?: (search: Record<string, unknown>) => any;
+    loaderDeps?: (deps: Record<string, unknown>) => Record<string, unknown>;
+}
+export interface TanstackRouterDecoratorContext extends StoryContext {
+    parameters: {
+        router?: {
+            initialPath?: string;
+            renderRootRoute?: (Story: Parameters<Decorator>[0]) => React.ReactNode;
+            routes: RouteConfig[];
+        };
+        tanstackRouterDevTools?: boolean;
+    };
+}
+export declare const TanstackRouterDecorator: Decorator;
+export {};

package/dist/esm/integrations/tanstack-router.js

@@ -0,0 +1,34 @@
+import { BreadcrumbLink as e } from "./tanstack-router/components/breadcrumbs/BreadcrumbLink.js";
+import { FormContextualLink as m } from "./tanstack-router/components/form-contextual-link/FormContextualLink.js";
+import { Link as x } from "./tanstack-router/components/link/Link.js";
+import { MenuItem as p } from "./tanstack-router/components/menu-item/MenuItem.js";
+import { NavItem as i } from "./tanstack-router/components/nav-item/NavItem.js";
+import { PaginationLink as u } from "./tanstack-router/components/pagination/PaginationLink.js";
+import { PaginationNext as s } from "./tanstack-router/components/pagination/PaginationNext.js";
+import { PaginationPrevious as L } from "./tanstack-router/components/pagination/PaginationPrevious.js";
+import { Tab as c } from "./tanstack-router/components/tabs/parts/Tab.js";
+import { TabPanel as g } from "./tanstack-router/components/tabs/parts/TabPanel.js";
+import { Tabs as l } from "./tanstack-router/components/tabs/Tabs.js";
+import { Task as I } from "./tanstack-router/components/task-menu/Task.js";
+import { SubTask as C } from "./tanstack-router/components/task-menu/SubTask.js";
+import { Breadcrumb as M } from "../components/breadcrumbs/parts/Breadcrumb.js";
+import { Breadcrumbs as h } from "../components/breadcrumbs/Breadcrumbs.js";
+import { TabList as q } from "../components/tabs/parts/TabList.js";
+export {
+  M as Breadcrumb,
+  e as BreadcrumbLink,
+  h as Breadcrumbs,
+  m as FormContextualLink,
+  x as Link,
+  p as MenuItem,
+  i as NavItem,
+  u as PaginationLink,
+  s as PaginationNext,
+  L as PaginationPrevious,
+  C as SubTask,
+  c as Tab,
+  q as TabList,
+  g as TabPanel,
+  l as Tabs,
+  I as Task
+};

package/dist/esm/providers/router/RouterProvider.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, PropsWithChildren } from 'react';
 import { RouterProvider as AriaRouterProvider } from 'react-aria-components';
 export interface ExtendedRouterContextValue {
     /**
@@ -26,7 +26,7 @@ export interface RouterProviderProps extends ComponentProps<typeof AriaRouterPro
     isActive: (to: string) => boolean;
 }
 /**
- * The `RouterProvider` component is a provider that allows for integrations between Unity components that render links (such as `Link`, `NavItem`, etc.) and any client-side routing library in a single or multi-page application.
+ * The `RouterProvider` component is a provider that allows for integrations between Unity components that render links (such as `RawLink`, `RawNavItem`, etc.) and any client-side routing library in a single or multi-page application.
  *
  * By default, links perform native browser navigation when they are interacted with. However, many apps and frameworks use client side routers to avoid a full page reload when navigating between pages. The `RouterProvider` component configures all Unity components that support it to navigate using the client side router you provide. Set this up once in the root of your app, and any component with the href prop will automatically navigate using your router.
  */
@@ -34,4 +34,9 @@ export declare function RouterProvider({ isActive, children, ...routerProps }: R
 export declare namespace RouterProvider {
     var displayName: string;
 }
+/**
+ * The `NoopRouterProvider` should only be use when transitioning between routers to bail out of the previous provider
+ * that is rendered upper in the react tree.
+ */
+export declare function NoopRouterProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/providers/router/RouterProvider.js

@@ -1,18 +1,22 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useContext as u, createContext as i } from "react";
+import { useContext as n, createContext as i } from "react";
 import { RouterProvider as d } from "react-aria-components";
 const o = i(
   null
-), R = () => u(o);
-function m({
-  isActive: t,
-  children: n,
-  ...r
+), a = () => n(o);
+function v({
+  isActive: r,
+  children: u,
+  ...t
 }) {
-  return /* @__PURE__ */ e(o.Provider, { value: { isActive: t, ...r }, children: /* @__PURE__ */ e(d, { ...r, children: n }) });
+  return /* @__PURE__ */ e(o.Provider, { value: { isActive: r, ...t }, children: /* @__PURE__ */ e(d, { ...t, children: u }) });
 }
-m.displayName = "RouterProvider";
+function c({ children: r }) {
+  return /* @__PURE__ */ e(o.Provider, { value: null, children: r });
+}
+v.displayName = "RouterProvider";
 export {
-  m as RouterProvider,
-  R as useRouter
+  c as NoopRouterProvider,
+  v as RouterProvider,
+  a as useRouter
 };

package/dist/esm/types/DataAttributes.d.ts

@@ -1 +1 @@
-export type DataAttributes = Record<`data-${string}`, string | number>;
+export type DataAttributes = Record<`data-${string}`, unknown>;

package/i18n/en-GB.json

@@ -3,6 +3,7 @@
   "unity:component:common:clear:title": "Clear",
   "unity:component:common:close:label": "Close",
   "unity:component:common:loading:label": "Loading...",
+  "unity:component:common:unknown": "unknown",
   "unity:component:common:previous": "Previous",
   "unity:component:common:next": "Next",
   "unity:component:common:customer-support:url": "https://support.payfit.com/en/inbox/",

package/i18n/es-ES.json

@@ -3,6 +3,7 @@
   "unity:component:common:clear:title": "Borrar",
   "unity:component:common:close:label": "Cerrar",
   "unity:component:common:loading:label": "Cargando...",
+  "unity:component:common:unknown": "desconocido",
   "unity:component:common:previous": "Anterior",
   "unity:component:common:next": "Siguiente",
   "unity:component:common:customer-support:url": "https://support.payfit.com/es/inbox/",

package/i18n/fr-FR.json

@@ -3,6 +3,7 @@
   "unity:component:common:clear:title": "Effacer",
   "unity:component:common:close:label": "Fermer",
   "unity:component:common:loading:label": "Chargement...",
+  "unity:component:common:unknown": "inconnu",
   "unity:component:common:previous": "Précédent",
   "unity:component:common:next": "Suivant",
   "unity:component:common:customer-support:url": "https://support.payfit.com/fr/inbox/",