import React from 'react';
import type { ReactNode } from 'react';
import type { Hash, TabComponent } from '../../../utils/childTypes';
/**
 * Represents the structure for each tab header item in the `Tabs` component.
 * Each tab is identified by a unique hash value and displays a label, which can be a string or any ReactNode.
 * This is used to define the clickable tab headers and their corresponding content.
 */
export interface TabHeadItems {
    /**
     * A unique string that identifies the tab. This value is used to match the tab with its corresponding content.
     */
    hash: Hash;
    /**
     * The label to be displayed on the tab. This can be a string or any ReactNode, allowing for flexible tab header content.
     */
    label: ReactNode;
}
/**
 * Interface representing the props for the `Tabs` component. This component manages the display of tabbed content,
 * allowing users to switch between different sections by clicking on corresponding tab headers.
 */
export interface ComponentProps {
    /**
     * Represents the currently active tab. This is a unique identifier, usually a hash string,
     * that corresponds to the tab content being displayed.
     */
    activeTab: Hash;
    /**
     * An array of `TabComponent` elements that represent the content associated with each tab.
     * Each child is matched with a tab based on its corresponding hash.
     */
    children: TabComponent[];
    /**
     * An array of `TabHeadItems`, representing the header items for each tab. These items contain a hash and label,
     * which help users navigate between the different tabbed sections.
     */
    headItems: TabHeadItems[];
    /**
     * A boolean flag that indicates whether all tabs should be pre-mounted. When set to `true`, all tab content will be rendered in the DOM, even if it is not currently active. This can be useful for performance optimization in certain scenarios, but may increase initial load time.
     *
     * @default false
     */
    isPremountingAllTabs?: boolean;
    /**
     * The `testId` property represents a unique identifier, usually in the form of a string, assigned to a component for testing purposes.
     * This property is crucial for uniquely identifying components during testing, allowing for more accurate and reliable tests.
     *
     * @default 'Tabs'
     */
    testId?: string;
}
/**
 * Renders a `Tabs` component that allows navigation between different sections or views.
 * The component takes a list of head items representing each tab and displays the corresponding child content based on the active tab.
 * Transitions between tabs are animated using Framer Motion, providing a smooth user experience.
 * The `useTabs` hook is used to manage the current tab state and direction of tab transitions.
 *
 * @param props                      The component props.
 * @param props.activeTab            The initially active tab, identified by its hash value.
 * @param props.children             The content of the tabs, where each child corresponds to a tab section.
 * @param props.headItems            An array of tab headers, each with a label and hash value.
 * @param props.isPremountingAllTabs A flag indicating whether all tabs should be pre-mounted in the DOM, even if they are not currently active.
 * @param props.testId               A unique identifier for testing purposes.
 * @returns A React component that renders a tabbed interface with animated transitions.
 *
 * @example
 * ```tsx
 * const headItems = [
 *   { hash: 'tab1', label: 'Tab 1' },
 *   { hash: 'tab2', label: 'Tab 2' }
 * ];
 *
 * <Tabs activeTab="tab1" headItems={headItems}>
 *   <TabContent1 type={{ hash: 'tab1' }} />
 *   <TabContent2 type={{ hash: 'tab2' }} />
 * </Tabs>
 * ```
 */
declare const Tabs: {
    ({ activeTab, children, headItems, isPremountingAllTabs, testId }: ComponentProps): React.JSX.Element;
    displayName: string;
};
export { Tabs };