import React from 'react';
import type { NavigationRailItemProps } from './NavigationRailItem.types';
/**
 * NavigationRailItem - Componente independiente para items de NavigationRail
 *
 * Item individual de navegación vertical (rail) para aplicaciones. Proporciona
 * un punto de acceso a destinos mediante un icono, label opcional y badges.
 *
 * **Características principales:**
 * - Ancho fijo de 56px según Figma
 * - Estados completos: normal, hover, selected, focus, disabled
 * - Badges de notificación con contador opcional
 * - Tipografía Label XXSmall (10px Bold) según sistema de diseño
 * - Dark mode completo con estrategia 'class'
 * - Focus rings adaptativos para accesibilidad
 * - Soporte para iconos 16x16px
 *
 * **Especificaciones de Figma (node 4294-22931):**
 * - Ancho: 56px (w-14)
 * - Icon container: 32px altura, px-4 py-1, rounded-full
 * - Label: 10px Bold, leading 12px (Label XXSmall)
 * - Gap: 4px (gap-1)
 * - Badge: 13x13px, posición absolute
 *
 * **Estados visuales (según Figma):**
 * - **Enabled**: Icon transparent, label text-content-primary
 * - **Hover**: Icon container bg-primary-100 (#dbeefe), icon text-primary-600
 * - **Selected**: Icon container bg-primary-100 con overlay, icon text-primary-600
 * - **Focus**: Focus ring 2px (#60b6fa) con offset 2px (#dbeefe), sombras combinadas
 * - **Disabled**: Opacity 55%, no interactivo
 *
 * **Dark Mode:**
 * - Background: dark-bg-primary
 * - Hover icon container: dark-bg-primary/20
 * - Selected icon container: dark-primary-600/30
 * - Icon colors: dark-content-primary, dark-white on selected
 * - Focus ring: dark-border-custom
 *
 * **Mejores prácticas implementadas:**
 * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
 * - Tokens de color consistentes con documentación
 * - Accesibilidad ARIA completa
 * - Focus visible para keyboard navigation
 * - Badge positioning absoluto para no afectar layout
 *
 * @see docs/colors.md - Sistema de colores (primary-custom, dark-*, content-*)
 * @see docs/typography.md - Tipografía (Label XXSmall)
 * @see docs/spacing.md - Sistema de espaciado
 * @see docs/shadows.md - Sistema de sombras y focus rings
 * @see https://www.figma.com/design/5XNqf2YTxvwemxwo1LMQ6j/Siesa-UI-Kit?node-id=4294-22931
 *
 * @example
 * ```tsx
 * // Item básico
 * <NavigationRailItem
 *   id="home"
 *   icon={<HomeIcon />}
 *   label="Inicio"
 *   selected={true}
 *   onClick={() => navigate('/')}
 * />
 *
 * // Con badge de notificación
 * <NavigationRailItem
 *   id="notifications"
 *   icon={<BellIcon />}
 *   label="Notificaciones"
 *   badgeCount={5}
 *   onClick={() => navigate('/notifications')}
 * />
 *
 * // Item deshabilitado
 * <NavigationRailItem
 *   id="premium"
 *   icon={<StarIcon />}
 *   label="Premium"
 *   disabled={true}
 * />
 *
 * // Solo icono (sin label)
 * <NavigationRailItem
 *   id="home"
 *   icon={<HomeIcon />}
 *   label="Inicio"
 *   showLabelText={false}
 * />
 * ```
 */
export declare const NavigationRailItem: React.FC<NavigationRailItemProps>;
//# sourceMappingURL=NavigationRailItem.d.ts.map