import { TabItem, TabSize } from '..';
/**
 * Props del componente TabGroup.
 */
interface TabGroupProps {
    tabs: TabItem[];
    withBottomBar?: boolean;
    withShadow?: boolean;
    size?: TabSize;
    withChevrons?: boolean;
    chevronButtonSize?: number;
    chevronIconSize?: number;
    activeTab: number;
    setActiveTab: React.Dispatch<React.SetStateAction<number>>;
    tabClassname?: string;
}
/**
 * Componente `TabGroup`
 *
 * Agrupa varios `Tab` en un contenedor con desplazamiento horizontal.
 * Permite seleccionar un tab activo desde el exterior (componente controlado)
 * y moverse entre ellos mediante flechas.
 *
 * @param tabs - Array de `TabItem` que define cada pestaña.
 * @param activeTab - Índice del tab activo, controlado desde el padre.
 * @param setActiveTab - Función para actualizar el tab activo.
 * @param withBottomBar - (Opcional) Muestra la barra inferior animada. Por defecto `false`.
 * @param withShadow - (Opcional) Aplica sombra al tab activo. Por defecto `false`.
 * @param size - (Opcional) Tamaño de los tabs: "small" | "medium" | "large". Por defecto `"medium"`.
 * @param withChevrons - (Opcional) Muestra flechas para moverse entre tabs. Por defecto `true`.
 * @param chevronButtonSize - (Opcional) Tamaño de los botones de las flechas. Por defecto `57`.
 * @param chevronIconSize - (Opcional) Tamaño del icono dentro de las flechas. Por defecto `16`.
 * @param tabClassname - (Opcional) Clase CSS adicional que se aplica a cada `Tab` del grupo.
 *
 * @example
 * ```tsx
 * import { useState } from "react";
 *
 * export default function TabGroupExample() {
 *   const [activeTab, setActiveTab] = useState(0);
 *
 *   const tabs = [
 *     { label: "Resumen", size: "large", iconBefore: "Info" },
 *     { label: "Detalles", size: "medium" },
 *     { label: "Configuración", size: "small" },
 *   ];
 *
 *   return (
 *     <TabGroup
 *       tabs={tabs}
 *       activeTab={activeTab}
 *       setActiveTab={setActiveTab}
 *       withBottomBar={true}
 *       withShadow={true}
 *       size="medium"
 *       withChevrons={true}
 *       chevronButtonSize={50}
 *       chevronIconSize={16}
 *       tabClassname={styles.customTab}
 *     />
 *   );
 * }
 * ```
 */
export declare const TabGroup: ({ tabs, activeTab, setActiveTab, withBottomBar, withShadow, size, withChevrons, chevronButtonSize, chevronIconSize, tabClassname, }: TabGroupProps) => import("react/jsx-runtime").JSX.Element;
export {};