@penaprieto/design-system/dist/components/Header/Header.d.ts

Multi-brand React design system with design tokens from Figma

import React from 'react';
import './Header.css';
export interface HeaderNavItem {
    id: string;
    label: React.ReactNode;
    href?: string;
    active?: boolean;
}
export interface HeaderUser {
    name?: string;
    email?: string;
    avatarSrc?: string;
    initials?: string;
}
export interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
    /** Logo a mostrar en el header (puede ser imagen o texto) */
    logo?: React.ReactNode;
    /** Items de navegación principales */
    navItems?: HeaderNavItem[];
    /** Usuario autenticado (para mostrar avatar y datos básicos) */
    user?: HeaderUser;
    /** Acción principal en el lado derecho antes del avatar (por ejemplo Login/Registro/Contacto) */
    primaryAction?: React.ReactNode;
    /** Acciones adicionales a la derecha del avatar (por ejemplo íconos de carrito, notificaciones, etc.) */
    rightActions?: React.ReactNode;
    /** Callback cuando se hace click en un item de navegación */
    onNavItemClick?: (id: string) => void;
    /** Callback al hacer click en el avatar/área de usuario */
    onUserClick?: () => void;
}
export declare const Header: React.FC<HeaderProps>;
//# sourceMappingURL=Header.d.ts.map