import { IconName } from '../../icons/Icon';
/**
 * Interfaz TabItem
 */
export interface TabItem {
    label: string;
    size: TabSize;
    iconBefore?: string;
    iconAfter?: string;
    hint?: string;
}
/**
 * Tipado para el tamaño del Tab.
 */
export type TabSize = "small" | "medium" | "large";
/**
 * Props del componente Tab.
 */
export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    label: string;
    iconBefore?: IconName;
    iconAfter?: IconName;
    active?: boolean;
    size?: TabSize;
    withBottomBar?: boolean;
    withShadow?: boolean;
    disabled?: boolean;
    direction?: "left" | "right";
    hint?: string | null;
}
/**
 * Componente `Tab`
 *
 * Representa una pestaña interactiva que se usa dentro de un contenedor de Tabs.
 * Se comporta como un botón y admite iconos antes o después del texto.
 * Puede mostrar una barra inferior animada cuando está activa y aplicar un box-shadow en estado activo si se desea.
 *
 * @param label - Texto de la pestaña.
 * @param iconBefore - (Opcional) Ícono antes del texto, debe ser un `IconName`.
 * @param iconAfter - (Opcional) Ícono después del texto, debe ser un `IconName`.
 * @param active - (Opcional) Indica si la pestaña está activa.
 * @param size - (Opcional) Tamaño visual de la pestaña: "small" | "medium" | "large". Por defecto "medium".
 * @param withBottomBar - (Opcional) Si se debe mostrar la barra inferior animada. Por defecto `true`.
 * @param withShadow - (Opcional) Si se aplica box-shadow al hacer click/active. Por defecto `true`.
 * @param disabled - (Opcional) Deshabilita la pestaña. Por defecto `false`.
 *
 * @example
 * ```tsx
 * import { useState } from "react";
 * import { Tab } from "@/components/tab";
 *
 * const tabs = [
 *   { label: "Resumen", size: "large", iconBefore: "Info" },
 *   { label: "Detalles", size: "medium" },
 *   { label: "Configuración", size: "small" },
 * ];
 *
 * export default function TabExample() {
 *   const [activeTab, setActiveTab] = useState(0);
 *
 *   return (
 *     <div style={{ display: "flex", gap: "8px", overflowX: "auto" }}>
 *       {tabs.map((tab, index) => (
 *         <Tab
 *           key={index}
 *           label={tab.label}
 *           size={tab.size}
 *           iconBefore={tab.iconBefore}
 *           active={activeTab === index}
 *           onClick={() => setActiveTab(index)}
 *           withShadow={true}
 *           withBottomBar={true}
 *         />
 *       ))}
 *     </div>
 *   );
 * }
 * ```
 */
export declare const Tab: ({ label, iconBefore, iconAfter, active, withBottomBar, withShadow, size, direction, disabled, className, hint, ...props }: TabProps) => import("react/jsx-runtime").JSX.Element;