import type { SidebarItemProps } from "./Sidebar.types";
/**
 * Componente item de navegación del Sidebar
 *
 * @description
 * Item individual de navegación dentro del sidebar.
 * Renderiza un `<a>` por defecto, pero puede ser cualquier elemento
 * o componente (ej: React Router Link, Next.js Link).
 *
 * Características:
 * - Soporta iconos y labels
 * - Gestiona estados de hover y focus
 * - Se registra automáticamente para navegación por teclado
 * - Aplica data attributes para styling
 * - Soporta render props para control total
 * - Compatible con React Router, Next.js, etc. via prop `as`
 * - Label oculto automáticamente cuando sidebar está colapsado (via CSS container queries)
 *
 * @example
 * ```tsx
 * // Uso básico
 * <SidebarItem
 *   href="/"
 *   icon={<HomeIcon />}
 *   label="Home"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Con React Router
 * <SidebarItem
 *   as={Link}
 *   to="/dashboard"
 *   icon={<DashboardIcon />}
 *   label="Dashboard"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Con Next.js Link
 * <SidebarItem
 *   LinkComponent={Link}
 *   href="/profile"
 *   icon={<UserIcon />}
 *   label="Profile"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Con render props
 * <SidebarItem href="/settings">
 *   {({ focused, hovered, disabled }) => (
 *     <div className={cn(
 *       'flex items-center gap-2',
 *       focused && 'ring-2',
 *       hovered && 'bg-zinc-800',
 *       disabled && 'opacity-50'
 *     )}>
 *       <SettingsIcon />
 *       <span>Settings</span>
 *     </div>
 *   )}
 * </SidebarItem>
 * ```
 *
 * @example
 * ```tsx
 * // Con callbacks
 * <SidebarItem
 *   href="/analytics"
 *   icon={<ChartIcon />}
 *   label="Analytics"
 *   onHover={() => prefetchAnalytics()}
 *   onClick={() => trackNavigation('analytics')}
 * />
 * ```
 */
export declare const SidebarItem: import("react").ForwardRefExoticComponent<SidebarItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
//# sourceMappingURL=SidebarItem.d.ts.map