import { Key } from '@react-types/shared';
import { ReactElement, ReactNode } from 'react';
import { BaseProps, Styles } from '../../../tasty';
import { CubeItemProps } from '../../content/Item';
/** Visual appearance type for tabs */
export type TabType = 'default' | 'panel' | 'radio';
/** Tab size options */
export type TabSize = 'medium' | 'large';
/** Common props for panel rendering behavior */
interface PanelBehaviorProps {
    /** If true, panel is rendered but hidden when not active. */
    prerender?: boolean;
    /** If true, once visited the panel stays in DOM. */
    keepMounted?: boolean;
}
/** Common props for QA attributes */
interface QAProps {
    /** QA selector attribute. */
    qa?: string;
    /** Additional QA value attribute. */
    qaVal?: string;
}
/** Props from CubeItemProps that don't apply to Tab */
type OmittedItemProps = 'id' | 'type' | 'size' | 'theme' | 'shape' | 'icon' | 'rightIcon' | 'prefix' | 'suffix' | 'description' | 'descriptionPlacement' | 'descriptionProps' | 'tooltip' | 'defaultTooltipPlacement' | 'hotkeys' | 'keyboardShortcutProps' | 'loadingSlot' | 'isLoading' | 'labelProps' | 'labelRef' | 'level' | 'highlight' | 'highlightCaseSensitive' | 'highlightStyles' | 'variant' | 'htmlType' | 'isSelected' | 'preserveActionsSpace' | 'disableActionsFocus' | 'actions' | 'showActionsOnHover';
/** Common styling props for tabs - inherits style props from CubeItemProps */
interface TabStyleProps extends Omit<CubeItemProps, OmittedItemProps> {
    /** Tab size. Large uses `t2m` preset, medium uses `t3m`. */
    size?: TabSize;
    /** Visual appearance type. */
    type?: TabType;
    /** Whether to show actions only on hover. */
    showActionsOnHover?: boolean;
}
export interface CubeTabsProps extends BaseProps, PanelBehaviorProps {
    /** Controlled active tab key. When provided, component is controlled. */
    activeKey?: Key;
    /** Initial active tab key for uncontrolled mode. */
    defaultActiveKey?: Key;
    /**
     * Visual appearance type for tabs.
     * - `default` - Standard tabs with selection indicator below (default)
     * - `panel` - Panel-style tabs with sharp edges and no gaps
     * - `radio` - Radio button style for tab selection
     * @default 'default'
     */
    type?: TabType;
    /** Tab size. Large uses `t2m` preset, medium uses `t3m`. */
    size?: TabSize;
    /** Accessible label for the tab list. */
    label?: string;
    /** Content rendered before the tab list. */
    prefix?: ReactNode;
    /** Content rendered after the tab list. */
    suffix?: ReactNode;
    /** Callback when active tab changes. */
    onChange?: (key: Key) => void;
    /** Callback when tab delete button is clicked. Presence enables delete buttons. */
    onDelete?: (key: Key) => void;
    /** Callback when a tab title is changed. Enables title editing on tabs with isEditable. */
    onTitleChange?: (key: Key, newTitle: string) => void;
    /** Whether to show tab actions only on hover. Can be overridden per-tab. */
    showActionsOnHover?: boolean;
    /** Custom tasty styles for the tab bar container. */
    styles?: Styles;
    /** QA selector attribute. */
    qa?: string;
    /** Tab components or Tabs.List with Tabs.Panel. */
    children?: ReactNode;
    /**
     * Functional content renderer for optimized lazy evaluation.
     * When provided, panel content is only evaluated for the active tab,
     * while inactive tabs use cached content. This prevents expensive
     * re-renders of tab content on every parent render.
     *
     * Use with tabs that have no children for maximum optimization.
     *
     * @param key - The key of the tab to render content for
     * @returns Panel content for the given tab
     *
     * @example
     * ```tsx
     * <Tabs
     *   renderPanel={(key) => {
     *     switch (key) {
     *       case 'tab1': return <ExpensiveComponent />;
     *       case 'tab2': return <AnotherExpensive />;
     *       default: return null;
     *     }
     *   }}
     * >
     *   <Tab key="tab1" title="Tab 1" />
     *   <Tab key="tab2" title="Tab 2" />
     * </Tabs>
     * ```
     */
    renderPanel?: (key: Key) => ReactNode;
    /**
     * Cache keys for individual panels. Enables caching for specified panels.
     *
     * By default (without cache keys), panels re-render on every Tabs render.
     * When a panel has a non-undefined cache key defined, its content is cached
     * and reused until the cache key changes.
     *
     * **Important:**
     * - Cache keys must be primitive values (string, number, boolean, null).
     * - Objects/arrays will cause cache misses on every render (reference comparison).
     * - Symbol tab keys are not supported for caching (use string keys instead).
     * - Setting a key to `undefined` is the same as not having it (no caching).
     *
     * @example
     * ```tsx
     * // Enable caching for specific panels with their dependencies as cache keys
     * <Tabs
     *   renderPanel={(key) => <Panel data={data[key]} />}
     *   panelCacheKeys={{
     *     tab1: data.tab1.version,  // Cached, invalidates when version changes
     *     tab2: data.tab2.version,  // Cached, invalidates when version changes
     *     // tab3 has no cache key - re-renders on every Tabs render
     *   }}
     * />
     * ```
     */
    panelCacheKeys?: Record<string | number, string | number | boolean | null | undefined>;
}
export interface CubeTabProps extends TabStyleProps, PanelBehaviorProps {
    /**
     * Unique identifier for the tab. Used for activeKey matching.
     * Auto-injected from the React `key` prop (converted to string).
     * Note: All keys are internally converted to strings for React Aria compatibility.
     */
    id?: string;
    /** Content displayed in the tab button. */
    title: ReactNode;
    /** Panel content rendered when tab is active. */
    children?: ReactNode;
    /** Disables the tab (cannot be selected). */
    isDisabled?: boolean;
    /** Actions to render in the tab (e.g., icons, buttons). Rendered before delete action if tab is deletable. */
    actions?: ReactNode;
    /** Whether the tab title can be edited. Requires onTitleChange on Tabs or Tab. */
    isEditable?: boolean;
    /** Callback when this tab's title is changed. Overrides parent's onTitleChange. */
    onTitleChange?: (newTitle: string) => void;
}
export interface CubeTabPanelProps extends PanelBehaviorProps, QAProps {
    /**
     * Panel identifier. Must match a Tab's id.
     * Auto-injected from the React `key` prop (converted to string).
     */
    id?: string;
    /** Panel content. */
    children?: ReactNode;
    /** Custom tasty styles for the panel container. */
    styles?: Styles;
}
export interface CubeTabListProps {
    /** Tab components. */
    children?: ReactNode;
}
/** Ref API for programmatic control of Tabs component */
export interface CubeTabsRef {
    /** The root DOM element of the Tabs component */
    element: HTMLDivElement | null;
    /** Start editing a tab's title by its key */
    startEditing: (key: Key) => void;
    /** Cancel the current editing session */
    cancelEditing: () => void;
}
declare function Tab(_props: CubeTabProps): ReactElement | null;
declare namespace Tab {
    var displayName: string;
}
declare function TabPanel(_props: CubeTabPanelProps): ReactElement | null;
declare namespace TabPanel {
    var displayName: string;
}
declare function TabList(_props: CubeTabListProps): ReactElement | null;
declare namespace TabList {
    var displayName: string;
}
/**
 * Tabs component for organizing content into multiple panels.
 * Built with React Aria for full accessibility support.
 *
 * **Note:** Tab keys are internally converted to strings for React Aria compatibility.
 * When using `activeKey`, `onChange`, etc., be aware that numeric keys will be
 * converted to their string equivalents.
 *
 * @example
 * // Simple usage
 * <Tabs defaultActiveKey="tab1">
 *   <Tab key="tab1" title="Tab 1">Content 1</Tab>
 *   <Tab key="tab2" title="Tab 2">Content 2</Tab>
 * </Tabs>
 *
 * @example
 * // Tabs-only (no panels)
 * <Tabs activeKey={activeTab} onChange={setActiveTab}>
 *   <Tab key="overview" title="Overview" />
 *   <Tab key="settings" title="Settings" />
 * </Tabs>
 *
 * @example
 * // Explicit panels
 * <Tabs defaultActiveKey="tab1">
 *   <Tabs.List>
 *     <Tab key="tab1" title="Tab 1" />
 *     <Tab key="tab2" title="Tab 2" />
 *   </Tabs.List>
 *   <Tabs.Panel key="tab1">Content 1</Tabs.Panel>
 *   <Tabs.Panel key="tab2">Content 2</Tabs.Panel>
 * </Tabs>
 *
 * @example
 * // Optimized lazy rendering with renderPanel
 * <Tabs
 *   defaultActiveKey="tab1"
 *   renderPanel={(key) => {
 *     switch (key) {
 *       case 'tab1': return <ExpensiveComponent />;
 *       case 'tab2': return <AnotherExpensive />;
 *       default: return null;
 *     }
 *   }}
 * >
 *   <Tab key="tab1" title="Tab 1" />
 *   <Tab key="tab2" title="Tab 2" />
 * </Tabs>
 */
export declare const Tabs: import("react").ForwardRefExoticComponent<CubeTabsProps & import("react").RefAttributes<CubeTabsRef>> & {
    Tab: typeof Tab;
    List: typeof TabList;
    Panel: typeof TabPanel;
};
export { Tab, TabList, TabPanel };
