import { AvatarData } from '../atoms/avatar.tsx';
/**
 * Props for the RoomInfo component
 */
export interface RoomInfoProps {
    /**
     * Optional avatar data for the room to override context-managed avatar.
     * When provided, bypasses the AvatarContext and uses this data directly.
     * Useful for scenarios with external avatar management or testing.
     * If not provided, automatically fetches or creates avatar via useRoomAvatar hook.
     *
     * @example
     * // Using context-managed avatar (recommended)
     * <RoomInfo />
     *
     * @example
     * // Providing custom avatar data
     * <RoomInfo
     *   roomAvatar={{
     *     displayName: "VIP Lounge",
     *     color: "#FFD700",
     *     initials: "VL",
     *     src: "https://example.com/vip-avatar.jpg"
     *   }}
     * />
     */
    roomAvatar?: AvatarData;
    /**
     * Position coordinates for rendering the participant list dropdown.
     * Defines where the participant list appears relative to the viewport.
     * Adjust based on component placement to prevent edge overflow.
     *
     * @default { top: 0, left: 150 }
     *
     * @example
     * // Position for sidebar placement
     * <RoomInfo
     *   position={{ top: 60, left: 250 }}
     * />
     *
     */
    position?: {
        top: number;
        left: number;
    };
    /**
     * Additional CSS class names to apply to the root container element.
     * Use for spacing, sizing, positioning, and theme customizations.
     *
     * @example
     * // Custom spacing and background
     * <RoomInfo
     *   className="p-4 bg-blue-50 rounded-lg shadow-sm"
     * />
     *
     * @example
     * // Compact mobile layout
     * <RoomInfo
     *   className="px-2 py-1 gap-2"
     * />
     *
     * @example
     * // Fixed positioning for overlays
     * <RoomInfo
     *   className="fixed top-4 left-4 bg-white shadow-lg rounded-full px-4 py-2"
     * />
     *
     * @example
     * // Responsive design patterns
     * <RoomInfo
     *   className="flex-col md:flex-row gap-2 md:gap-3"
     * />
     */
    className?: string;
}
/**
 * RoomInfo component displays comprehensive information about a chat room with interactive features.
 * It must be used within the context of a ChatRoomProvider and AvatarProvider to function correctly.
 *
 * Features:
 * - Room avatar display
 * - Live presence count badge showing active participants
 * - Interactive hover tooltip with participant preview
 * - Expandable participant list with detailed user information
 * - In-place avatar editing with color and image customization
 * - Presence and typing indicators built-in
 * - Accessibility support with ARIA roles and keyboard navigation
 * - Customizable positioning
 *
 * Presence:
 * - Live participant count with visual badge
 * - Hover tooltip showing recent participants
 * - Detailed participant list with status indicators
 * - Current user highlighting and status
 *
 * Typing Indicators:
 * - Typing activity display
 * - Smart user exclusion (doesn't show own typing)
 * - Configurable display limits
 *
 * @example
 * // Sidebar room list item
 * const SidebarRoomItem = ({ roomName, isActive }) => {
 *   return (
 *     <div className={`room-item ${isActive ? 'active' : ''}`}>
 *       <RoomInfo
 *         className="px-3 py-2 hover:bg-gray-100 rounded-lg cursor-pointer"
 *         position={{ top: 0, left: 220 }}
 *       />
 *     </div>
 *   );
 * };
 *
 *
 * @example
 * // Custom avatar with external management
 * const ExternalAvatarRoom = ({ roomName, externalAvatar }) => {
 *   return (
 *     <RoomInfo
 *       roomAvatar={{
 *         displayName: room.customName,
 *         src: externalAvatar.imageUrl,
 *         color: room.themeColor,
 *         initials: room.customName.substring(0, 2).toUpperCase()
 *       }}
 *       className="p-4 bg-gradient-to-r from-blue-50 to-purple-50"
 *     />
 *   );
 * };
 *
 */
export declare const RoomInfo: ({ roomAvatar: propRoomAvatar, position, className, }: RoomInfoProps) => import("react/jsx-runtime").JSX.Element;