@payfit/unity-components/dist/esm/integrations/tanstack-router/components/tabs/parts/TabPanel.d.ts

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