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